Custom More Link - WordPress Snippet Generator

Nimbus Themes / Magazine / Code / Custom More Link – WordPress Snippet Generator

Example Link or Button

This is what your link will look like if there are no other styles affecting the HTML elements produced by this snippet generator.


{{linkText || 'Continue Reading...'}}{{linkText || 'Continue Reading...'}}

Modify the Read More Link - Functions.php

Add this code to your functions.php file. Scroll down to learn more.

                
            

add_filter( 'the_content_more_link', '{{themeSlug || 'your_theme_slug'}}_modify_read_more_link' );

function {{themeSlug || 'your_theme_slug'}}_modify_read_more_link() {
    return '<a class="more-link" href="'.get_permalink().'">'.__('{{linkText || 'Continue Reading...'}}', '{{textDomain || 'your-text-domain'}}').'</a>';
}



   
add_filter('the_content_more_link', '{{themeSlug || 'your_theme_slug'}}_modify_read_more_link');

function {{themeSlug || 'your_theme_slug'}}_modify_read_more_link(){
    return '<div class="more-tag"><span><a class="more-link" href="'.get_permalink().'">'.__('{{linkText || 'Continue Reading...'}}', '{{textDomain || 'your-text-domain'}}').'</a></span></div>';
}

Modify the Read More Link - Style.css

Add this code to your style.css file. Scroll down to learn more.

            
 
.more-tag{text-align:center;}
.more-tag span{display:inline-block;border:{{buttonBorderWidth || '2'}}px solid #{{buttonBorderColor || '000000'}};background:#{{buttonBackgroundColor || 'e5f5ff'}};}
.more-link{color:#{{textColor || '000000'}};}

Evan ScoboriaJan 18 2017Comments

This snippet tool provides all the PHPcode and CSS style that you’ll need to implement a custom More link or button on your WordPress theme. The More feature in WordPress allows you to choose how much of your content to show on any blog feed or archive page that has this feature enabled.

Using the Read More Feature in WordPress Posts

If your theme supports this feature, it can be enabled on any post in one of three ways from the post editor:

Visual Editor: The most common use case for enabling the More feature on a post is by selecting the More button from the tools menu on the Visual Editor. Here is an image that indicates which button you’re looking for.

To use this method, you should position your cursor at the end of the content you would like to have visible on the blog or archive page and then hit the return button a couple times to create some space between the cursor and the last characters of your content. This helps with formatting on some themes and seems to improve the visual output of this feature. Next, select the button shown in the image above and WordPress will automatically insert a <!–more–> tag into your content where the cursor was positioned.
Text Editor: The process for using this feature when operating from the text editor is much the same as was described for the Visual Editor, but the tool menu on the editor looks very different. Here’s an image that depicts this menu.

Again, be sure to position your cursor at the end of the content you want to show on your blog feed or archive page and create a few spaces after the end of the content. Then, select the button indicated in the image to insert the <!–more–> tag.
Manually Insert: If you’ve worked with WordPress long enough, you may find that manually typing this tag is faster than messing with the tool menus. Or you may be creating content in some other platform like a Google Doc and want to have all the elements present in the final copy, including the <!–more–> tag. If this is the case you can simply type out this tag in exactly the following format:
```

```
If you’ve done this carefully the final content in the editor will look like this:

What Does the  tag do?

The intent of this core WordPress feature is to allow bloggers and/or blog editors to choose to truncate their post’s content on blog and archive pages. There are several reasons to do this, including but not limited to:

Visual Appearance: Blogs look neater and more appealing if the full post content is not displayed. The typical appearance most bloggers will strive to achieve includes the post title, one paragraph, and possibly a featured image.
User Engagement: When someone visits your blog, you want them to be led to as many compelling and relevant articles as possible to boost their engagement with your website. This is important in building your brand and is believed to be a ranking factor used by Google to place your website in the SERPs.
SEO: Google is not a fan of duplicate content, and keeping Google happy should be one of the primary goals of any blogger or webmaster that relies on search for some portion of their traffic. Using the More feature allows you to minimize the number of locations on your website that display the full content of any post.

There are several ways the  tag may affect your post’s appearance on your blog and archive-type pages, and the final appearance will be dependant on how your theme implements this feature. Two of the most common, and the two that we offer support for in the snippet tool, are a simple “Read more” link and a “Read more” button. Both are very common in free and premium WordPress themes.

Read More Link: The read more link is the classic way of using this feature. Often it’s nothing more than a simple link that adopts the CSS styling of the theme without standing out. Here are a couple examples I found quickly reviewing themes on marketplaces like ThemeForest:
Read More Button: Buttons provide a slightly more attention-grabbing call-to-action that may help compel the reader to keep reading your post but can also overwhelm a blog or archive page with repetition. On this blog, we’ve chosen to use buttons, but in order to keep the feeling of clutter to a minimum, we used a light gray that we feel provides both the benefits of a button-like visibility and a call-to-action but also blends into the site design enough to not be a distraction. Here’s how we choose to implement on the Nimbus Magazine:

Using the Custom Read More Snippet Tool

This tool should be pretty easy to use, and in addition to the code output for your theme, I’ve added a preview window so you can style the link or button right in the tool.

Filling in the form

General Tab
- Theme Slug: The theme slug is used as the unique prefix for all PHP functions and/or variables. This ensures that your theme does not have cause conflicts with plugins or the WordPress core application.
- Text Domain: The text domain is a unique key that your theme declares to identify translatable strings. It should be the name of your theme in all lowercase and with hyphenation. It should also match your themes directory.
Layout/Type Tab
- Style/Type: Here you can choose a link or button layout.
- Link/Button Text: Enter in your link or button text in this field.
Design Tab
- Border Color: If you’re using the button format, you can indicate the hexadecimal color code for the border color. If you want a single color button, make both this field and the background color field match.
- Border Thickness: Choose a thickness in pixels.
- Background Color: Enter in the hexadecimal color code for the background of the buttons. If you want a single color button make both this field and the border color field match.
- Text Color: Enter in a hexadecimal color code for the text color. This will act on both the button and link text.

How to use the code this tool generates

This snippet tool produces two unique types of code that you’ll need to add to your website. The first is a chunk of PHP that you should add to your functions.php file. It will look something like this:

add_filter('the_content_more_link', 'your_theme_slug_modify_read_more_link');

function your_theme_slug_modify_read_more_link(){
    return ''.__('Continue Reading...', 'your-text-domain').'';
}

I strongly recommend that you download your functions.php file via FTP, make this edit in a text editor, and then reupload your new file via FTP. This will allow you to quickly fix any issues if something goes wrong.

The second snippet is a block of CSS that you’ll want to add to your style.css file or drop into the new Custom CSS field on the WordPress Customizer. It will look something like this:

.more-tag{text-align:center;}
.more-tag span{display:inline-block;border:2px solid #000000;background:#e5f5ff;}
.more-link{color:#000000;}

This code tells your readers browser how to style the link or button.

Help us Improve this Tool

If you notice any bugs or issues with this tool, please leave a comment so we can fix and improve it!

Thank you!