If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)


Featured templates

CherryFramework 4. How to add “Read More” buttons for Blog Layout shortcode

This tutorial shows how to add ‘Read more’ button to Blog Layout shortcode in CherryFramework 4 templates.

CherryFramework 4. How to add “Read More” buttons for Blog Layout shortcode
  1. Locating the shortcode on your page

    The first thing you need to do is to check shortcode parameters to find out what file to edit for adding Read more button there. Please locate shortcode on the page, it will look similar to the example below:

    [cherry_blog posts_per_page="4" order="DESC" orderby="date" paged="yes" layout_type="grid" filter_type="none" grid_column="grid-4" columns="4" columns_gutter="10" timeline_item_width="48" use_timeline_breakpoint="yes" timeline_breakpoint="month" timeline_breakpoint_date_format="F j, Y" show_marker_date="no" timeline_marker_date_format="F j, Y" pagination_previous_label="" pagination_next_label="" class="grid-type-1" template_type="type-1"]36.Monstroid.Add_Read_more_button_blog_layout_shortcode_1
  2. Locating the file to edit

    The next step is to locate file based on shortcode parameters.

    1. Please check layout_type, it can be set to “grid”, “masonry” or “timeline”. In this example it’s set to ‘grid’.

    2. Next, check template_type, in our case it’s ‘type-1’.

    3. The last part of filename complex is file type, for example, standard, image, gallery , etc. Therefore we need to locate layout-grid-type-1-video.tmpl file to add Read more button to video post displayed on the page by using Blog Layout shortcode.

    4. Log into your hosting control panel and select File Manager or connect to FTP.

    5. Select wp-content/themes/monstroid/blog-layouts/tmpl/ directory to reach shortcode source files:

    6. Open your file, in our case it’s layout-grid-type-1-video.tmpl one.

  3. Editing file

    Add read mode button code below the content part by changing code from:



    		<div class="read_more">
    			%%BUTTON where="loop"%%
  4. Save changes and check your site, the button appears now. You can also add specific style rules to this button by using .read_more class name in your CSS code:


Feel free to check the detailed video tutorial below:

CherryFramework 4. How to add “Read More” buttons for Blog Layout shortcode
Live Chat
We help you to choose the right product.
Start chat