[Resolved] Category link issue on GP element

[Tom]

Functions and filters should be added using one of these methods: https://docs.generatepress.com/article/adding-php/

Where are the current shortcode functions added? Mine would replace the existing shortcode function for the link.

[William]

Yes I added them as snippets using the plugin as with the above link.

[Tom]

Can you share the exact functions and the Hero content you’re using so I can run a couple tests locally?

[William]

Sure thing. The hero element is (CSS might be slightly off as have it scattered):

<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>
	
	<button type="button" class="btn btn-info" data-toggle="modal" data-target="#slcitModal">
                Cite This Page
            </button>
	
</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: Georgia;
}

.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;
	}
}

/* Citation above fold posts without featured image */
.meta-category button {
	position: absolute;
	right: 50px;
	border-radius: 5px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, .4);
	transition: 300ms;
	background-color: #7cb342;
	font-weight: 600;
}

.meta-category button:hover {
	box-shadow: 0px 0px 8px rgba(0, 0, 0, .4);
	background-color: #679e2e;
	transition: 100ms;
}
	
	@media (max-width: 900px) {
	.meta-category button {
		display: none;
	}
}

</style>

The snippets are:

Category first letter shortcode:

add_shortcode( 'cat-first-letter', 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;
	}

}
	
	$category_first_letter = $category_display[0];
	
	return $category_first_letter;
	
} );

Post excerpt shortcode:

function db_post_excerpt() {
    ob_start();
    global $post;
    if ( has_excerpt( $post->ID ) ) {
    ?>
        <?php echo the_excerpt(); ?>
    <?php
    }
    return ob_get_clean();
}
add_shortcode( 'post-excerpt','db_post_excerpt' );

Display category shortcode:

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;

}
	
} );

And currently the category link shortcode is not used in the hero element:

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' );

[Tom]

Hi there,

Played with this a little tonight.

Try replacing your dynamic_category_link_function() function with this one:

function dynamic_category_link_function( $atts ) {
    ob_start();

    $categories = get_the_category();
    $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->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;

	return ob_get_clean();
}
add_shortcode( 'dynamic_category_link', 'dynamic_category_link_function' );

Worked on my localhost 🙂

[William]

Ah absolutely amazing! Thank you so much to you and your team – amazing!!!

[Tom]

Glad we could help 🙂

[Author]

Posts