business & technology for wedding and lifestyle pros
All Posts in Category: WordPress

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

Basics of a WordPress Theme


Now that you have installed WordPress and know how to install WordPress plugins, it’s time to learn the basics of a WordPress theme! Themes hold the files that tell the browser what to display and how it should look.  If you remember from this post, PHP gets turned into HTML and that tells the browser what to display.  In coding language PHP = “get”.  CSS tells the browser how the html you have coded should look.

Basics of WordPress Theme

Photo: © Studio Firma / Stocksy

WordPress comes pre-installed with three themes, including the latest default theme, Twenty Fifteen.  Let’s take a look at the files in the Twenty Fifteen theme and see what they do.  Don’t worry if all of this is very confusing now!

PHP files control what is displayed

index.php – Displays your main blog page.  Includes PHP calls for all of the files that control how your main blog page is displayed.  Includes code for your main blog pagination.

header.php – The header file essentially sets up the page and includes PHP calls to “get” the CSS files for the theme, the blog information and title from your WordPress options, and your header image.  It also calls WordPress itself from your server and includes the opening html for the body of your page.  There can be much more included in here (and we’ll get to that when we talk about more complex coding).

footer.php – “Closes” your page in the browser.  Calls the WordPress footer.  Also typically includes any credits, copyright info, etc that you want to display.

single.php – Displays a single post.  Includes PHP calls for all of the other page elements that you display on a single post type. The post type’s content is called in content-[POST-TYPE].php.

content.php – Displays the content of a WordPress post with the “standard” post format, including its title and body.  The author bio is called in author-bio.php.

author-bio.php – Displays information about the post’s author.  Pulls from the WordPress user information fields.

content-link.php – Displays the content of a WordPress post with a “link” post format, including its title and body.

content-none.php – This file is called when a user performs an action where no results are found, including searches with no results.

page.php – Displays the framework for a WordPress page and includes PHP calls for all of the other page elements that you want to display on that WordPress page.  This file usually looks a lot like single.php, but typically does not include a call to the comments template.  The page content is called in content-page.php.

content-page.php – Displays the content of a WordPress page, including its title and body.

comments.php – Displays and formats the comments for a post.  This file is typically only called from single.php.

archive.php – Displays category, tag, taxonomy, and date archives.  Includes PHP calls for all of the other page elements that you display on your archive page.

404.php – If someone is searching for something on your site and goes to a permalink that doesn’t exist, they will see this 404 page.  Includes PHP calls for all of the other page elements that you display on your 404 page.

functions.php – A super-important file that you don’t want to edit until you know what you’re doing.  functions.php basically performs like a plugin, and any PHP code in this file will be executed when you call the function from your other template files.

image.php – Displays a single image attachment and includes PHP calls for all of the other page elements that you display on a single image.

search.php – Displays the framework for search results and includes PHP calls for all of the other page elements that you want to display on the search results.  Typically looks quite a bit like archive.php.  The search results content is called in content-search.php.

content-search.php – Displays the content of a WordPress post when it appears in search results, including its title and body.

sidebar.php – Displays the sidebar widgets that you have defined; if no widgets are defined, displays a default sidebar.

back-compat.php – Contains functions to help with the theme running on WordPress versions before 4.1.

customizer.php – Contains the functionality that allows for customizations to the Twenty Fifteen theme (under Appearance » Customize).

custom-header.php – Contains the functionality that allows for a custom header in the Twenty Fifteen theme (under Appearance » Header).

CSS files control how things look

style.css – a theme’s stylesheet is where the CSS for a theme is held.  Themes can have one or many stylesheets.  CSS is pretty complicated, so for right now know that each little section of CSS is called a selector, and selectors control how whatever is inside them is displayed.

rtl.css – If you are publishing in a language that reads right to left, this stylesheet will be used.

English, please?

Let’s look at an example and maybe this will start to make more sense.  Remember single.php?  It’s the file that displays your single post page.  We’ll use a common single.php format, with the content on the left and sidebar on the right.

single.php is going to start by doing a PHP call for header.php. Remember, the header.php has already called in all of your stylesheets and WordPress itself.

<?php get_header(); ?>

Each section of your page is styled using CSS selectors inside either <div> or <span> tags.  Think of a <div> tag as a section of your page and a <span> tag as a portion of a section.  Div tags (“divs”) can either be IDs (noted with a #) or classes (noted with a .).  IDs are meant to be used once on a page, while classes are intended for items to used multiple times. Divs are opened with <div> and closed with </div>.  The header.php file probably had several divs to display your header image, menu bar, etc.  In single.php the main content area of your page is also enclosed in a div tag.  Let’s call it “primary”.  When you include a div or span tag in your php file, WordPress will look in your stylesheet for the div or span tag name and display the results using the CSS selectors assigned to that tag.  Because we are calling a single post, the class of this primary div will be “content-area”.  We’ll also tell the browser that this is the main content area.

<div id="primary" class="content-area">
     <main id="main" class="site-main" role="main">

The template is then going to ask the WordPress database for the data from the post itself. This portion is referred to as “starting the loop”.

<?php while (have_posts()) : the_post(); ?>

Once it knows what the post is, the theme calls the appropriate content template file for the post’s format.

<?php get_template_part( 'content', get_post_format() ); ?>

If the post has no post format (let’s say it’s just a standard blog post), it will look to the file content.php. content.php lets the browser know that this is an article, with both header and content sections.  The WordPress function the_title(); calls the post title and the WordPress function the_content(); calls the post content.  To simplify:

<article>
     <header class="entry-header">
          <?php the_title(); ?>
     </header>

     <div class="entry-content">
          <?php the_content(); ?>
     </div>
</article>

That’s pretty much it for content.php. Once content.php has finished its display, we return to single.php.  single.php would next typically include a call to your comments.php file.

<?php comments_template(); ?>

Now we’ve “looped” through a complete post, so we’ll tell WordPress we are done.

<?php endwhile; ?>
</main>
</div><!-- closes .content-area #primary -->

Lastly, we’ll call the sidebar and the footer.  Remember, the footer closes the page, so after the footer is called, single.php has done its job.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

This is a lot to wrap your arms around, I know!  But I hope it’s starting to make some sense, because we’re going to be talking a lot more about themes as we start to edit each of the theme files, make new theme files, and add in awesome new functionality!

Any questions so far?

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

Installing WordPress


For the vast majority of you, installing WordPress will be an incredibly simple exercise.  Most hosting companies offer a one-click install package, such as Fantastico or Softaculus.  So mosey on along to your hosting provider’s interface and tell it to install WordPress already!  If your hosting provider does not have a one-click install, you will need to download the latest WordPress package and follow these instructions for installation.

How to Install WordPress

As you might remember from this post, WordPress needs a MySQL database to run.  You will need to define a database name for your MySQL database, a table prefix (usually wp_), a URL to install WordPress to, and a MySQL database username and password that WordPress will use to connect. A one-click installer may select the database username and password for you, so don’t worry if this isn’t one of the options available.  You may also get the option of selecting an admin username and password.  If so, take advantage, as “admin” is the most common username tried by hackers.

So, for example, if you are want people to visit your blog at www.mycookingsite.com/blog you might choose:

Database name = mycookingblog
Database prefix = wp_
URL to install WordPress = www.mycookingsite.com/blog
DB username (if asked) = your FTP username
DB password (if asked) = 0987fed654cba321
Admin Username (if given the option to select one) = johndoe
Admin Password (if given the option to select one) = 123abc456def7890

Take careful note of your username and password.  I recommend choosing a 16-character randomly generated password (something more secure than the one above, obviously!).  The database username and password are stored in a WordPress file called wp-config.php that will be automatically created for you by your installer.  Any time you change your password (which you should do relatively often, for security purposes), you will want to update wp-config.php.

If you are using a one-click installer, you will receive an email from your hosting provider once WordPress is successfully installed on your server.  Go ahead and go to WordPress and log in.

The login location for My Cooking Site would be: www.mycookingsite.com/blog/wp-admin

Username = admin OR your johndoe
Password = given in your installation email OR 123abc456def7890

Welcome to WordPress!

There are a few things that you will want to do immediately.

Delete the “admin” user. If your installer did not give you the option of selecting a custom admin user, you’ll want to:

  1. Navigate to Users » Add User.  Create a new user for yourself.  Make sure that author name is the one that you want to be visible inside WordPress.  Give that new user the role of Administrator.  Make sure that you choose a password that is secure and different from your database password.  Again, I recommend a 16-character randomly generated password.
  2. Log out of admin and in with your new username.
  3. Navigate to Users » Add User.  Delete the admin user.  Hackers target blogs that are easy to get into, and the first username that they will try is ‘admin’.  Make yourself less susceptible by deleting the user.

Adjust your basic settings.

  1. Navigate to Settings » General.  Update all of the fields.  Be sure that the “Anyone can register” box is unchecked.
  2. Navigate to Settings » Reading.  Select the box that says: “Discourage search engines from indexing this site”.  We’ll uncheck this box once your blog is styled and ready for the world to see!
  3. Navigate to Settings » Permalinks.  Choose either “Post Name”, “Day and Name” or “Month and Name”.  Leaving the default is bad for SEO (search engine optimization purposes).  A post URL of www.mycookingsite.com/blog/?p=123 means nothing to Google; a post URL of www.mycookingsite.com/blog/2010/01/brownie-recipe is much more descriptive!

Remove WordPress default content.

  1. Navigate to Comments and delete the initial comment that WordPress creates.
  2. Navigate to Posts and delete the “Hello world!” post.
  3. Navigate to Pages and delete “Sample Page”.
  4. Navigate to Plugins and delete the “Hello Dolly” plugin (unless you really love the song Hello Dolly!).

Voila – you have WordPress!  The next post in this series will be all about plugins!

Chime In

TO TOP