Archived topic
Category link issue on GP element
21 replies · Started by William on April 9, 2021
Hi there,
On this article, I noticed the category button in the GP header is not working. I understand this as the fact there are two categories for this post, and the snippet code is outputting both links for the link:
function dynamic_category_link_function( $atts ) {
ob_start();
$page_id = get_queried_object_id();
$categories = get_the_category( $page_id );
foreach($categories as $cat){
$cat_ID = $cat->term_id;
echo get_category_link($cat_ID);
}
return ob_get_clean();
}
add_shortcode( 'dynamic_category_link', 'dynamic_category_link_function' );
Is there a way to only show the first category as a link?
Hi there,
can you share the Hero markup for the Category link ?
Sure thing, the shortcode for the category link is:
function dynamic_category_link_function( $atts ) {
ob_start();
$page_id = get_queried_object_id();
$categories = get_the_category( $page_id );
foreach($categories as $cat){
$cat_ID = $cat->term_id;
echo get_category_link($cat_ID);
}
return ob_get_clean();
}
add_shortcode( 'dynamic_category_link', 'dynamic_category_link_function' );
And the Hero element code is:
<div class="meta-category">
<a class="category-style" href=[dynamic_category_link]>
<span style="background: #039ae5; color: #fff;" class="cat-first-letter">[cat-first-letter]</span>
<span class="label">[display_category]</span></a>
</div>
<h1 class='post-title'>
{{post_title}}
</h1>
<div class="post-excerpt">
[post-excerpt]
</div>
<style>
.page-hero .post-title {
padding-top: 0px;
}
.meta-category {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 1.5rem;
font-family: Brawler;
}
.meta-category a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.meta-category a.category-style:before {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
color: #333;
padding: 0 0.5rem;
content: '—';
}
.meta-category a:first-child {
margin-left: 0;
}
.meta-category a .label {
position: relative;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
color: #333;
-webkit-transition: color .15s;
transition: color .15s;
}
.meta-category a .label:after {
background-color: #222;
width: 100%;
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
-webkit-transform: translateY(1px);
transform: translateY(1px);
-webkit-transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
-webkit-transition-property: opacity,-webkit-transform;
transition-property: opacity,-webkit-transform;
transition-property: opacity,transform;
transition-property: opacity,transform,-webkit-transform;
content: "";
}
.meta-category a:hover .label:after {
opacity: 1;
-webkit-transform: translateY(-3px) translateZ(0);
transform: translateY(-3px) translateZ(0);
}
span.cat-first-letter {
font-size: 3rem;
width: 4rem;
height: 4rem;
line-height: 4rem;
display: flex;
justify-content: center;
align-items: center;
}
@media(max-width:768px){
span.cat-first-letter {
width: 3.5rem;
height: 3.5rem;
line-height: 3.5rem;
font-size: 2.5rem;
}
}
.post-excerpt {
font-size: 1.25rem;
color: #111;
}
.meta-category a:hover .label {
color: #222;
}
.page-hero .inside-page-hero.grid-container {
background-color: #f7fafc;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 1px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, .25);
margin-left: -10px;
margin-right: -10px;
}
@media screen and (min-width:768px) {
.page-hero {
padding-left: 15px;
padding-right: 15px;
}
.entry-content {
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (max-width:320px) {
.page-hero .post-title {
font-size: 40px;
}
}
</style>Try replacing your shortcode snippet with:
function dynamic_category_link_function( $atts ) {
ob_start();
$page_id = get_queried_object_id();
$categories = get_the_category( $page_id );
echo get_category_link( $categories[0]->term_id );
return ob_get_clean();
}
add_shortcode( 'dynamic_category_link', 'dynamic_category_link_function' );That seems to make the link clickable - although this post has two categories, one primary over the other. The text is different to the link - can this be made to match?
The shortcode being used to display category as text is:
add_shortcode( 'display_category', function() {
// SHOW YOAST PRIMARY CATEGORY, OR FIRST CATEGORY
$category = get_the_category();
// If post has a category assigned.
if ($category){
$category_display = '';
if ( class_exists('WPSEO_Primary_Term') )
{
// Show the post's 'Primary' category, if this Yoast feature is available, & one is set
$wpseo_primary_term = new WPSEO_Primary_Term( 'category', get_the_id() );
$wpseo_primary_term = $wpseo_primary_term->get_primary_term();
$term = get_term( $wpseo_primary_term );
if (is_wp_error($term)) {
// Default to first category (not Yoast) if an error is returned
$category_display = $category[0]->name;
} else {
// Yoast Primary category
$category_display = $term->name;
}
}
else {
// Default, display the first category in WP's list of assigned categories
$category_display = $category[0]->name;
}
// Display category
return $category_display;
}
} );Do all posts have a primary category ? And if so do i assume you always want the Primary displayed?
I am not sure - but I would like for the link to appear the same as the text appearing - the above code does the text for the category and having the link to always align to the same category.
Pretty complicated, but perhaps this would do it:
function dynamic_category_link_function( $atts ) {
ob_start();
$page_id = get_queried_object_id();
$categories = get_the_category( $page_id );
$category_link = '';
if ( class_exists('WPSEO_Primary_Term') ) {
// Show the post's 'Primary' category, if this Yoast feature is available, & one is set
$wpseo_primary_term = new WPSEO_Primary_Term( 'category', get_the_id() );
$wpseo_primary_term = $wpseo_primary_term->get_primary_term();
$term = get_term( $wpseo_primary_term );
if ( is_wp_error( $term ) ) {
// Default to first category (not Yoast) if an error is returned
$category_link = get_category_link( $categories[0]->term_id );
} else {
// Yoast Primary category
$category_link = get_category_link( $term->id );
}
} else {
// Default, display the first category in WP's list of assigned categories
$category_link = get_category_link( $categories[0]->term_id );
}
echo $category_link;
}
add_shortcode( 'dynamic_category_link', 'dynamic_category_link_function' );Thanks for that - I've implemented it but it seems to still be pulling the wrong category link here still?
Did it make any difference elsewhere? Or is it the same issue on other multi-category posts?
Same issue on multi-category posts it seems - everything else is fine.
Strange, it's following the exact same logic as the function outputting the name.
What if you replace this:
$page_id = get_queried_object_id();
$categories = get_the_category( $page_id );With this?:
$categories = get_the_category();
That doesn't seem to make a difference to the link it seems.
Hmm, afraid I'm running out of ideas here.
Can you post the entire code you're using for this in one place so I can see if anything stands out?
Sure thing - I appreciate the help. I think I might have realized why its not working - your code is not in the header element.
The applicable code for the header element is:
<div class="meta-category">
<a class="category-style" href=[dynamic_category_link]>
<span style="background: #039ae5; color: #fff;" class="cat-first-letter">[cat-first-letter]</span>
<span class="label">[display_category]</span></a>
</div>Where the snippet for [display_category] is:
add_shortcode( 'display_category', function() {
// SHOW YOAST PRIMARY CATEGORY, OR FIRST CATEGORY
$category = get_the_category();
// If post has a category assigned.
if ($category){
$category_display = '';
if ( class_exists('WPSEO_Primary_Term') )
{
// Show the post's 'Primary' category, if this Yoast feature is available, & one is set
$wpseo_primary_term = new WPSEO_Primary_Term( 'category', get_the_id() );
$wpseo_primary_term = $wpseo_primary_term->get_primary_term();
$term = get_term( $wpseo_primary_term );
if (is_wp_error($term)) {
// Default to first category (not Yoast) if an error is returned
$category_display = $category[0]->name;
} else {
// Yoast Primary category
$category_display = $term->name;
}
}
else {
// Default, display the first category in WP's list of assigned categories
$category_display = $category[0]->name;
}
// Display category
return $category_display;
}
} );The code you recommended:
function dynamic_category_link_function( $atts ) {
ob_start();
$categories = get_the_category();
echo get_category_link( $categories[0]->term_id );
return ob_get_clean();
}
add_shortcode( 'dynamic_category_link', 'dynamic_category_link_function' );is not included in the header element yet - what would be the best way to include in?