[kateanitaParticipant]

Hello,

I would like to add the category and a tag beneath my project titles on my portfolio archive page. Attached is a screenshot of what I would like to achieve.

Here is the link: http://homefed.stapkodesign.com/portfolio/

I am using Ethos, and have the latest version of everything.

I found a post about it already here: https://community.theme.co/forums/topic/show-category-under-title-under-the-images-on-portfolio-index-page-in-ethos/

but it did not work for me as the directions specify using the Integrity child theme and not Ethos.

I’ve already copied content-portfolio.php here: x-child/framework/VIEWS/ETHOS/CONTENT-PORTFOLIO.PHP, but am just not sure what code needs to be added to get the category and tag to show.

Thank you! You guys are awesome.

Katie

[kateanitaParticipant]

Sorry – screenshot file is reattached here at smaller size. Thanks again!

[Rue NelModerator]

Hello There,

Thanks for writing in! To add the category and a tag beneath my project titles in your portfolio archive page, since the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Ethos Entry Cover
// =============================================================================
function x_ethos_entry_cover( $location ) {

  if ( $location == 'main-content' ) { ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        <h2 class="h-entry-cover"><span><?php x_the_alternate_title(); ?></span></h2>
      </a>
      <?php 
        if ( has_term( '', 'portfolio-category', NULL ) ) {
          $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
          $separator         = ', ';
          $categories_output = '';
          foreach ( $categories as $category ) {
            $categories_output .= '<a href="'
                                . get_term_link( $category->slug, 'portfolio-category' )
                                . '" title="'
                                . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                                . '"> '
                                . $category->name
                                . '</a>'
                                . $separator;
          }

          $categories_list = sprintf( '<span>%1$s %2$s',
            __( 'In', '__x__' ),
            trim( $categories_output, $separator )
          );
        } else {
          $categories_list = '';
        }

        printf( '<p class="p-meta">%1$s</p>', $categories_list );
      ?>
      <?php x_portfolio_item_tags(); ?>
    </article>

  <?php } elseif ( $location == 'post-carousel' ) { ?>

    <?php GLOBAL $post_carousel_entry_id; ?>

    <article <?php post_class(); ?>>
      <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
        <div class="x-post-carousel-meta">
          <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
          <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
          <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
        </div>
      </a>
    </article>

  <?php }

}
// =============================================================================

Please let us know if this works out for you.

[kateanitaParticipant]

Thanks so much for the answer! It didn’t seem to work though.

To make sure I did the correct thing, I’ll tell you what I did step by step. I create a new file called functions.php, copied what you have above into that, and uploaded it into x-child/framework/views/ethos

Was this correct? Not sure if I setup the child theme correctly.

Here is the page URL again where I want to add the categories and tags underneath the titles of the projects: http://homefed.stapkodesign.com/portfolio/

Thank you!

Katie

[Rue NelModerator]

Hey Katie,

Thanks for updating in! You only need to add the code in your child theme’s functions.php file. You do not have to add any template customizations. To better assist you, would you mind providing us the ftp login credentials so we can take a closer look and fix the issue?

To do this, you can make a post with the following info:
– WP username
– Wp Password
– FTP Hostname
– FTP Username
– FTP Password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[kateanitaParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for updating in! Regretfully the given credentials is not working for us. The WP password is not working and the ftp password is not working also. Please double check it for us.

Thank you in advance.

[kateanitaParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thank you for providing the information. I have managed to fix the issue. I removed the unnecessary files you have added and I modified your child theme’s functions.php file (wp-content/themes/x-child/functions.php). I added this custom code:

// Custom Ethos Entry Cover
// =============================================================================
function x_ethos_entry_cover( $location ) {

  if ( $location == 'main-content' ) { ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        <h2 class="h-entry-cover"><span><?php x_the_alternate_title(); ?></span></h2>
      </a>
      <?php 

        // Display Categories
        if ( has_term( '', 'portfolio-category', NULL ) ) {
          $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
          $separator         = ', ';
          $categories_output = '';
          foreach ( $categories as $category ) {
            $categories_output .= '<a href="'
                                . get_term_link( $category->slug, 'portfolio-category' )
                                . '" title="'
                                . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                                . '"> '
                                . $category->name
                                . '</a>'
                                . $separator;
          }

          $categories_list = sprintf( '<span>%1$s %2$s</span>',
            __( 'Category: ', '__x__' ),
            trim( $categories_output, $separator )
          );
        } else {
          $categories_list = '';
        }

        // Display Tags
        $terms = get_the_terms( get_the_ID(), 'portfolio-tag' );
        $tags_output = '';

        foreach( $terms as $term ) {
          $tags_output .= '<a href="' . get_term_link( $term->slug, 'portfolio-tag' ) . '">' . $term->name . '</a>'
                       . $separator;
        };

        $tag_list = sprintf( '<span>%1$s %2$s</span>',
            __( 'Tags: ', '__x__' ),
            trim( $tags_output, $separator )
          );

        printf( '<p class="p-meta">%1$s<br/>%2$s</p>', $categories_list, $tag_list );
      ?>
      <?php //x_portfolio_item_tags(); ?>
    </article>

  <?php } elseif ( $location == 'post-carousel' ) { ?>

    <?php GLOBAL $post_carousel_entry_id; ?>

    <article <?php post_class(); ?>>
      <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
        <div class="x-post-carousel-meta">
          <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
          <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
          <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
        </div>
      </a>
    </article>

  <?php }

}
// =============================================================================

Please check your portfolio page now.

[kateanitaParticipant]

That’s really wonderful – thanks so much. Is there a way to move the category and tag up into the layover on the images, and then remove the words “category” and “tags”? I’ve attached a screenshot.

Thanks again for your help!

[Rue NelModerator]

Hello There,

I have modified the code to moved its placement and removed the “Category” and “Tags” keyword. The final code is this:

// Custom Ethos Entry Cover
// =============================================================================
function x_ethos_entry_cover( $location ) {

  if ( $location == 'main-content' ) { ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        <h2 class="h-entry-cover" style="top: calc(100% - 7em);"><span><?php x_the_alternate_title(); ?></span>

          <?php 

            // Display Categories
            if ( has_term( '', 'portfolio-category', NULL ) ) {
              $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
              $separator         = ', ';
              $categories_output = '';
              foreach ( $categories as $category ) {
                $categories_output .= $category->name
                                    . $separator;
              }

              $categories_list = sprintf( '<span>%1$s %2$s</span>',
                __( '', '__x__' ),
                trim( $categories_output, $separator )
              );
            } else {
              $categories_list = '';
            }

            // Display Tags
            $terms = get_the_terms( get_the_ID(), 'portfolio-tag' );
            $tags_output = '';

            foreach( $terms as $term ) {
              $tags_output .= $term->name
                           . $separator;
            };

            $tag_list = sprintf( '<span>%1$s %2$s</span>',
                __( '', '__x__' ),
                trim( $tags_output, $separator )
              );

            printf( '<span class="p-meta"><small>%1$s%2$s</small></span>', $categories_list, $tag_list );
        ?>

        </h2>

      </a>
    </article>

  <?php } elseif ( $location == 'post-carousel' ) { ?>

    <?php GLOBAL $post_carousel_entry_id; ?>

    <article <?php post_class(); ?>>
      <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
        <div class="x-post-carousel-meta">
          <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
          <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
          <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
        </div>
      </a>
    </article>

  <?php }

}
// =============================================================================

Hope this would work out for you.

[kateanitaParticipant]

This works perfectly, thank you!

One last question – is it possible to put the category and tags on the same line with this symbol “|” separating them?

Thanks again!

[Paul RModerator]

Hi,

Yes, it is possible.

You can add this under Custom > Edit Global CSS in the Customizer.

body .h-entry-cover span {    
    float:left;
}

body .h-entry-cover span:after {   
    content:" | ";
    display:inline-block;    
    padding:0 5px;
} 

body .h-entry-cover span:last-child:after {  
    content:"";
}

Hope that helps.

[Author]

Posts