• Resolved Daniel

    (@ddumondgmailcom)


    Hello,

    I really like the way the featured image/title is displayed on the on the single post page and would like to replicate this look to the default pages through the site…

    Can this be done easily?

    I tried opening up the different pieces (page.php, content.php, hero.php) and played with the code, etc… But I’m not a PHP guy and the results were not good.

    Any guidance would be appreciated!

    Thanks! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi there,

    Sela displays the featured image/title for single posts and pages in a very similar way by default.

    You can compare the design for a default single post on the theme’s demo site here:

    https://selademo.wordpress.com/2011/09/20/some-much-needed-vacation/

    With the design for a default single page here:

    https://selademo.wordpress.com/page-templates/default/

    The main difference that I see is that the sidebar sits higher on the single post than it does on the page. Is the styling of the sidebar the main feature you’re missing from the single page? If you let me know exactly how you’re looking to style your pages then I can help out from there.

    As an extra note: The first step to making changes like this is for you to set up a child theme. Please do not edit your theme’s files directly as any changes you make there will be lost when it comes time to update.

    In case you’re unsure, the following guides provide a good introduction to child themes, including steps to set one up:

    Thanks!

    Thread Starter Daniel

    (@ddumondgmailcom)

    Hello and thank you for your reply!

    I recognize the similarities between the single post and the single page, but there is also a significant difference as you can see here…

    Though the default “single page” layout can be nice in some cases (especially when you have good imagery to work with), the featured image is very dominant and occupies more real-estate above the fold line, including the widget area.

    The layout of the “single post” displays the featured image at nearly half the size and adds some nice white-space above it — this makes for a “lighter” look while bringing the sidebar back into view.

    I certainly agree with you in regards to the child theme — definitely good practice! ??

    Such a beautiful theme here. Very happy with it!! ??

    Thank you for clarifying the design elements that you wish to bring over from the single post to your single page. ??

    So, after you have created your child theme, copy the parent’s page.php file to your child theme’s directory.

    From there, locate and remove the following code, which places the featured image at the very top:

    <?php while ( have_posts() ) : the_post(); ?>
    
    	<?php get_template_part( 'content', 'hero' ); ?>
    
    <?php endwhile; ?>

    The following, which adds extra classes and styling to individual pages, will also need to be removed:

    <div class="content-wrapper <?php echo sela_additional_class(); ?>">

    Remember to remove the closing div also:

    </div><!-- .content-wrapper -->

    Next, copy the parent’s content-page.php file to your child theme’s directory and locate the following code:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    We want to add the page’s featured image below this with the following:

    <?php if ( has_post_thumbnail() ) : ?>
    	<div class="post-thumbnail">
    		<?php the_post_thumbnail( 'sela-page-thumbnail' ); ?>
    	</div>
    <?php endif; ?>

    Lastly! We need to tweak the page’s styling a little in the child theme’s style.css file:

    @media screen and (min-width: 1180px) {
    	.page .site-content {
    		padding: 3em 55px;
    	}
    }

    Give the above a try and let me know how you get on. If you notice some styling inconsistencies that I missed while going through the above on my own test site, please share a link to your site and I’ll take a look.

    Thanks!

    Thread Starter Daniel

    (@ddumondgmailcom)

    Brilliant!!! You ROCK Siobhan! ??

    I especially love how you explained each step in detail — have you considered teaching?

    I can’t tell you how much I fought with this — Thank you so much for bringing your experience to the table.

    I just had to make a few styling fixes to tackle those inconsistencies you foresaw.

    First, I had to add the padding globally:

    .page .site-content {
    	padding: 3em 4.661%;
    }

    Then I included your snippet here along with 2 of my own to address the entry content and the pages without featured images:

    @media screen and (min-width: 1180px) {
    .page .site-content {
    	padding: 3em 55px;
    }
    .page .entry-content {
    	padding: 0 0 0 146px;
    }
    .page .without-featured-image > .entry-header {
    	margin-left: 146px;
    }
    }

    …and we’re as good as gold — at least from what I can see! ??

    Thanks again for your kind support, it’s VERY appreciated!!! ??

    Perfect! I’m so glad that I could help and thank you for sharing those extra snippets of CSS. ??

    I’ll mark this thread as resolved for now but please do feel free to start a new one on this forum if anything else comes up.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Page Template to Match Single Post Template’ is closed to new replies.