Archived topic
Category link issue on GP element
21 replies · Started by William on April 9, 2021
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.
Yes I added them as snippets using the plugin as with the above link.
Can you share the exact functions and the Hero content you're using so I can run a couple tests locally?
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' );
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 :)
Ah absolutely amazing! Thank you so much to you and your team - amazing!!!
Glad we could help :)