- This topic has 21 replies, 3 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
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?
Customer Support
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.
Lead Developer
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?
- You must be logged in to reply to this topic.