Styling WordPress Elements

Here are a couple of ideas from a relative WordPress newbie.

Open up your blog page in a browser and then use the view source menu option. You can then find the class name for the text you want to style. For example, I opened up a browser for a test blog on my PC and found the following HTML in the source code:

<a href="http://buddy/wordpress/?p=40#more-40" class="more-link">Read the rest of this entry &raquo;</a>

The code shows a couple of important things: it shows the styling class name for the text, “Read the rest of this entry »”. The styling class name is “more-link”.

Here is how I styled the “Read the rest of this entry »” message:

I Opened the style.css file for my theme with a basic text editor. The CSS file was in the \wordpress\wp-content\themes\yourtheme directory. The class name of “.more-link” did not exist in my style.css file–so I added it to the end of my CSS file:

.more-link { /*don't forget the period in front of the class name*/
color:red; /*change the message color to red*/
}

This changes the color of the message to red. If you wanted to stylize the link behavior, you could add the Anchor Pseudo-classes to the style.css file, referencing the .more-link class, like this:

a.more-link:link {color: #FF0000}     /* unvisited link */
a.more-link:visited {color: #00FF00}  /* visited link */
a.more-link:active {color: #0000FF}   /* selected link */
a.more-link:hover {color: #FF00FF}   /* mouse over link */

As for the text, I opened the index.php file for my theme. I found this:

<?php the_content('Read the rest of this entry &raquo;'); ?>

I changed it to this:

<?php the_content('More &raquo;'); ?>

For other navigation links, the problem appears to be more difficult. What is really needed is a class name added to the generated link. You might look at
http://trac.wordpress.org/ticket/6109 for an idea of what might be involved. Perhaps someone a lot more familiar with patches and PHP can add some advice here. This is a very interesting problem.

With respect to the “Older Entries” and “Newer Entries” styling, I manually patched the wp-includes/link-template.php file as shown in http://trac.wordpress.org/ticket/6109.

I specified class names as shown below:

line 688 `function next_posts_link($label=’Next Page »’, $max_page=0, $class=’nextpostlink’) {
line 722 function previous_posts_link($label=’« Previous Page’, $class=’previouspostlink’) {`

After saving the changes, the source code for my theme included the following:

<div class="navigation">
			<div class="alignleft"><a href="http://buddy/wordpress/?paged=3" class="nextpostlink">&laquo; Older Entries</a></div>
			<div class="alignright"><a href="http://buddy/wordpress/" class="previouspostlink">Newer Entries &raquo;</a></div>
		</div>

Once the class names had been defined, I could add the classes to my CSS file:

.nextpostlink {
	color:green;
}

.previouspostlink {
	color:maroon;
}

I could also modify the link behaviour by including these lines in the CSS file:

a.nextpostlink:link {color: red}     /* unvisited link */
a.nextpostlink:visited {color: blue}  /* visited link */
a.nextpostlink:hover {color: green}   /* mouse over link */
a.nextpostlink:active {color: maroon}   /* selected link */

a.previouspostlink:link {color: red}     /* unvisited link */
a.previouspostlink:visited {color: blue}  /* visited link */
a.previouspostlink:hover {color: green}   /* mouse over link */
a.previouspostlink:active {color: maroon}   /* selected link */

What this shows is that even if some things in a WordPress theme can’t be styled “out of the box,” the appropriate template files can be modified so as to produce the styling you want (not that I could do this without the experts at WordPress).