business & technology for wedding and lifestyle pros
All Posts in Tag: Plugins

Adding a Visual Editor Stylesheet


By default, WordPress’ visual editor looks a bit boring, and might not be very reminiscent of your actual post’s look and feel. Today, we’re going to change all that by adding in a visual editor stylesheet to your WordPress theme.

Visual Editor Stylesheet in WordPress How-To

Photo: @Minamoto Images / Stocksy

What’s a visual editor stylesheet?

A visual editor stylesheet replaces the WordPress post editor defaults with your own theme’s styles, so that as you are crafting your post, you are able to immediately see the end result. Adding in this functionality isn’t necessary if you don’t have a lot of custom styling in your posts, but if you are using special fonts, image alignment, or even items as simple as custom bullet points, you may love this feature!

You’ll want to perform all of the steps below in your test site first, to be sure you have it down before replicating in your actual production site.

Below, my visual editor with the WordPress defaults:

WordPress Visual Editor Stylesheet How-To

Step 1: Edit functions.php

First, we’ll want to tell our WordPress theme that we want to use the visual editor stylesheet functionality. Add the following code into your theme’s functions.php file:

/**
 * Add editor stylesheet
 *
 */
 add_editor_style();

Step 2: Create your editor stylesheet

Log into your favorite FTP client (refresher on FTP here) and FTP down your theme’s style.css file to your computer. Change its name to editor-style.css, and FTP it back into your blog’s theme directory.

Step 3: Edit your editor stylesheet

In your WordPress dashboard, navigate to Appearance » Editor. You should now see your editor-style.css file. Click on it, and let’s edit it. Remember, none of the changes we’ll be making to this file will affect your front-end appearance, only what you see when you are creating a post.

Remove any unnecessary code, such as your theme’s container, header, footer, sidebar, widget, form styles, etc. You’re only looking for the styles that apply to your posts. If your theme’s CSS file is well-commented or well-sectioned out, this part should be easy.

Because the visual editor isn’t encased in your WordPress theme, you will want to remove any ascendant CSS selectors. For example, your theme (like mine) may have a class that applies only to post text. My ascendant selector class is .post_text, and the .post_text class precedes all of my CSS within posts. Where my style.css file says:

.post_text a, .post_text a:visited { 
	color: #aaa;
	text-decoration: none; 
	outline: none; 
	transition: color 100ms linear 0s;
}

, my editor-style.css only says:

a, a:visited { 
	color: #aaa;
	text-decoration: none; 
	outline: none; 
	transition: color 100ms linear 0s;
}

Also, any code directly in my .post_text CSS went straight into my editor-style.css file’s body tag, like so:

body {
	line-height: 1.5em;
	padding: 20px;
}

This process may take a little trial and error, but if you’re using this functionality, you probably know what custom code you are adding into your posts, and those are the classes you’ll want to have in your editor-style.css file.

Tip: If you are a bit blind (like I am) and your theme contains relatively small fonts, you may want to up the font sizes in your visual editor stylesheet to make it easier to see as you are writing your posts.

Step 4: Import custom fonts

If you are using custom fonts in your theme, such as Google Fonts, Typekit, or Fonts.com, you will need to import these into your visual editor stylesheet using the @import command and the CSS instructed by the font provider. This code can go at the top of your visual editor stylesheet. Example for the Google Karla font:

@import url('http://fonts.googleapis.com/css?family=Karla:400,700');

Step 5: Add a dropdown for custom styles in your visual editor

The excellent TinyMCE Advanced plugin allows you to add/edit the buttons in your WordPress visual editor. Install the plugin, then, under Settings -> TinyMCE Advanced, set up the buttons as you like them, and under Advanced Options check the box for “Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.” This adds a Formats dropdown to your visual editor, where you can easily select any styles in your editor-style.css for use in your posts.

Your visual editor should now look something like this:

Add a Visual Editor Stylesheet in WordPress

Much better, yes?

A few final tips:

  • It bears repeating, do this process in your test site first, as you are editing your theme’s functions.php file and installing a plugin.
  • If you are using caching of your site, disable it while you put the code into production, and purge your cache after making all of your updates.
  • Don’t forget that you can make custom changes to your editor-style.css that don’t affect your style.css file, such as making your fonts larger for easy editing.

Have fun with your new editor stylesheet!

Chime In

Back Up Your WordPress site with VaultPress


Now that we have installed WordPress and learned how to install plugins, we’re going to cover a few of the plugins that I consider absolute necessities for your blog, and nothing is more integral to your blog than protecting your content.

Back Up Your Blog With VaultPress

As we talked about in the What Is WordPress Anyway? post, WordPress requires both a web server and a database to run.  The web server holds your uploaded images and files, and the database holds your posts, comments, links, etc. Backing up your WordPress website or blog can be done multiple ways, but who wants to do it manually? Let’s face it, we’d all rather do it the easy way, and by far the easiest is using VaultPress, the backup and security suite from the creators of WordPress.

Installing and Configuring VaultPress

You must first sign up for a subscription with your WordPress.com login. The most inexpensive subscription is $5/month (or $55/year). After you have selected your subscription, activation is as simple as installing the VaultPress plugin (don’t know how to install plugins? Learn right here.) and inputting your registration key in your WordPress dashboard. After you register, you can return to the VaultPress dashboard and watch your backup go, while you’re doing your nails (or something equally constructive!). It may take a bit longer for your first backup to run than for your polish to dry, but once it has finished, incremental backups will be faster, and you won’t need to lift a (manicured) finger!

Other Features of VaultPress

In addition to maintaining a daily or real-time backup of your database (depending upon which plan you selected), VaultPress can also do one-click restores. This is useful to create or restore a test site, or in the awful event that your site was compromised or hacked. You can restore a backup from a 30-day archive in the Lite plan, or a full backup archive for the life of your VaultPress subscription in the Basic plans and higher. You’ll want to add your FTP or SSH credentials to your site settings in VaultPress, so it can work its restore magic. If you don’t know these details, ask your hosting company—you may not have SSH access (also known as “root” access), but you will surely be able to FTP (need a refresher on FTP?).

VaultPress is also integrated with Akismet, a spam prevention plugin, and offers subscription plans that include Akismet Business, as well as security scanning. All in, it’s some of the best money you’ll spend—because you can’t put a price on peace of mind!

Chime In

How To Install WordPress Plugins


Now that you’ve installed WordPress, it’s time to perk up the plain vanilla functionality by learning how to install WordPress plugins!

How to Install WordPress Plugins

What’s a Plugin?

For those of you who are just getting to know WordPress, a plugin is a piece of code that you install and activate. Plugins can be complex or simple, and they either add functionality to WordPress or change existing WordPress behavior.  Some plugins have settings that you change based upon how you want them to perform.  Some have CSS files (remember CSS?) that style their results.  Others require you to edit something in your theme.

The WordPress site has a comprehensive list of every plugin available.  From here, you can search for the functionality you’re looking for and see reviews of the plugins, number of downloads, installation notes, etc.  Chances are, if you want to do it, there is a plugin for it.

We’ll start by installing a plugin that saves some real estate on your WordPress dashboard, the Ozh’ Admin Drop Down Menu plugin.  By default, the WordPress dashboard menu is on your left.

WordPress Default Dashboard

When you install and activate Ozh’ Admin Drop Down Menu, the menu moves to the top, eliminating the need for lots of vertical scrolling.

WordPress Dashboard with Ozh Admin Plugin

There are two ways to install a plugin, through your WordPress dashboard, or through FTP.

How to install a plugin through your WordPress dashboard
  1. Navigate to Plugins » Add New
  2. In the search field, type in the plugin you want to install, in this case we’ll search for “Ozh Admin”
  3. When the search results appear, locate the plugin and click “Install Now”
  4. Click “Activate Plugin”

If you have a zipped file of your plugin, you can also install it through the WordPress dashboard.

  1. Navigate to Plugins » Add New
  2. Click “Upload Plugin”
  3. Choose your zipped file.
  4. Click “Install Now”
  5. Click “Activate Plugin”
How to install a plugin using FTP

By now, you know that I love FTP and use the Core FTP client (if you need a refresher on FTP, read this post).  To install a plugin using FTP:

  1. Download the plugin that you want to install from the WordPress plugin repository
  2. Unzip it to a folder on your computer
  3. Sign into Core FTP, or your chosen tool
  4. Navigate to www.yoursite.com/wp-content/plugins
  5. FTP the plugin folder from your computer to your server
  6. In your WordPress dashboard, navigate to Plugins » Installed Plugins » Inactive and activate your new plugin

Warning. Plugins are addictive!  However, too many plugins can slow down your site dramatically, so as amazing as they are, be judicious with their use. Coming soon, an article with my must-have plugins. Which are your favorites?

Chime In

Images In Blog Posts: The Technical Side


We’ve talked about the legalities and etiquette of images in your blog posts.  Today, let’s chat about some of the tech tips for blog images.

Tech Tips for Images in Blog Posts

Size matters

High resolution images are a no-no.  Not only will it kill the speed of your site to host high resolution images, but it’s also bad blogging etiquette. Use WordPress’s built-in Media resizing functionality to help you out with resizing.  Under Settings -> Media you can supply a thumbnail size, a medium size (I use this for vertical images) and a large size (horizontal).  As you upload photos, WordPress will automatically create copies of the image resized to each of your specified dimensions.

Because most people are viewing your site on a widescreen monitor, portrait/vertical photos should be sized to about half of the width of landscape/horizontal photos.  This will help to keep the file sizes smaller, as well as keep each image within the viewable area of everyone’s screen.  For aesthetic reasons, this is why many blogs choose to “pair up” verticals in their posts.

What’s in a name?

A lot actually.  Search engines can’t “see” images, they simply recognize the caption (aka alt text), title, and image name and read those to index the image.  Name your images something descriptive and WordPress will automatically fill in the alt text with your image name.

When deciding on a file name, put yourself in the shoes of the searcher. “Juli and Jon Wedding.jpg” likely won’t produce any search hits. But “Yellow Sunflower Bouquet.jpg” might. Your alt text will also become your default Pinterest text when a reader pins an image from your site, so choose wisely!

A helpful hint

Using a Content Delivery Network (“CDN”) helps to speed up the delivery of images. A CDN makes copies of your images (along with stylesheets, javascript files, and the like) and places them on their servers worldwide. This way, your visitors are served up a file from the location closest to them. Cloudflare is a great choice for starting out with a CDN, as they have a free plan. WordPress’ Jetpack plugin also includes the option to use their Photon service.

In future posts, we’ll cover more advanced WordPress image issues, such as custom fields for image photography credits, media tagging, and the like. What other image tips and tricks do you have to share?

Chime In

TO TOP