business & technology for wedding and lifestyle pros

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

Google Analytics Site Search


Google Analytics is one of the most powerful tools for your website. It’s widely regarded as the industry standard, and data from GA provides a wealth of statistics about your visitors, most notably: the pages visited on your site, referring sources, and interaction with the various sections of your website. We’ve previously talked about Advanced Segments and how to configure them. Today, we are going to enable a little feature that isn’t on by default: Site Search.

If you have a search form on your site, Site Search is for you. Google Analytics Site Search will track your users’ search terms, time on site after searching, number of pages visited after searching, and number of results found. To enable this optional feature, sign into Google Analytics and visit your property. Click on Admin. You will see your Account, Property, and View. Underneath View, click View Settings. Change the Site search Tracking to “On”. Add in your site’s query parameter (fancy jargon for the prefix to your searches). If you are using WordPress, this is normally just “s”. Save and voila – you will begin collecting data on your visitor’s searches!

Google-Analytics-Site-Search

To see your Site Search data in Google Analytics, navigate to: Behavior » Site Search » Overview.

I’ve found Site Search to be helpful in a few ways:

  • The obvious: discover what your users are interested in finding (some of these will surprise you!)
  • The ability to target specific search results pages with coding or ads
  • Determining how users who search convert to a specific activity or goal

So go ahead, turn on Site Search and grab some extra data (because everyone loves data)!

Chime In

First Impressions


With our lives moving at an incredibly fast pace and our attention spans becoming ever more diminished, your website’s first impression is becoming increasingly important. Did you know that the average user forms an opinion about your site in 50 milliseconds? Or that the majority of readers spend less than 15 seconds on a webpage? So, as website owners, our challenge is to make a good first impression, and keep our content sticky.

Website First Impressions

Lettering: KELLY CUMMINGS

How do you make a good first impression with your website?

A website’s first impression for me is all about the layout. The menu bar tells the whole story – it is where I like to see a blog’s main topics. From there, I like to be able to use tags to quickly find my way around to what I’m looking for.
Julianne Smith

I’m a self-professed design and lifestyle blog junkie. The first thing I notice about a site is the layout, design and photography. A blog that makes a great first impression has a simple, pretty layout that is easy to read and pleasing to the eye and showcases great photography. If one or the other is off I’m not likely to return.
Cyd Converse

What do these answers have in common? They both form their feelings about a site at the first moment they see it. If it’s cluttered, difficult to navigate, or not appealing to their eye, they aren’t likely to stick around. They may not have read a word and yet they are ready to leave.

Here are a few things that, as a reader, give me a great first impression:

  • A clean, easy to follow, cohesive design
  • Fast loading of information
  • Quick access to relevant information
  • An immediate clue about the blog’s main focus

And some things that make me click away:

  • Difficult to follow navigation, or a large amount of clicks to get the information I’m looking for
  • Music
  • High-resolution photos that take several seconds to load
  • Distracting elements, such as pop-up windows or flashing ads
What do you think makes people come back?

These are the things that keep me reading when I visit a new blog: clean layout, unique design that says who they are, good grammar, content that is obviously written with a wider audience than one’s family in mind, and posts that aren’t consistently about the banal things in life. The one exception to the banality rule? Those who can write about the mundane and make me laugh. If you’re one of those few genuinely funny people out there you can write about putting the groceries away or retrieving the mail from the mailbox and I’ll still keep reading.
Jenna Cole

Jenna is a reader that truly wants to engage with a blog author. If you are a follower of her blog, this won’t surprise you, as her own blog is personal and she has built a wonderful community with her readers.

Being personal isn’t just for “personal blogs”. If you are in the wedding industry, you no doubt know the name Lara Casey. Lara’s site and social profiles promote her business, but also gives potential clients and industry readers a window into who she is as an individual. She is branding herself as much as she is branding her talent, and people want to connect with her, as well as connect with her work.

A few things that keep me as a reader coming back to a blog:

  • Consistent, informational posts
  • Unique content, especially written with a distinctive point of view
  • Posts that start me thinking—this could be a post about business philosophy or beautiful inspiration photos

What resonates with you when you read a blog for the first time? What makes you return for more?

Chime In

Servers and The Basics of Hosting


Now that you’ve taken the preliminary steps of designing your blog and purchased your domain name(s), it’s time to select a hosting solution.  If you have a website for your business already, you likely already have a web hosting provider and either space on a server or your own server. If you are setting things up for the first time, you will contract with your chosen web hosting provider who will allot you website space on a server and set you up with a FTP (file transfer protocol – this is the way you upload and download files from your server) account.

Servers and Hosting

Photo: © F.Schmidt / Shutterstock
What are the basics of hosting and which type is right for me?

Basics: A server is essentially a large computer that is held in a hosting provider’s data center. Your hosting plan determines how much of the server your account “owns”. There are three main types of hosting services: shared server, virtual private server, and private server.

Shared Server: The most economical option.  Your website is hosted on a server along with multiple other websites.  The hosting provider that you choose will set limits for your account so that you do not overload the server and cause the rest of your server’s websites to go down.  This option is great for those of you just getting started, as the memory and bandwidth that you will be provided is likely sufficient for your needs.  However, if you expect several thousand visitors per day (at peak times), you may experience slowness with shared server hosting and your web host even has the ability to take your site down to steady the server.

Best for: Just getting started; Non-complex sites; Static websites (non-blogs); Sites without a rush of traffic at peak times

Virtual Private Server: Picture a server as a packing box for glassware.  You get the space for one glass and share the box with multiple other glasses.

The server is partitioned off so that you have full control over only your piece.  No other website can touch your area of the server, and vice versa.  Advantage: your own place to play, guaranteed server resources up to your partition’s cap.  Disadvantage: you can’t take advantage of the resources that the other partitions aren’t using like you can with the shared server.

Best for: I personally don’t recommend VPS hosting.  I tried it for a while and was completely unimpressed.  In for a penny in for a pound, I say, and if I’m spending money and getting dedicated resources, I’d rather have…

Private (Dedicated) Server: Your very own home for your website.  With dedicated hosting, you will have full control over your entire server.  There are differences between private server plans, so you should do your homework and speak with potential hosting companies to see where your website fits in with their offerings.  Be sure to know:

  1. Exactly what type of server you will receive and how much horsepower it has
  2. The level of support you receive from the hosting provider
  3. What you will be charged for (bandwidth, number of databases, disc usage, FTP accounts, etc)

Best for: High-traffic websites, those who want lots of control over their site and the resources it consumes.

Which hosting company is right for me?

As I’ve previously mentioned, each of my domains are registered with DreamHost, but my hosting is with LiquidWeb. I have a dedicated server. LiquidWeb is the third hosting provider that I’ve used, and I could not be more pleased with their service. Real, live people pick up the phone, ya’ll! They are incredibly responsive, my move over from my previous hosting provider was painless, and I experience very few issues. No hosting company is perfect, but LiquidWeb was recommended to me by a trusted friend, and I have personally recommended LiquidWeb to other bloggers who have also experienced the same stellar service.

I also know bloggers who use and enjoy Bluehost, though I have no experience with them.

Managed hosting providers

There are several commonly-used managed hosting providers, such as WP Engine and Synthesis. Managed hosting providers typically offer standard pricing plans, with certain levels falling under either shared, VPS, or dedicated server hosting. The benefit of a managed hosting provider is that their servers and architecture are optimized for WordPress. The downside is that some plugins and other functionality are disabled by default. Many plans also place limits on bandwidth transfer, storage space, and the number of WordPress installations you can run on your account. WP Beginner has a great article on managed WordPress hosting, which I highly recommend that you read if you’re thinking of going this route.

For experienced website owners: what type of hosting do you use and what hosting companies do you recommend? Have you had good experiences with Virtual Private Servers? If you have a high traffic site, when did you switch to a dedicated server, or, have you been able to stick with shared hosting and save money?

Coming up in this series: Setting Up Your Server, Installing WordPress

This page contains affiliate links, which means I will earn a commission if you make a purchase through those links. Please note, these are all companies, products and/or services I have used and trust and would recommend even without that commission. Thanks for helping to support Edit and Post!

Chime In

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

TO TOP