Shortcode for Portfolio Tags/Categories

[texaskiwi13]

Hi,

I’m wanting to move my portfolio tags (and possibly categories) to a different place on my individual portfolio pages.

Similar to this page: https://finder.startupnationcentral.org/company_page/redent-nova

Is there a shortcode for the portfolio tags and/or categories, so I can just slot it in my page where I need it to appear? If not, is there another way to accomplish this?

This is the page I’m building my template on (we’re building a company directory). https://tin100.com/directory/test-smythson/

Thanks,
Ashley

Technology Investment Network- NZ’s premier tech export community

[thai]

Hi Ashley,

That shortcode is not available yet. But you can create it by adding this custom code under functions.php file locates in your child theme:

add_shortcode( 'portfolio_tags', 'portfolio_tags' );
function portfolio_tags(){
	ob_start();
	x_portfolio_item_tags();
	return ob_get_clean();
}

Then you can add the [portfolio_tags] to portfolio content:

For more information, please take a look at this:

https://codex.wordpress.org/Function_Reference/add_shortcode

Hope it helps

[texaskiwi13]

Thanks! That worked perfectly! Now I want to style the tags header so that it matches the other headlines on my pages, and possibly change/remove the icon displaying next to the tags. What is the CSS selector for the portfolio tag headline and for the actual tags?

Thanks!

[lely]

Hello Ashley,

To be able to use specific selector, please add specific class on the text element where you add this portfolio tag shortcode. Go to this element Customize Tab > Class field. Let say for example we will add: port-tag-wrapper. Then the CSS selector will be like this:

.port-tag-wrapper h2.h-extra.skills { /*portfolio tag headline selector*/
    /*Add  headline properties here*/
}
.port-tag-wrapper .x-li-icon a { /*portfolio tag text selector*/
    
}
.port-tag-wrapper .x-li-icon a i{ /*portfolio tag icon selector*/
    
}

Hope this helps.

[texaskiwi13]

Thanks! I got everything to work except for changing the icon. I can’t figure out what the write up is supposed to be. For example, to change font size and color, I would type:

color: red;
font-size: 13px;

What is the correct format to change the icon?

Hopefully that makes sense! Thanks!

Also, I want to add a portfolio categories shortcode. I tried altering the tags one you provided above, but it didn’t work. Can you please advise what I need to add to the functions.php to achieve this? Thanks!!

[paul.r]

Hi Ashley,

To change the icon, you can add this in Theme Options > CSS

.port-tag-wrapper .x-li-icon a i:before {
       content: "\f461";
}

Change \f461 with the unicode of your icon.

https://fontawesome.com/cheatsheet

With regards to categories, you can add the code below in your child theme functions.php

add_shortcode( 'portfolio_categories', 'my_portfolio_categories' );
function my_portfolio_categories(){
    ob_start();
    $terms = get_the_terms( get_the_ID(), 'portfolio-category' );   
    echo '<ul class="x-ul-icons">';
    foreach( $terms as $term ) {
      echo '<li class="x-li-icon"><a href="' . get_term_link( $term->slug, 'portfolio-category' ) . '"><i class="x-icon-check" data-x-icon-s="&#xf00c;"></i>' . $term->name . '</a></li>';
    };
    echo '</ul>';
    return ob_get_clean();
}

You can then use [portfolio_categories] shortcode

Hope that helps

[texaskiwi13]

That worked a treat! Last question…how can I get the categories to be inline (like in the default meta data) rather than wit line breaks between each one? Thanks!

[rad]

Hi Ashley,

You can then try this one, instead of that one

add_shortcode( 'portfolio_categories', 'my_portfolio_categories' );
function my_portfolio_categories(){
    ob_start();
    $terms = get_the_terms( get_the_ID(), 'portfolio-category' );   
    foreach( $terms as $term ) {
      echo '<span><a href="' . get_term_link( $term->slug, 'portfolio-category' ) . '"><i class="x-icon-check" data-x-icon-s="&#xf00c;"></i>' . $term->name . '</a></span>';
    };
    return ob_get_clean();
}

Thanks!