How to Make the WordPress Editor Look Like Your Web Site

Why doesn’t the font match?

I can’t tell you how many times I’ve had clients ask that question when using the WordPress Visual Editor for the first time. They simply can’t understand why they have to enter text in the antiquated “Georgia” font and why it looks different when it actually appears on their site. Answering their question requires a lengthy explanation that delves into the principles of a content management system and why it’s important to separate the content of a web site from it’s style… blah, blah, blah. Then I get the deer in the headlights look and the answer gets simplified to the time-tested response of a frustrated parent to a petulant child: “Because I said so.”

Yeah, but why doesn’t the font match?

WordPress has for years made the decision that the default font for the Tiny MCE Visual Editor would be Georgia. I have no explanation why. It’s not exactly a modern font. After some digging, I found the font for the visual editor is controlled by a css file buried deep in the recesses of WordPress. To be precise: wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css. On line two of that file, you’ll find the font settings, which default to Georgia, for whatever reason.

Getting Georgia out of your Visual Editor

The key to liberating your visual editor from the travesty of Georgia is to create a file that defines the styling that’s used. This file is called editor-style.css and it’s not part of the default WordPress installation. It’s theme-based. But just two quick steps will allow you to be rid of this problem once and for all.

Step One: Add Your Own editor-style.css File

What I usually do is create a file in my child theme folder called editor-style.css. Then I copy and paste the typography section of the existing style.css file in my theme into that file and save it. I’ll grab the styling for paragraphs, headings, blockquotes, buttons, etc… anything that would show up in the content area.

Step Two: Tell WordPress to look for the editor-style.css file

Just adding the editor-style.css file to your theme folder will not make the change on its own. You need to add the following code to your functions.php file to tell WordPress to look for changes you just added.

[sourcecode language=”php”]
// Styling the visual editor with editor-style.css to match the theme style.

Save your changes and reload your editor and you’re done! In two easy steps, your Visual Editor should now be pulling in the styling form the front end of your web site.

Nifty, huh? And now truly WYSIWIG.

The best part? No more having to explain why the font doesn’t look the same!

How to Add Easy Social Icons in the WordPress Navigation Menu

Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge. Here’s a very simple way to add clickable Facebook, Twitter, Linked-In and other social icons to the WordPress navigation menu using just your images and CSS.

Important Note: I’ve found that if your theme is already using background images on the menu, you might have issues with the code below.

Another Important Note: The many variations of themes and how they style menus means that you’ll need to take the concepts and CSS in this tutorial and implement them on your site. This will probably take a basic to intermediate understanding of CSS. As always, I’m happy to work with you to implement this concept on your site.

If your icons appear but are not clickable… it’s a theme issue. It can probably be solved, but it’s beyond the scope of this tutorial. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to and see if that works for you.)

If the icon disappears when you mouseover it… again, it’s a theme issue. Likely your theme is already using a background image for the menu. In the sample code below, try using “.menu-twitter a” instead. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to and see if that works for you.)

Edit 10/31/2012
There is a new plugin in the WordPress repository that has much of the functionality that I describe below. Have a look here at Nav Menu Images.

Here’s the Video:

Step One: Grab Your Icons

The first thing you’ll need to do is select the social icons you want to use. Iconfinder is my source for icons. Hint: find an icon you like, then click collections to discover coordinating icons for other social sites. Once you have your icons, save them in your theme’s images folder.

Step Two: Add a Custom Link to your Menu

Edit your main menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu.

Step Three: Turn on CSS Classes for Menu Items

At the top right, click the Screen Options tab, and check on CSS Classes. This will enable a new field in the menu options called CSS Classes in which you can put a custom CSS class on each particular menu item.

Step Four: Assign a Custom Class to the Twitter Menu Item

Open the menu item for the Twitter link you just created, and add a custom class to that item. For this tutorial, I’ve called it menu-twitter. This will allow us to address that menu item directly in the CSS.

Note: You don’t have to assign a custom class. Each menu item in WordPress already has its own specific ID. But doing it this way allows the code you create to be portable from site to site. Read more on portability below.

Step Five: Adding the Icon to the Menu

At this point, you’ll have a new item on your menu with the text Twitter that is pointing to your Twitter account. What we’ll do now is remove the text and replace it with an icon using CSS.

Use the following code:

[sourcecode language=”css”]
.menu-twitter {
text-indent: -9999px;
background-image: url(images/twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;

Here’s an explanation of the code:

  • The .menu-twitter class is what we added to the custom menu in step four.
  • Text-indent pushes the menu label off the screen to the left 9999 pixels so it doesn’t display over the top of the Twitter icon.
  • Background-Image puts the Twitter icon as the background of the menu item, which is still clickable.
  • Background-Repeat ensures that the icon only displays once.
  • Margin-left puts 100 pixels of space between the icon and the rest of the menu. You’ll probably only do this for the first social icon.
  • Width restricts the width of the menu item to 50px, which is plenty to display the icon and leave some space for the next one.

Here are the Results

Just repeat this process for each icon you want to add. Your theme might require a bit of tweaking to position the icon up and down, but the above should get you most of the way there. Enjoy!

Making it Portable

The real value of this code is bringing it from site to site with very little effort. Put all your social icons in any web accessible location (like then change the link in the css for the icon to this new location as below:

[sourcecode language=”css”]background-image: url( !important;[/sourcecode]

The result… You can now paste this code unchanged into the css of every site where you want social icons. Then all you have to do is add the custom menu items to make the icons live.

– – – – – – UPDATE 5/31/2012 – – – – – –

Opening Links in a New Window

To cause your menu icon links to open in a new tab or Window, just click on Screen Options and check on the Link Target option.

Doing this will add a new box to the menu item that will allow you to open the link in a new tab or window. See below:

Easy Random Background Images for WordPress

Here’s a fantastic little solution I found from Dan Benjamin that allows you to drop a simple php script in a folder of images to display them at random. This code is really light and works perfectly in all my tests.

I’m using it to randomize background images on the content module of an iThemes Builder site. You can also use it to display a random image from a folder in a post as well. Yes you can do this with something like NextGen Gallery, but a simple solution like this is better if you don’t need all the features of a full gallery plugin.

Here’s all you have to do…

  1. Save the code below or copy and paste it into your text editor of choice.
  2. Save it as rotate.php (or whatever you want to call it) into a folder of images on  your web site.
  3. Add the script like you would add an image.  <img src=”path-to-your-images/rotate.php”> or for a background in css, add this to the element background-image: url(path-to-your-images/rotate.php);

Here’s an Example:

The picture below is randomly generated from the images in an upload directory of this site. Hit refresh to see it randomize.

Now Here’s the Code…

Note: I’ve removed all the commenting to make the code shorter. If you want to see the comments, view Dan Benjamin’s original article here.

[sourcecode language=”php”]<?php

$folder = ‘.’;

$extList = array();
$extList[‘gif’] = ‘image/gif’;
$extList[‘jpg’] = ‘image/jpeg’;
$extList[‘jpeg’] = ‘image/jpeg’;
$extList[‘png’] = ‘image/png’;

$img = null;

if (substr($folder,-1) != ‘/’) {
$folder = $folder.’/’;

if (isset($_GET[‘img’])) {
$imageInfo = pathinfo($_GET[‘img’]);
if (
isset( $extList[ strtolower( $imageInfo[‘extension’] ) ] ) &&
file_exists( $folder.$imageInfo[‘basename’] )
) {
$img = $folder.$imageInfo[‘basename’];
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info[‘extension’] ) ] )
) {
$fileList[] = $file;

if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];

if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = ‘Content-type: ‘.$extList[ $imageInfo[‘extension’] ];
header ($contentType);
} else {
if ( function_exists(‘imagecreate’) ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);


Supercharge WordPress with LoopBuddy + Custom Post Types

This is my first shot at a video tutorial. I’m brand new using ScreenFlow and the mic is just the one on my MacBook Pro. Hopefully, I’ll get better over time. Also, if you benefited from the video and do not own LoopBuddy or a WPMU membership, please use my affiliate links below if you plan to purchase. Thanks!

Resources used in the video:

Very Important Note:

When you create your Custom Post Type, be sure that you do not name the slug of your CPT the same as the slug of the page that it will be displayed on with LoopBuddy. If you do, all manner of badness will occur, including a potential breach of the space-time continuum. So, don’t cross the streams, Venkman.

Here is the CSS that was pasted:

[sourcecode language=”css”]
/*Book Grid */

.books-grid {
width: 125px;
height: 250px;
float: left !important;
display: inline !important;
padding-right: 15px;
text-align: center;

.hentry {
border-bottom: 0px !important;
margin-bottom: 0em !important;

.books-grid-image {
margin-left: 5px;
.books-grid-title {
line-height: 1;
font-size: .8em;
font-style: normal;
width: 125px;

/*Books Detail Page*/
.books-detail-title {
color: #A87F10;
font-size: 1.25em;
font-weight: bold;
line-height: 1.3em;
text-align: left;
.books-detail-author {
padding: 15px 0px;
.books-detail-image img {
margin: 0px 10px 15px 0px !important;
float: left;
.books-detail-return {
text-align: center;
background-color: #DAD8D9;
padding: 5px;
display: block;
margin: 75px auto;
width: 50%;
border: 1px #888 solid;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;

Grid Items Not Gridding?

If your posts are not displaying in a grid, try putting the float on the .hentry rather than the .books-grid. I’ll betcha that will work.

Using Custom Post Type UI instead of CustomPress

Custom Post Type UI will not allow you to create custom fields by itself, which makes doing what this video describes impossible. However, a nifty little plugin called More Fields will allow you to add custom fields to Custom Post Types and gives you the kind of control over what they look like (single line text, textarea, etc) that CustomPress does. One day I’ll make a video demonstrating this process. But it’s pretty straight forward:

  1. Create your custom post type using Custom Post Type UI
  2. Add custom fields to your custom post type using More Fields
  3. Put the custom field key you created in step 2 in LoopBuddy’s custom fields item.

Website Portfolio Gallery Screenshot Shortcode for WordPress

The basis for this code was presented by Benjamin Bradley in a Member’s Only Chat. It will allow you to create quick and simple screenshots using‘s screenshot script to add a screenshot to a single page or make a automatically updating portfolio. I tweaked the code a bit from what was presented in class to allow for hyperlinking, and the display of title and description.

First, the Functions.php Code

Add this to your functions.php before the last ?>.

[sourcecode language=”css”]
//Screenshot Snap Shortcode

function snap_my_web($atts, $content = null) {
"snap" => ‘’,
"url" => ‘’,
"link" => ‘’,
"w" => ‘400’,
"h" => ‘300’,
"title" => ‘Site Title’,
"descr" => ‘Site Descrition ‘
), $atts));
$img = ‘<div class="snap"><a href="’ . $link. ‘" target="_blank" rel="nofollow">
<img src="’ . $snap . ” . urlencode($url) . ‘?w=’ . $w . ‘&h=’ . $h . ‘"
alt="’ . $title . ‘" / class="snap-image"</a>
<div class="snap-title">’ . $title . ‘</div>
<div class="snap-descr">’ . $descr . ‘ </div></div>’;
return $img;
add_shortcode(‘snap’, ‘snap_my_web’);

Now, let’s walk through the things you need to edit.

  • Do not edit the “snap” URL. This is the location of the WordPress script that will be doing the work for us.
  • “url” is the site for which you want to create a thumbnail. NOTE: if you find the image generated is something screwy, try putting index.php at the end… like Redirects really mess with the screen capture code, and the index.php seems to help.
  • “link” is the web site where you want the screenshot to link to when clicked (different from the URL in case you want a screenshot of a specific URL or for affiliate sites that do forwarding).
  • “rel=nofollow” is code that will keep Google’s Penguin update from dinging you if you use the code for affiliate links.
  • “w” is the width of the thumbnail you want to create.
  • “h” is, you guessed it,  the height of the thumbnail you want to create.
  • “title” is the title you want to display under the site thumbnail… it also gets put in the image’s alt tag.
  • “descr” is a short description for the site that will appear under the title.

The Shortcode

The code above creates a shortcode called “snap.” Here’s an example of how to use it…

[snap url="" link="" alt="WordPress" w="400" h="300" title="WordPress" descr='WordPress is Awesome!']


The shortcode above automatically creates the image below:
[snap3 url=”” alt=”WordPress” w=”400″ h=”300″ title=”WordPress” descr=’WordPress is Awesome!’]

Now try editing a couple of the variables in the shortcode…

[snap url="" link="" alt="WordPress" w="200" h="150" title="WordPress" descr="WordPress is Awesome!"]

Notice the changes in height and width above easily resize your screenshot to half the previous size very easily:[snap3 url=”” alt=”WordPress” w=”200″ h=”150″ title=”WordPress” descr=”WordPress is Awesome!”]

Styling the Output

You may notice in the code you entered in the functions.php that there are classes placed on the image, title, description and on the entire entity. I added those to give you maximum control on what’s being displayed. Below are the styles I use in my styles.css for the snap images. You can, of course, edit these to your preferences.

[sourcecode language=”css”]
.snap {
text-align: center;
.snap-image {
border: 1px solid black;

.snap-title {
font-size: 1.1em;
font-weight: bold;

.snap-descr {
font-size: .9em;
font-style: italic;

To get the portfolio/gallery effect like I have on my web design and affiliate pages, just add a left float and 25px padding to the bottom and right of the snap class.

Making a Sliding Search Box in WordPress

I’ve had a few people ask for the code to create a sliding search box like the one in the header of this site. It’s quite simple, really, and all done with CSS. The code to accomplish this is below. For those of you using iThemes Builder, which I consider to be the best WordPress theme available, it should work as is. The code should require only minimal modification (if any) for other themes. Just double check the CSS classes on each element to be sure they match what’s below.

In the sample below, the search box expands to the left due to the text-align on the widget area it’s in. That’s how I like it on my site. I just implemented it on a new site in development that has the text-align in the widget area set to center, so the search box expands in both directions at once. It’s a really nice effect. I’ll post the link once that site goes live.

The only thing you’ll need in addition to the code below is the image file for the magnifying class, which should be put in the images folder of your child theme.

← Here is the one I’m using (right click and save-as), or just use your own that’s roughly 20×20 pixels.

This code styles the plain unclicked search box:

[sourcecode language=”css”].widget_search .search-text-box {
-moz-transition: 400ms width ease;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width;
-webkit-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width;
-o-transition-timing-function: ease;
background: url("images/search.png") no-repeat scroll 5px 6px #FFFFFF;
font-size: 0.65em;
height: 30px;
padding: 0 10px 0 30px !important;
width: 55px;
background-color: #FFFFFF;
border: 1px solid #cccccc;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;

This code styles the search box when it’s been clicked:

[sourcecode language=”css”].widget_search .search-text-box:focus {
border: 1px solid #777777;
box-shadow: 0 0 4px 2px #DEDEDE;
font-size: 0.8em;
width: 150px;