Styling and Positioning meta data on blog posts

Support
#1

Hello,

I am using pro theme Renew stack and I would like to change the position of the meta data for blog posts.
Currently they are below the blog title, but I want to move them to a sidebar position (if possible) or some other
location - I am going to experiment.

What options do I have for doing that?

Currently I do have a Child theme set up in the case that is required.

Thanks.

#2

Hi @ayham,

Thanks for reaching out.

Does it need to have fixed positioning (like floating sidebar)? I’m not really sure the exact outtome you’re trying to achieve, but it’s doable with custom templates. Please provide a design mockup, it’s a template so the instruction varies depending on what you wish to achieve. I could only provide a simple instruction for template creation or duplicate and code placement, but I can’t provide complex customization. It depends on what you wish to achieve.

Thanks!

#3

My guess is that it’s not complicated - You would know more. Check this link out for example

I don’t care about the menu stuff - only what’s related to the blog. As you can see the blog content is in the middle, and on either side we have the meta and social links on the left, and the author info on the right. I tried to do something similar using three columns in a section and adjusting width to 1/6 + 2/3 + 1/6 but the output is clunky and I don’t know how to squeeze that meta stuff into the left sidebar just above the social icons and get the alignment right.

What’s your guess? Is that ‘easy’ to do?

Thank you!

#4

Hi @ayham,

Moving the meta is just easy, but creating the same layout will need custom development. Let’s continue with moving the meta.

  1. Please make sure you installed a child theme and it’s active
  2. Then using your FTP or hosting’s file manager, copy the file wp-sidebar.php from this folder \wp-content\themes\x\framework\views\{YOUR STACK}\

And paste it to your child theme with the same folder structure, create folders when needed. Example, \wp-content\themes\x-child\framework\views\{YOUR STACK}\wp-sidebar.php

And the {YOUR STACK} is your site’s current stack selected in Theme Options.

  1. Edit your child theme’s wp-sidebar.php and add any of this line representing your current stack

<?php x_renew_entry_meta(); ?>

or

<?php x_integrity_entry_meta(); ?>

or

<?php x_ethos_entry_meta(); ?>

or

<?php x_icon_entry_meta(); ?>

Example,

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-SIDEBAR.PHP
// -----------------------------------------------------------------------------
// Sidebar output for Integrity.
// =============================================================================

?>

<?php if ( x_get_content_layout() != 'full-width' ) : ?>

  <aside class="<?php x_sidebar_class(); ?>" role="complementary">

  	<?php x_icon_entry_meta(); ?>
  	
    <?php if ( get_option( 'ups_sidebars' ) != array() ) : ?>
      <?php dynamic_sidebar( apply_filters( 'ups_sidebar', 'sidebar-main' ) ); ?>
    <?php else : ?>
      <?php dynamic_sidebar( 'sidebar-main' ); ?>
    <?php endif; ?>
  </aside>

<?php endif; ?>

Now, post meta should be displayed just above the sidebar before your widgets, I assume your social icons are part of your widgets.

  1. Now, let’s remove the meta below the title. Repeat step #2 but this time, for file _content-post-header.php, example, \wp-content\themes\x-child\framework\views\{YOUR STACK}\_content-post-header.php

  2. Edit your child theme’s _content-post-header.php and remove the line similar to the step #3. Example, if you see <?php x_icon_entry_meta(); ?>, then delete it.

This should allow you to edit two themes moving the line by adding new and deleting the old. All templates that you’ll edit should be copied from parent theme into the child theme. And you must only edit the files copied to the child theme.

Hope this helps.

#5

Thank you for this. I tried it and it works well.

I have two questions about it:

  1. If I want to exclude a certain page type from the new function we create, can I add that to where we define the function? For example, check the addition I made to your code (it’s underlined)
<?php if ( x_get_content_layout() != 'full-width' **&& != pagetype_I_want_to_exculde**) : ?> <?php endif; ?>
  1. Where can I find resources to learn about different kinds of styling in PRO that I can make such as the one I asked about?

Thanks!

#6

Hi There,

You can try with this condition:

<?php if ( x_get_content_layout() != 'full-width' && !is_page(array(123, 456)) ) : ?>

The 123, 456 numbers should be the page IDs. You can find your page IDs on this link:

You can take a look at this:

Instead of /x/framework/legacy/cranium/headers/views/integrity/wp-header.php, The Pro theme directory should be: /pro/framework/legacy/cranium/headers/views/integrity/wp-header.php .

Regards!

#7

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