WordPress SEO Optimization Techniques
Change that awful default “read more” link to something more appealing
There is absolutely no doubt in my mind, that the text which is shown for the default "read more" link in most standard WordPress themes is pretty awful looking, and it is usually set to display "Read the rest of this entry »" or "(more…)" which totally depends if your WordPress theme was based on the default or classic theme.The main issue is that the default "read more" text that is displayed, isn't very appealing, actually pretty awful, and adds no value from an SEO standpoint. Furthermore, it’s usually displayed after the ending of a paragraph without including a line break and without any CSS styling formatting.
Next, we are going to make some modifications to your WordPress theme to change that look!
The three tasks which we will need to do are as follows:
1. Changing the text to display something more meaningful that has some SEO value for the search engines.
2. Modify the more link, so it will be displayed on a line of its own
3. Use CSS to format the read more presentation.The first task that you'll need to do is, open and modify the index.php file inside your theme’s folder and locate the line of code that controls the more link. The code that you will need to locate, will most likely be one of these two:
<?php the_content(__(’(more…)’)); ?>
Or
<?php the_content(’Read the rest of this entry »’); ?>
If your theme doesn't contain either of those lines of code, you will need to search for something which starts with <?php the_content( and is immediately followed by a closing ); ?>
Once you have located that line, you will need to replace it with the following line of code:
<?php the_content(’Continue reading ‘ . the_title(”,”,FALSE) . ‘ »’); ?>
Next, you need to save the index.php file and then close it. Now, we are now finished making the PHP changes and it is time to start styling it.
You will need to open your CSS stylesheet (which will most likely be named style.css in most instances) and append the following lines of code at the end:
a.more-link {
display: block;
margin: 15px 0; padding: 5px;
background-color: #e5e0cd;
border: #a59f89 1px solid;
color: #000000;
text-decoration: none;
}
a.more-link:hover {
background-color: #efebda;
border-color: #b2afa6;
}The lines of code that is between the a.more-link { and the closing } controls the look of the read more link. The two lines contained between the a.more-link:hover { and its closing } controls the hover (aka rollover) effect. You are also able to change the current values of the background-color, border and color properties with any color of your choice. When you specify a color to use, you have an option of either specifying it using its name or its hex value. Now, you will need to find a list of valid names and you'll find them over at, http://www.w3schools.com/css/css_colornames.asp. Remember, CSS is case sensitive so Blue isn't the same as blue or bLUe. When specifying a color using its hex value, make sure you precede it with a # as demonstrated in the code above.
Hope this blog post was helpful to you, "Change that awful default "read more" link to something more appealing"
- - This article is based on a previous post made by, Naif Amoodi on the Madmouse Blog. - -
Spunky Jones.
