WordPress: Customizing and Styling the 'Read More'

I am writing this post for people who want to customize & style the default ‘Continue Reading’ link / button to ‘Read More’ for WordPress post teasers & excerpts.

There is a nice documentation available on WordPress website Customizing the Read More. But chances are high that people get confused with such documentation if their theme files are coded little differently than the default WordPress themes.

Lets now customize our ‘Continue Reading’

Please Note: I am only covering this by using existing functions.php file. But if you do not have this file in your theme, you will have to find similar code in your theme files and modify them. Do this only if you know what you are doing.

Step 1: Create a backup of your files.

The best practice before modifying your core theme files is to take the backup. Copy all your theme files or just the functions.php file to any other folder or desktop. You can use this file again if something goes wrong and you need to restore your site. (That may sound scary but it actually isn’t.)

Step 2: Open your theme’s – functions.php

Open this functions.php file in your favorite editor (Notepad, Dreamweaver etc.)

Information about Functions File
A theme can optionally use a functions file, which resides in the theme subdirectory and is named functions.php. This file basically acts like a plugin, and if it is present in the theme you are using, it is automatically loaded during WordPress initialization (both for admin pages and external pages).

Step 3: Find ‘Continue reading’

Simply find the code ‘Continue reading’ in your functions.php file. The full code for ‘Continue reading’ may look like this:

'Continue reading →'

Two instances where this code appears are functions that define Teasers & Excerpts. You may have only one function depending upon how your theme is written.

Below is a screen shot of how it looks like

WordPress: Customizing and Styling the 'Read More'

Step 4: Modify ‘Continue reading’

I prefer to use ‘Read More >’ than saying ‘Continue Reading’. So I would change this code to ‘Read More >’. You may choose to write anything you want.  DO NOT CHANGE ANYTHING ELSE.

WordPress: Customizing and Styling the 'Read More'

We’re done changing the text to display instead of ‘Continue reading’.

Please Note before going to next steps

If we keep the code only up to Step 4, the position of ‘Read More >’ link that appears varies depending upon the paragraph displayed as Teaser or Excerpt. Sometimes it appears immediately after the last word of paragraph and sometimes appear on next line after the paragraph.

It doesn’t look neat. See example below.

WordPress: Customizing and Styling the 'Read More'

WordPress: Customizing and Styling the 'Read More'

Such appearance makes it difficult to see this Read More link hence it is good if we style it & make it appear uniformly throughout the page.

Step 5: Make ‘Read More’ link to appear on separate line below the teaser or excerpt.

To put Read More link on separate line we need to add <p> to the code inside single quotes. Remember to change this for all one or two instances you may have in your functions.php file

'<p>Read More ></p>'

Now it will appear on next line after the Teaser or Excerpt paragraph.

Step 6: CSS Style for ‘Read More’

After making it seem uniformly on separate line, we now should style this Read More link to further make it look better. To do this, we need to first attach a  to the code like we did for. Remember to do this for all instances.

I am attaching a span class named ‘moretext’ to the code.

'<p><span>Read More ></span></p>'

Step 7: Adding CSS rule in style.css

After attaching SPAN class to the code, we must write a CSS rule for this class in style.css file. It is best practice to write additional css rules at the very bottom of the file style.css leaving default theme styles above yours. This works great to identify your custom rules and edit them.

Open your style.css theme file. Scroll down to very bottom & add CSS class for moretext

We have managed to this modified ‘Read More >’ to appear on left hand side but I wanted to place this on the right hand side of the page.

Hence I added the code below in my CSS file. You may alter this to fit your site’s appearance.

.moretext, .moretext a:link, .moretext a:visited { color: #FFF; float: right; width: 75px; height: 20px; text-align: center; font-family: Tahoma; font-size: 10px; vertical-align: middle; display: block; clear: both; background-color: #1b507e; font-weight: bold; text-transform: none; padding: 2px; } 

Step 8: Upload your modified functions.php & style.css files

Once done upload your functions.php & style.css files to your themes directory, overwriting the existing ones.

Refresh your blog home page to see changes you’ve just made.

Before and After

WordPress: Customizing and Styling the 'Read More'


WordPress: Customizing and Styling the 'Read More'

That’s all. If you have any queries, doubts then feel free to buzz me through comments.

I hope this helps 🙂


Please enter your comment!
Please enter your name here