Portfolio page > include Category in entry

[stevland]

I am working on a new build with a Portfolio using Renew (X 10.4.6).

I have successfully added my own customizations to template-layout-portfolio.php and content-portfolio.php in my child theme.

But the client wants something that is outside of my knowledgebase.

She wants the Category to appear above entry-title-portfolio.

Can someone kindly point me in the right direction?

Edit:

She wants the Category(s) to appear above entry-title-portfolio.

(I realize it is possible for a project to have more than 1 category).

[ruenel]

Hey @stevland,

Thanks for writing in!

To display the category on the template, you may need to use the the_category function.

• https://developer.wordpress.org/reference/functions/the_category/

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[stevland]

I figured out a solution for this, which I will quickly share in case it helps someone in the future.

I noticed that X is inserting a .css declaration – based on the applicable category(s) – into the article tag for each Portfolio item:

<article id="post-207" class="post-207 x-portfolio type-x-portfolio status-publish has-post-thumbnail hentry portfolio-category-residential x-portfolio-3e71b68023c9ea38b8c7d290bb0bb1df isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px); opacity: 1;">

Note portfolio-category-residential above. We can exploit this!

Therefore, I added the following code to Global JS:

jQuery( ".x-iso-container-portfolio .entry-wrap.cf" ).prepend( "<div class=\"work-categories\"><span class=\"commercial\">COMMERCIAL <\/span><span class=\"community\">COMMUNITY <\/span><span class=\"institutional\">INSTITUTIONAL <\/span><span class=\"passive-house\">PASSIVE HOUSE <\/span><span class=\"residential\">RESIDENTIAL <\/span><\/div>\r\n" );

The above jQuery inserts the following into the code for each Portfolio item (obviously you would need to manually modify the code to use your own Categories).

<div class="work-categories"><span class="commercial">COMMERCIAL </span><span class="community">COMMUNITY </span><span class="institutional">INSTITUTIONAL </span><span class="passive-house">PASSIVE HOUSE </span><span class="residential">RESIDENTIAL </span></div>

At this point every project displays EVERY available Category:

So we add a little CSS to hide ALL Categories:

.commercial,
.community,
.institutional,
.passive-house,
.residential {
	display: none;
}

And then harness X’s declarations to show ONLY RELEVANT Categories:

.portfolio-category-commercial .commercial,
.portfolio-category-community .community,
.portfolio-category-institutional .institutional,
.portfolio-category-passive-house .passive-house,
.portfolio-category-residential .residential  {
    display: inline;
}

Add a little extra styling:

.work-categories {
    text-align: center;
    width: 100%;
    margin: 10px 0 0 0;
}
.work-categories span {
    margin: 0 10px;
    font-size: 90%;
}

And we’re done:

[prakash_s]

Hello @stevland,

Glad that you were able to achieve it and thanks for sharing the information.

Thanks