Move entry-header location

[cmbort]

We are using X Pro with a child theme and the Icon Stack.

We want to move the “entry-header” block from where it is now by default just before the “entry-content” block and place it in between the “x-masthead” block and “x-main full” block.

Our goal is to make sure the “entry-header” section remains full width regardless of “x-main full” width and padding settings.

We assume this something that can be done by adding some code to the child theme’s functions.php file.

We copied the following code from a previous forum topic related to what we are trying to accomplish and modified it a bit, but still need some help tweaking the PHP code to suit our needs along with adding a custom function action that will remove the original entry-header code that is located within the Content/Sidebar section (“x-main full” block).

    function add_custom_section(){ ?>

   <header class="entry-header">
      <h1 class="entry-title">PHP CODE THAT WILL DISPLAY PAGE TITLE HERE</h1>
    </header>
  
<?php }
add_action('x_after_view_global__slider-below', 'add_custom_section');

See included screenshots below for reference.

SCREENSHOT ONE (larger image version: https://pasteboard.co/HX34GQa.jpg)
We want to move the “entry-header” block from where it is now by default just before the “entry-content” block and place it in between the “x-masthead” block and “x-main full” block.

SCREENSHOT TWO (larger image version: https://pasteboard.co/HX3646X.jpg)
Once we can move the “entry-header” block and place it here in between the “x-masthead” block and “x-main full” block, then the “entry-header” section will become and remain full-width regardless of “x-main full” width and padding settings.

[rad]

Hi Clark,

Thanks for reaching out.

It’s not possible with just functions.php, instead you should duplicate these files into your child theme

\framework\views\renew\content.php
\framework\views\renew\content-audio.php
\framework\views\renew\content-gallery.php
\framework\views\renew\content-image.php
\framework\views\renew\content-link.php
\framework\views\renew\content-portfolio.php
\framework\views\renew\content-quote.php
\framework\views\renew\content-video.php

Just copy them from the parent theme to the child theme while following the same folder path/structure.

Then edit each file and remove this line

<?php x_get_view( 'renew', '_content', 'post-header' ); ?>

Then copy these files to your child theme too (same folder path)

\framework\views\renew\wp-single.php
\framework\views\renew\wp-single-x-portfolio.php

Then edit them and add this line <?php x_get_view( 'renew', '_content', 'post-header' ); ?> just above <div class="x-container max width offset">. Examples,

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

get_header();

?>
<?php x_get_view( 'renew', '_content', 'post-header' ); ?>
  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', get_post_format() ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE-X-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Single portfolio post output for Renew.
// =============================================================================

get_header();

?>
<?php x_get_view( 'renew', '_content', 'post-header' ); ?>
  <div class="x-container max width offset">
    <div class="x-main full" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', 'portfolio' ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>
  </div>

<?php get_footer(); ?>

Thanks!

[cmbort]

Thank you very much for the quick and detailed response. I’ll try your suggestions and report back shortly.

In the meantime, I noticed the following files you listed do not have the <?php x_get_view( 'renew', '_content', 'post-header' ); ?> reference to remove. What should I do with those files?

\framework\views\renew\content-link.php
\framework\views\renew\content-portfolio.php
\framework\views\renew\content-quote.php

[cmbort]

Just tried your solution and nothing changed. FYI I’m using the Icon Stack and X Pro child theme.

[rad]

Hi Clark,

Ah sorry for the confusion, the instruction should be the same but for icon. I’m providing the updated instruction below

\framework\views\icon\content.php
\framework\views\icon\content-audio.php
\framework\views\icon\content-gallery.php
\framework\views\icon\content-image.php
\framework\views\icon\content-link.php
\framework\views\icon\content-portfolio.php
\framework\views\icon\content-quote.php
\framework\views\icon\content-video.php

Just copy them from the parent theme to the child theme while following the same folder path/structure.

Then edit each file and remove this line

<?php x_get_view( 'icon', '_content', 'post-header' ); ?>

Then copy these files to your child theme too (same folder path)

\framework\views\icon\wp-single.php
\framework\views\icon\wp-single-x-portfolio.php

Then edit them and add this line <?php x_get_view( 'icon', '_content', 'post-header' ); ?> just above <div class="x-main full" role="main">. Examples,

<?php

// =============================================================================
// VIEWS/ICON/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Icon.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

get_header();

?>
<?php x_get_view( 'icon', '_content', 'post-header' ); ?>
  <div class="x-main full" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( 'icon', 'content', get_post_format() ); ?>
      <?php x_get_view( 'global', '_comments-template' ); ?>
    <?php endwhile; ?>

  </div>

  <?php if ( $fullwidth != 'on' ) : ?>
    <?php get_sidebar(); ?>
  <?php endif; ?>
<?php get_footer(); ?>

<?php

// =============================================================================
// VIEWS/ICON/WP-SINGLE-X-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Single portfolio post output for Icon.
// =============================================================================

get_header();

?>
<?php x_get_view( 'icon', '_content', 'post-header' ); ?>
  <div class="x-main full" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( 'icon', 'content', 'portfolio' ); ?>
      <?php x_get_view( 'global', '_comments-template' ); ?>
    <?php endwhile; ?>

  </div>

  <?php get_sidebar(); ?>
<?php get_footer(); ?>

And it appears that it’s still not going to work as seems you’re expecting to see it on a page too. You have two options for the page, First is change its page template to Blank - No Container | Header, Footer to make sure it’s in absolute full-width. Then just add a headline element as page’s title in full-width.

Second is editing the template as above,

1. Duplicate this file into your child theme

\framework\views\icon\content-page.php

Just copy that from the parent theme to the child theme while following the same folder path/structure.

Then edit each file and remove this block

        <?php if ( $disable_page_title != 'on' ) : ?>
        <header class="entry-header">
          <h1 class="entry-title"><?php the_title(); ?></h1>
        </header>
        <?php endif; ?>

2. Then copy this file to your child theme too (same folder path)

\framework\views\icon\wp-page.php

Then edit it and add this block

        <?php if ( $disable_page_title != 'on' ) : ?>
        <header class="entry-header">
          <h1 class="entry-title"><?php the_title(); ?></h1>
        </header>
        <?php endif; ?>

just above <div class="x-main full" role="main">, Example

<?php

// =============================================================================
// VIEWS/ICON/WP-PAGE.PHP
// -----------------------------------------------------------------------------
// Single page output for Icon.
// =============================================================================

get_header();

?>
        <?php if ( $disable_page_title != 'on' ) : ?>
        <header class="entry-header">
          <h1 class="entry-title"><?php the_title(); ?></h1>
        </header>
        <?php endif; ?>

  <div class="x-main full" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( 'icon', 'content', 'page' ); ?>
      <?php x_get_view( 'global', '_comments-template' ); ?>
    <?php endwhile; ?>

  </div>

  <?php get_sidebar(); ?>
<?php get_footer(); ?>

But I recommend doing the first option since page templates are made for that purpose.

Thanks!

[cmbort]

Okay. We followed your latest instructions and it finally worked, but only after we also edited the following files (copied to the child theme directory) which was the second option you mentioned.

\pro-child\framework\views\icon\content-page.php
\pro-child\framework\views\icon\wp-page.php

We decided to try removing all the following modified files from the child theme directory and noticed that except for the blog pages (single-post template), the regular pages continue to display the <header class="entry-header"> block before the <div class="x-main full" role="main"> block which is what we wanted in the first place.

WE REMOVED THESE MODIFIED FILES FROM CHILD THEME DIRECTORY ALTOGETHER

\framework\views\icon\content.php
\framework\views\icon\content-audio.php
\framework\views\icon\content-gallery.php
\framework\views\icon\content-image.php
\framework\views\icon\content-link.php
\framework\views\icon\content-portfolio.php
\framework\views\icon\content-quote.php
\framework\views\icon\content-video.php

We don’t mind leaving the blog pages (single-post) header block <header class="entry-header"> out of the equation for this modification. Can we just limit our modifications to the content-page.php and wp-page.php files in our child theme?

[ruenel]

Hello Clark,

Yes, you are in the correct path. You can edit those two files only if it is needed.

Best Regards.

[cmbort]

Great! That will help keep things simple.

Just out of curiosity, what sections/pages would be affected (in addition to the blog single-post pages) if we were to keep modified copies of them in the child theme directory?

\framework\views\icon\content.php
\framework\views\icon\content-audio.php
\framework\views\icon\content-gallery.php
\framework\views\icon\content-image.php
\framework\views\icon\content-link.php
\framework\views\icon\content-portfolio.php
\framework\views\icon\content-quote.php
\framework\views\icon\content-video.php

[ruenel]

Hey Clark,

Those files contains similar codes like this:

<?php

// =============================================================================
// VIEWS/ICON/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">
      <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
      <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
      <?php endif; ?>
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  </div>
</article>

The files will affect the content section of the posts which displays the number of comments, post header, featured image and its post contents.

Hope this helps.

[cmbort]

Thanks for the explanation and thanks for all your help with this modification!

[ruenel]

You’re most welcome!
We’re glad we were able to help you out.