How to Have More Than 1 Blog Page

Support
#1

Hi, I’ve completed our website and have a Blog page on it. The thing is, I’ve been asked to include several more pages with a blog on each. I’ve created categories for the posts and want each category to appear on separate pages. I’ve searched your forum and also the web for a way to do this and have only found code to exclude certain categories from showing which doesn’t work! Is there a shortcode which will display the category I want on the page and it also structures the page the same as the existing Blog page, so it’s the same layout etc?

The website is: https://www.core365.co.uk

Thanks!

#2

Hi @core365

Add the following code to Theme Options CSS

.archive.category .entry-featured {
    float: left;
    max-width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
}

And use the URL as:

https://www.core365.co.uk/category/categoryname

Hope it helps

#3

Hi, I’m not quite sure what you mean with the name of the URL. The category name is ‘Web Design Warwick’ so should the URL be:

https://www.core365.co.uk/category/web-design-warwick

Also, I’ve added the CSS into the Global CSS, but again I don’t understand how the posts will show in the same format as the Blog page without specifying the page template.

Sorry, just can’t get my head around this one! Would you be able to explain it a bit more please.

Thanks

#4

Sorry for the confusion. You don’t need CSS to make a category page the same look or layout as your main blog page. In Appearance > Theme Options > Blog and setup the Archives the same as your main blog.

To see what I mean, please watch this screen recording:

In case you don’t want this setup, you need to use one of the grid plugins bundled in X like the Essential Grid or The Grid for your main blog and category pages.

You could also use the Recent Post element. You just need to setup several of those and use the Offset option to skip posts.

Thanks.

#5

Ah right, ok thanks! I appreciate the video too!

On the Blog page, how do I do it so that it doesn’t show the posts from the categories I’ll be making the separate pages for, as at the minute the Blog page shows all the categories and all the posts.

Thanks!

#6

Hi There,

By default, blog page will display all post. Custom code is needed to exclude a certain category. It needs to be added on child theme functions.php file. For the code, see #6 from this link: https://www.templatemonster.com/help/wordpress-how-to-exclude-category-from-displaying-on-blog-page-2.html. Note that since X theme child theme is already setup, the code on #6 is what you only need from the link. Just change category ID respectively.

Hope this helps.

#7

Hi, that’s great, thanks!

Just one more thing, have you got the div tag reference for the archive blog pages so I can change the letter spacing and text align with CSS please - I’ve tried myself but can’t get it to work!

Thanks!

#8

Hi there,

The archive pages have the archive class attached to the body tag. So you can use that to restrict your CSS code for the archive pages. The content itself usually goes inside a div tag with a class called entry-wrap. So the code would be something like this:

body.archive .entry-wrap {
   /* CSS CODE GOES HERE */
}

If you have a specific case kindly get back to us with the URL and a screenshot of the place so that we can give you proper selector for the CSS code. I also suggest that you make use of the Google Chrome Developer Toolbar to find out the proper selectors for your code. For more information:

Hope it helps.

#9

Hi, thanks for the info and help! I already use the Chrome Developer tools to get the div tag and classes, but I can’t seem to find the archive class that you said to use when I’m using the Chrome Developer tool!

I’ve tried to use the body.archive .entry-wrap { code along with various combinations of below (including: body.archive .entry-wrap .h-landmark), but nothing has worked to change it!

.h-landmark, .entry-title.h-landmark {
letter-spacing: 0em;
text-align: center;

I’m trying to change the title ‘Web Design Warwick’ in the mustard colour background on the screen grab attached, so it matches the format of the other pages. Here’s the URL:
https://www.core365.co.uk/category/web-design-warwick/

I hope you can help!

Thanks!

#10

Hi There,

Please see this: https://screencast-o-matic.com/watch/cbXDVQ2YVK

.category-5 h1.h-landmark {
    letter-spacing: 5px;
    text-align: center;
}

If that doesn’t work when you add on your custom CSS editor, that means there might be CSS syntax error. Check if all open { has corresponding closing }. In CSS, when syntax error is encountered, it might stop all succeeding CSS from working.

Hope this helps.

#11

That’s great, it worked thanks! I appreciate the time you’ve taken and also providing a video it was very useful!

Thanks again!

#12

Glad to see we managed to help.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.