business & technology for wedding and lifestyle pros

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

What Makes You You?


We all work or blog in industries that require a unique perspective in order to succeed. We don’t produce commodity products. Instead, we work with clients who want a fresh and informed opinion or idea.

Due to the speed of information movement in today’s society and the low barriers to entry in many industries, competition is increasing at exponential rates.  If you create a product, that product will be copied.  If you have a wonderful blog that enjoys success, it will inspire others to blog and connect in that circle.  If you are a graphic designer, individuals with access to the same tools and technology will use your ideas.  What are you putting out there to make sure people choose you?

What makes you You?

There’s an economic principle called competitive advantage, which says that firms that succeed have some form of advantage over their competition—an ability to add more value, therefore bringing in and retaining more customers (or more readers, if you are blogging).  One of the keys to success in business is to find your competitive advantage early and exploit it.

What is your competitive advantage?

You may have a faster product assembly or access to better materials.  Or perhaps it’s more intangible than that – relationships that you have cultivated or a creative spin on an idea that you’re able to take to market with great speed.

What is your competitive advantage?  How are you exploiting it for your business?  Can it be replicated?

Chime In

Claiming Your Site In Google Webmaster Tools


Whether you have a blog or a website, you definitely want to tell Google that it’s yours!  How do you do that?  Google Webmaster Tools.

Now that you know how to FTP to your site, it will take you about five minutes to claim your site with Google Webmaster Tools.  The benefits are simple but helpful.  You can easily see:

  • The top Google searches that led people to you
  • A complete list of external links
  • All broken links that Google finds as it crawls
  • The keywords that Google views as significant

In addition, Google will notify you on the Webmaster Tools dashboard of any errors that they have found while they were attempting to access your site.

To claim your site:

  1. Visit Google Webmaster Tools and sign in or register with your Google account.
  2. Click “Add a Site”
  3. Input your website and hit continue, you will be taken to the “Verify Ownership” screen.
  4. Download the provided HTML verification file.
  5. Log into your server via FTP (I use CoreFTP).
  6. Navigate your left window to where your file is downloaded, and your right window to the root of your domain.  Select the file on the left, and click the right arrow to copy it to your server.

Voila!  Hit the “Verify” button and your domain is now “yours” in Google’s eyes.  In a few days you should be able to log in and see all of the wonderful information above!  Easy peasy, right?

Chime In

What The Bachelor Teaches Us About Business


Let’s face it, a lot of us are fans of horrible reality TV, including The Bachelor.  But we if dive in a little closer, we can see that we can actually learn something from the “journey”…

Business-Lessons-from-The-Bachelor

Photo: © ABC

Lesson 1: Not everyone is your soul mate

The Bachelor has 25 amazing women to choose from. Of course, his connection will be stronger with some than with others.

So how does this translate?

  • Not every client is your client.
  • Not every potential sponsor is right for you.
  • Not every guest blogger fits your aesthetic.
  • Not every blog/website/magazine/etc is a good fit for your advertising needs.

It took me a long time to come to terms with this. It’s hard to feel comfortable with saying no! But in the long run, it’s in your best interest to know your business or your blog well enough to make an informed decision about who you should work with and where best to spend your time and money.

Lesson 2: The popular choice isn’t always the right choice

Remember Bachelor Jake? Polls showed that most viewers wanted him to choose Tenley, but he followed his heart instead and proposed to Vienna.

There will inevitably be a time where you have to choose a path for your business. Perhaps it’s a price increase, a geographic move, or a new product you want to introduce. Your decisions won’t always be popular among the masses, and that’s OK. If you have evaluated and determined your course of action – stick to your gut and believe in yourself, because what’s right in everyone else’s eyes isn’t always the right choice for you.

Lesson 3: Sometimes you just have to let go

Megan left Chris’s season of The Bachelor when she knew the “spark” wasn’t there.

One of the most difficult problems faced in business is when to let go – of an idea, of an employee, of a product line, etc. There is no right answer. It’s of course different in each situation, but the key is learning to recognize when it’s time to cut the cord, and when you make the decision, confront the problem directly, make an action plan, and follow through.

Lesson 4: First impressions are important

On episode 1 of Ben’s season of The Bachelor, the all-important initial first-impression rose went to Lindzi, who was also one of the final two ladies.

We all know the old saying “you never get a second chance to make a first impression”. It’s cliche, but it’s true. Most first impressions are now made online, when someone is researching service providers or reading past reviews of products. Potential customers or clients may find your Twitter feed, personal blog, Facebook page, and of course your website.

  • How do you present yourself online?
  • How does your website/blog reflect on your business?
  • Is the branding consistent with your intended message?
  • Is what they see representative of what they get?

Lesson 5: It’s OK to admit you were wrong

Even if you aren’t a fan of The Bachelor, you may remember the absolutely wild After the Final Rose where Jason broke up with the winner, Melissa, only to ask Molly to date him again.  Jason and Molly have now been married for 5 years and have a daughter, while Melissa married a former boyfriend and has two children.

It’s inevitable that we will all make bad decisions.  Handling success is easy, but handling failure and accepting our bad outcomes is so much more important, in life and in business.  It’s OK to make bad calls, to admit you were wrong, and to try, try again.

Of course, there are many other life lessons we can learn from The Bachelor, most of which are quite obvious to non-reality-TV contestants!  What have you learned from watching The Bachelor?

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

TO TOP