Changing Portfolio post layout

Hi. I am using Ethos on Pro. I have done something weird. The Portfolio post page doesn’t have the title anymore. It’s a configuration problem, not customization via code. How can I bring it back?

Right now, my Portfolio post page doesn’t have a sidebar. How do I:

  • Make the Portfolio post page look at the regular blog page (Featured image at the top, followed by title and content)
  • Make the sidebar appear, like my regular blog page

Many thanks in advance.

Hello @sgchan,

Thanks for writing in.

You are using Ethos stack in Pro theme. Have you created a custom header for your site? Did you assigned your custom header as the global header? If that is the case, then the titles of the portfolio items will no longer display. Please keep in mind that the Portfolio Item titles were displayed in the landmark header which is part of the default header. As soon as you have assigned a new header, the landmark disappeared because it is now being replaced with the custom header. To resolve this, I would recommend that you duplicate your current header and add a new bar. This new bar will serve as the landmark header. You will have to insert a headline element in this new bar and utilize the headline’s dynamic content to display the title.

Or you can check out this thread instead:

And for the sidebar, assuming 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/WP-SINGLE-X-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Single portfolio post output for Ethos.
// =============================================================================

get_header();

?>

  <div class="x-container max width main">
    <div class="offset cf">
      <div class="<?php x_main_content_class(); ?>" role="main">

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

      </div>

      <?php // this displays the sidebar ?>
      <?php get_sidebar(); ?>

    </div>
  </div>

<?php get_footer(); ?>

3] Save the file named as content-portfolio.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/views/ethos/

5] If the sidebar still does not display, please add the following code in your child theme’s functions.php file

// Custom Portfolio Layout
// =============================================================================
if ( ! function_exists( 'x_get_content_layout' ) ) :
  function x_get_content_layout() {

    $content_layout = x_get_option( 'x_layout_content' );

    if ( $content_layout != 'full-width' ) {
      if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
      } elseif ( x_is_portfolio_item() ) {
        $layout = 'content-sidebar';
      } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
      } elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
        $layout = 'content-sidebar';
      } elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
        $layout = 'sidebar-content';
      } elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
        $layout = 'full-width';
      } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
          $opt    = x_get_option( 'x_woocommerce_shop_layout_content' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        } else {
          $opt    = x_get_option( 'x_archive_layout' );
          $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
      } elseif ( x_is_product() ) {
        $layout = 'full-width';
      } elseif ( x_is_bbpress() ) {
        $opt    = x_get_option( 'x_bbpress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
      } elseif ( is_404() ) {
        $layout = 'full-width';
      } else {
        $layout = $content_layout;
      }
    } else {
      $layout = $content_layout;
    }

    return $layout;

  }
endif;
// =============================================================================

We would love to know if this has worked for you. Thank you.

Firstly, thank you so much for responding. I really appreciate the prompt response.

The header issue is resolved. Thanks! However, the layout remains an issue.

The content-portfolio.php code in itself gave a white screen. So I added the additional code in functions.php. Again, it gave a white blank screen after a few minutes. Then I commended the below code:

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

The screen then shows the header, sidebar and footer… but no content.

It seems like the “while” is going into an infinite loop before timing out with a white screen. I’m a novice Wordpress PHP programmer. Hope you can help.

Many thanks in advance.

Just a quick update… your code gave me an idea and I tweaked the content-portfolio.php code to the following:

<?php

    // =============================================================================
    // VIEWS/ETHOS/WP-SINGLE-X-PORTFOLIO.PHP
    // -----------------------------------------------------------------------------
    // Single portfolio post output for Ethos.
    // =============================================================================

    get_header();

    ?>

      <div class="x-container max width main">
        <div class="offset cf">
          <div class="<?php x_main_content_class(); ?>" role="main">

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <?php if ( has_post_thumbnail() ) : ?>
            <?php x_featured_image(); ?>
      <?php endif; ?>
        <?php x_get_view( 'global', '_content' ); ?>
    </article>

          </div>

          <?php // this displays the sidebar ?>
          <?php get_sidebar(); ?>

        </div>
      </div>

    <?php get_footer(); ?>

I took some parts of the code from content-page.php. And it works! Please do advise me if this is the best approach.

Hey @sgchan,

I believe the file we’ve added in the child theme is not correct, try this: delete content-portfolio.php file from your child theme (make sure to take a backup before deleting anything) and then create a new file and name it wp-single-x-portfolio.php and paste the following code inside:

<?php

// =============================================================================
// VIEWS/ETHOS/WP-SINGLE-X-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Single portfolio post output for Ethos.
// =============================================================================

get_header();

?>

  <div class="x-container max width main">
    <div class="offset cf">
      <div class="<?php x_main_content_class(); ?>" role="main">

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

      </div>

      <?php // this displays the sidebar ?>
      <?php get_sidebar(); ?>

    </div>
  </div>

<?php get_footer(); ?>

Now upload this file to wp-content/themes/pro-child/framework/views/ethos/ and it should work as expected. Let us know how this goes!

Thanks @Nabeel,
Yes your solution works but I wanted it to look just like a regular post too. I don’t quite like the portfolio layout. That’s why I didn’t use the x_get_view( ‘ethos’, ‘content’, ‘portfolio’ );

But can I ask a novice question, why is it wrong to use content-portfolio.php and I should use wp-single-x-portfolio.php? What is wrong with the code I put together?

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	  <?php if ( has_post_thumbnail() ) : ?>
			<?php x_featured_image(); ?>
	  <?php endif; ?><br>
		<?php x_get_view( 'global', '_content' ); ?>
	</article>

Many thanks in advance for teaching a novice.

Hi @sgchan,

Our apologies for the confusion. It is not wrong to use the content-portfolio.php and make the changes from there since that is the template part that is displaying the portfolio content.

You could follow the suggestion made by Nabeel or use the solution you have come up with. As long as you are able to get it to work, it should be fine since there are different approach to achieve what you are trying to do.

Hope this helps.

1 Like

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