0

I currently have a page on my websites called blog where I'm directing blog posts to be previewed, however, I'm trying to achieve a centered preview with a 'more' button like this:

enter image description here

Is there a preferred plugin to achieve this, or certain settings I should change? I like the right hand widget area too but I just can't find the plugin that may be doing this ( i know the image is a wordpress site though)

  • Can you please more clear your requriement ! So you may just need that whole content are in center ? – nim Aug 23 '19 at 14:01
  • Yes the content is centered, but it just shows the preview and then a 'more' button. – Tom N. Aug 23 '19 at 14:14
  • you mean it can only show in preview not in real url? – nim Aug 23 '19 at 14:18
  • I'm not sure I understand. This is just a page I created called 'Blog' and in my settings I have blog posts directed there. It shows the previews currently on that page and I can create my own link, but there are plugins that will automatically do this for every post showing so that I don't have to modify each post for the button – Tom N. Aug 23 '19 at 14:23
  • It sounds like you may need to look into the theme hierarchy and brush up on WP terminology. It looks like you may be working on an archive, i.e. the blog page where your most recent Posts automatically show up. Is that correct? Or are you saying you have created a Page and you're pasting in the excerpts? It sounds like when you say "preview" you're referring to what WP calls the "excerpt," a short snippet from the Post content so readers have an idea of what will be in the full Post. – WebElaine Aug 23 '19 at 21:44
1

Now that you have a Page set up as your "posts page," there are a few things you may want to do. Each theme is built a little differently, so pick the ones that apply in your case.

Display the Posts

First, create a child theme (which basically just means you create one "style.css" file with a few comments that tell WP this is a theme). Next, go into your parent theme and copy the code from "index.php". This will give you the basic HTML structure your particular theme uses. Paste that code into your own "page-page-name.php" (as in, if the Page you are using to show Posts is called Page Name, this template will apply to the Page called "Page Name." So, edit the file's name to apply to your particular Page).

Then, edit that file. You basically need to replace the Loop, which usually looks approximately like

<?php if ( have_posts() ) :
while ( have_posts() ) : the_post();
    the_content();
endwhile;
endif; ?>

with your own custom Loop, something like:

<?php
    $args = array(
        'post_type' => 'post', // get Posts, not Media, Pages, or CPTs
        'posts_per_page' => 10, // number of Posts to get
    );
    $posts = new WP_Query($args);
    if($posts->have_posts()) : // if Posts were found
        while($posts->have_posts()) : $posts->the_post(); // show each Post ?>
            <div class="onePost">
                <a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
                <?php the_excerpt(); ?>
            </div>
        <?php endwhile;
    endif;
    wp_reset_postdata(); // Reset to the original query
?>

Add/customize a "more" button

WP Core will show a "read more" link when you call the_excerpt() in your template, but it looks like you just want the link to say "More." Create a "functions.php" file in your child theme folder.

add_filter('excerpt_more', 'wpse_excerpt_link');
function wpse_excerpt_link($more) {
    global $post;
    return '<a class="morebutton" aria-label="More about ' . get_the_title($post->ID) . '" href="'. get_permalink($post->ID) . '">More</a>';
}

Now you will see links that visually say "More" (and screen readers will say "More about (this post's title)" so they know what they're getting more of). Next you'll want to style it.

Style the "more" button

There are a few ways to do this, but since you've already built a child theme, it's most logical to style the buttons there. Open that "style.css" file that currently only has your comments in it and try something like

a.morebutton {
    display:inline-block;
    margin:1em .5em;
    padding:.5em 2em;
    border-radius:5px;
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
    background:purple;
    color:white;
}
a.morebutton:hover, a.morebutton:focus {
    background:blue;
}

You'll probably want to customize the specific CSS, but this should give you rounded-corner purple buttons with white text that turn blue when you hover or keyboard-focus them.

You may want to customize the HTML and/or the CSS provided here, but this should get you started.

Alternatively, if all this is too much code, this type of layout is very common in many themes. Instead of looking for plugins, it would be wiser to look into the theme hierarchy and use something that's built-in. For example, many themes support date-based archives - meaning a URL that will show excerpts like this for Posts from any Category. So, you may want to see if your theme already supports this and just use that archive. Or, seek out a different theme that supports it.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.