Home & Category Page Customization

  • Author
    Posts
  • #162479

    bigbangsocl
    Member
    Original poster

    Hi, is it possible to break the layout on the home page as per tags or categories i.e. currently it just displays all articles one after another. We would like the option of displaying them in sections broken down by categories or tags. Please help suggest the best approach.

    I have a 2nd question. We need to add a header banner to the category pages. Please help suggest the best approach.

    The blog I need help with is: blog.bigbang.social

    #162493

    tarasdashkevych
    Theme Author

    Hello,

    “We would like the option of displaying them in sections broken down by categories or tags.”
    – By default, WordPress does not allow to break latest blog posts shown on the blog page into categories. It’s designed to display all latest posts on a homepage/blog page.

    You can set a static front page as your homepage and use default WordPress blocks to display posts from a specific category on that page but the layout will be not the same as it’s shown currently on your homepage (blog page).

    In short, it’s not possible to break down your recent posts by categories or tags on a blog page at the moment.

    “We need to add a header banner to the category pages.”
    – By default, WordPress also does not provide an option to upload a featured image for categories. However, we can use a custom CSS to display a custom background image in the category page header section.

    For example, if you want to display a custom image in the page header of your Tools category then your custom CSS will be:

    
    /* add background image to the category header */
    .category-tools .page-header {
      background-image: url(https://i2.wp.com/blog.bigbang.social/wp-content/uploads/2021/03/erik-lucatero-UrhMJ6kfKlo-unsplash.jpeg);
      background-size: cover;
      background-position: center;
      height: 35vh;
    }
    
    /* Change color of the text inside */
    .category-tools .page-header span,
    .category-tools .page-header a:not(:hover){
      color: #ffffff;
    }
    

    Example: https://snipboard.io/sYKFme.jpg

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

The topic ‘Home & Category Page Customization’ is closed to new replies.