Formatting Posts and Pages in WordPress

Adding formatting to your posts and pages is easy with the WordPress editor, though out of the box you may not realize all of the options you have.

Activate the Kitchen Sink

Take a look at the toolbar when you are in Visual Mode.  If you only see one line of icons, click on the toolbar toggle so that you can see all of your options.

kitchensink1

Note that on the above example I have some extra icons that you most likely don’t see.  These are plugins that I’ve installed that add some extra functionality.

kitchensink2

Once you have clicked on the toggle you should see something like this:

kitchensink3

Formatting WordPress Posts Using Styles

The select box that currently says “Paragraph” has some styles in it that you should be using in your posts.  Most important are the headings, especially Heading 2 and Heading 3.

Headings help organize your posts and give the reader’s eye something to focus on when they are skimming your site.  Heading are also given weight in SEO, which is why it is a good idea to include your keyword(s) in at least one of the headings.

Why use Heading 2 and note Heading 1?  If your theme is set up correctly, Heading 1 is already used by the page name or perhaps your logo.  There should really only be one Heading 1 on a page, so you will want to use Heading 2 instead.

Other styles generally included out of the box are paragraph – which is the style for regular text and pre.  Pre is used to write about code without actually executing that code, but retaining the code layout.  For example, this snippet of a stylesheet retains its formatting using pre:

<style>
ol,ul{list-style:outside; margin-left: 1.5%; margin-bottom: 1.5em;}
ol{list-style-type:decimal;}
</style>

And in some themes pre may also have some specific formatting associated with it.

Adding Custom Styles

Adding custom styles isn’t difficult, but it does require that you are comfortable editing your functions.php file and know how to download and upload individual theme files.  The following assumes you are using a child theme.  Open the functions.php file of the child theme and copy/paste in this code:

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');

This will create a new select box in the editor just waiting for your custom styles.

Next, to the same functions.php file you will register your custom styles.

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
	// Define the style_formats array
	$style_formats = array(  
		// Each array child is a format with it's own settings
		array(  
			'title' => 'Button - Red',  
			'block' => 'div',  
			'classes' => 'button red',
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'Button - Green',  
			'block' => 'div',  
			'classes' => 'button green',
			'wrapper' => true,
		),
		array(  
			'title' => 'Button - Yellow',  
			'block' => 'div',  
			'classes' => 'button yellow',
			'wrapper' => true,
		),
	);  
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

This code adds the following to the edit bar:

2015-03-30_14-35-52

When I select some text and click on the Button-Red item this happens:

This is a Red Button

What happened?  Well, I haven’t actually added a style for a red button to my style sheet yet.

Add the Styles to the Style Sheet

In the stylesheet.css file I’ve added:

.button {
 -webkit-border-radius: 28;
 -moz-border-radius: 28;
 border-radius: 28px;
 font-family: Arial;
 color: #ffffff;
 font-size: 20px;
 padding: 10px 20px 10px 20px;
 text-decoration: none;
}
.red{
 background: #faa0a0;
 background-image: -webkit-linear-gradient(top, #faa0a0, #f00);
 background-image: -moz-linear-gradient(top, #faa0a0, #f00);
 background-image: -ms-linear-gradient(top, #faa0a0, #f00);
 background-image: -o-linear-gradient(top, #faa0a0, #f00);
 background-image: linear-gradient(to bottom, #faa0a0, #f00);
}
.red:hover{
 background: #ff0000;
 background-image: -webkit-linear-gradient(top, #ff0000, #faa0a0);
 background-image: -moz-linear-gradient(top, #ff0000, #faa0a0);
 background-image: -ms-linear-gradient(top, #ff0000, #faa0a0);
 background-image: -o-linear-gradient(top, #ff0000, #faa0a0);
 background-image: linear-gradient(to bottom, #ff0000, #faa0a0);
 text-decoration: none;
}

Now, we should see the red button:

This is a Red Button

 

 

 

 

Follow me

Submit a Comment