From the Blogabout me

Adding a CSS Class to WordPress Editor

The Reason

I like making it as user-friendly for my clients as possible.  WordPress does many, many things great, but some of the styling concepts lack just a little.  In this situation, I figure it is better just to create a simple hack to your WordPress theme, and it doesn’t matter if you are the client or the developer trying to help your client.


Believe it or not, it is just a few steps and you will be up and running before you know it.  Just follow these steps in the order I explain them, and you should be ready.

  1. Install the TinyMCE plugin
  2. Create a stylesheet in your theme directory, and name it anything you want.  I’ll call mine “new-styles.css” for sanity sake
  3. Inside your new CSS file, add a new class, doing what you want differently, maybe a different color or size

    a.External-Link { font-size: 2.2em; color: #FC0; }
  4. Now, open your theme functions.php file, and at the bottom add the following
     function addLinkClasses( $wp ) {
     $wp .= ',' . get_bloginfo('stylesheet_directory') . '/new-styles.css';
     return $wp;
     }if ( function_exists( 'add_filter' ) ) {
     add_filter( 'mce_css', 'addLinkClasses' );

Yep, you are done.

Easy Random CSS Background Tip

Some times you want/need a background image to make the user experience fresh, but not too crazy.  What about a simple background change? I wish it was really simple, and I could just upload some images and not have to do anything else… No plugins, not much programming.. Guess what?  After I wrote my own script to do this very thing, I happened to come across a smarter script, so let’s get started.

Let’s make this super simple ————–

The Randomization:

  1. Download rotator.txt from A List Apart, rename it rotator.php.
  2. Unload your images for the randomization in the same directory as rotator.php.
  3. Upload all the files via FTP.


#rotator { background: url(images/rotator.php) no-repeat center top; } 



For an example, I am using this idea on the homepage of this site.