Hey guys,
I’m slowly getting through some major edits on my blog CSS…
I’m looking to emulate a few different blogs, and one blog that I like in terms of Post title is this one: https://www.ryrob.com/make-money-blogging/
Now that I changed the theme to pull in the Post title above the featured image, I’d love to expand the title full width (above the sidebar too) if possible: https://jayclouse.com/open-enrollment-and-health-insurance/
Is that possible?
Hello @jayclouse,
Thanks for writing in!
Do you want something like this?
If that is the case, you will need to modify the content.php file in the child theme. Once you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file
<?php
// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Ethos.
// =============================================================================
$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout', true ) == 'on' && ! is_single();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_single() ) : ?>
<?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
<?php endif; ?>
<?php if ( $is_index_featured_layout ) : ?>
<?php x_ethos_featured_index(); ?>
<?php else : ?>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-featured">
<?php if ( ! is_single() ) : ?>
<?php x_ethos_featured_index(); ?>
<?php else : ?>
<?php x_featured_image(); ?>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="entry-wrap">
<?php if ( ! is_single() ) : ?>
<?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
<?php endif; ?>
<?php x_get_view( 'global', '_content' ); ?>
</div>
<?php endif; ?>
</article>
3] Save the file named as content.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/pro-child/framework/views/ethos/
5] You may need to add a custom css to adjust spacing of the post title thereafter.
Kindly let us know how it goes.
Thanks for the reply! The screenshot is what I’m looking for, and I uploaded the content.php file using what you have here, but that did not work unfortunately.
Hey @jayclouse,
To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Regards.
Done, it is below!
Hello @jayclouse,
I have logged in and reverted the change to the template.
I have added this custom JS code in Pro > Theme Options > Custom JS instead.
(function($) {
$('.single .entry-header').insertBefore('.single .x-main');
})(jQuery);
Please check your site now.
This isn’t what I’m looking for unfortunately – I’d rather have the site render automatically and not run a JS query.
But further, see image below – now the featured image is loading above the title (I wanted the Title loading on top as before) but what I was looking for was the title to span the full width of the page, above both the content and the sidebar (as seen on a page like this: https://www.ryrob.com/make-money-blogging/
For the time being, I reverted back to the content.php file I had in place at the beginning of this thread and disabled the JS
Hello @jayclouse,
Sorry if it did not work for you. Please have the code of the content.php file updated and use this:
<?php
// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Ethos.
// =============================================================================
$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout', true ) == 'on' && ! is_single();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( $is_index_featured_layout ) : ?>
<?php x_ethos_featured_index(); ?>
<?php else : ?>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-featured">
<?php if ( ! is_single() ) : ?>
<?php x_ethos_featured_index(); ?>
<?php else : ?>
<?php x_featured_image(); ?>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="entry-wrap">
<?php if ( !is_single() ) : ?>
<?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
<?php endif; ?>
<?php x_get_view( 'global', '_content' ); ?>
</div>
<?php endif; ?>
</article>
And then please follow these other steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file
<?php
// =============================================================================
// VIEWS/ETHOS/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Ethos.
// =============================================================================
$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );
get_header();
?>
<div class="x-container max width main">
<div class="offset cf">
<?php if ( is_single() ) : ?>
<?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
<?php endif; ?>
<div class="<?php x_main_content_class(); ?>" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php x_get_view( 'ethos', 'content', get_post_format() ); ?>
<?php x_get_view( 'global', '_comments-template' ); ?>
<?php endwhile; ?>
</div>
<?php if ( $fullwidth != 'on' ) : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
3] Save the file named as wp-single.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/views/ethos/
We would love to know if this has worked for you. Thank you.
That did the trick! Thanks so much for making this work with all my other constraints.
Hey RueNel,
One more follow up – since this change, I’ve lost my page meta data (was set to only show the date posted below the title and above the photo). Any insight here for how to get that back?
Hi @jayclouse,
The meta date is there behind the image. See this: https://screencast-o-matic.com/watch/cYVi2DvvOo
Try adding the following CSS on Theme Options > Global CSS
.single-post .x-main.left .hentry .entry-featured {
margin-top: 0;
}
That worked – thanks!
We are delighted to assist you with this.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.