Help with website layout/design for blog categories filter

Site URL: https://www.emmamchugh.net

Hi everyone - 

I am working on building my site and I have a question about the design/layout. 

I have created categories across the top for each topic I plan to blog about (health, lifestyle, food, travel etc.) 

I would like to set it up so that when you click into each category a page comes up with a photo and title of each blog post within that category, and then you can click on a specific post and it will open that post up so you can read it. Does anyone know how to make that happen? or have any suggestions?

Thank you in advance for any help!
 

Emma

Try Filter Plugin.

You can do this with blog summary blocks filtered by category, each summary block category on its own page, and those pages will each have the category link on the nav bar. Click the link, summary shows up with all the posts in that category, with thumbnails and a text excerpt, if you wish, then click the thumbnail go to the post.  I am doing this for one category (out of many that I use). I have photography lessons on my nav bar which at one point was a pull down menu with links to the seven lessons, all blog posts. Now I have those lessons in a summary block on its own page. All my other blogs posts are on one page with a lot of summary blocks.  I have them grouped by cat and I could give those cats their own page if I wished. 

https://myrandomviews.com/storysummary

On 1/17/2021 at 9:47 AM, derricksrandomviews said:

You can do this with blog summary blocks filtered by category, each summary block category on its own page, and those pages will each have the category link on the nav bar. Click the link, summary shows up with all the posts in that category, with thumbnails and a text excerpt, if you wish, then click the thumbnail go to the post.  I am doing this for one category (out of many that I use). I have photography lessons on my nav bar which at one point was a pull down menu with links to the seven lessons, all blog posts. Now I have those lessons in a summary block on its own page. All my other blogs posts are on one page with a lot of summary blocks.  I have them grouped by cat and I could give those cats their own page if I wished. 

https://myrandomviews.com/storysummary

Hello! when I check ur website, I see ur back to top arrow. I love it, without # tag in address bar. Can u show me how to make this button pls. Thnks in advance

On 1/20/2021 at 1:30 PM, NyiMinThwin said:

Hello! when I check ur website, I see ur back to top arrow. I love it, without # tag in address bar. Can u show me how to make this button pls. Thnks in advance

Add to Code Injection Footer

<a href="#" id="back-to-top" title="Back to top" class="show">↑</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };

    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}
})

</script>

I'm looking to customize my weblog posts so some of those elements, like classes, show up in a extraordinary area than the default. Since ".Blog-meta-object–classes" is the detail, is it possible to code this into an HTML block to insert this meta statistics where I would really like?

Its possible and depending on exactly what you want, you might not need code to do it.