Post page - right display featured image & category header 'title' styling

Hi there,

Thanks for the great theme and all the useful feedback on the forum - many useful answers there.

I have created a ‘news’ page and ‘recipes’ page in my website. There were two ways of doing this:

  1. Just link to the category page for ‘news’ category and ‘recipes’ category
    https://www.nataliesarmeniankitchen.co.uk/category/news/
    https://www.nataliesarmeniankitchen.co.uk/category/recipes/

  2. Use ‘posts in page’ plugin and pull in posts by category
    https://www.nataliesarmeniankitchen.co.uk/news/
    https://www.nataliesarmeniankitchen.co.uk/cook-your-own/recipes/

It doesn’t matter which but I want them to display as follows:

  • Heading ‘News’ and ‘Recipes’ styled as page title in other pages
  • Featured image to appear to right of excerpt under the post title

At the moment, in the category pages, I have the following problems:

  • Category header only display as small, plain heading - needs to look like page title
  • Category header includes ‘Category:’ - I don’t want this include
  • Featured image displays above post title, not below it to the right of the excerpt

In the posts in page pages, I have a different problem. The heading looks good but:

  • Featured image does not pull in at all

I don’t mind which option I use but I’d really appreciate any help to achieve the image to the right of the excerpt and the correct heading design in keeping with other pages on the site.

For CSS, I am using the Simple Custome CSS plugin.

Thanks!

Hello Leonora,

Thank you for reaching out to us here.

> Heading ‘News’ and ‘Recipes’ styled as page title in other pages

Add the following custom CSS code:


.archive-title {
  font-family: Oregano,Merienda,Lobster,Caveat,Kaushan Script,Satisfy,Courgette,Gabriola,Simonetta,Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
  font-size: 40px;
  color: #8e3340;
}

> Featured image to appear to right of excerpt under the post title

Try to do the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   if( $('body').hasClass('archive') ) {

      $('article.type-post').each(function(){

        if( $(this).find('.entry-thumb').length ) {

          var innerThumb = $(this).find('.entry-thumb').html();
            
          $(this).find('.entry-post').prepend('<div class="inner-thumbnail">'+innerThumb+'</div>');
        
        }
        
      });
      
   }

})(jQuery);

  1. Update
  2. Apply the following custom CSS code:

.archive article.has-post-thumbnail .entry-thumb {
  display: none;
}

.archive article.has-post-thumbnail .entry-post:after{
  content: '';
  clear: both;
  display: block;
}

.archive article.has-post-thumbnail .entry-post .inner-thumbnail{
  width: 32%;
  float: right;
}

.archive article.has-post-thumbnail .entry-post > p{
  margin-right: 35%;
}


> Category header includes ‘Category:’ – I don’t want this include

To do that, you would do this trick.

Regards,
Kharis

Thanks so much for the quick reply and the advice. It all worked perfectly!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis