[Resolved] Category link issue on GP element

Home Forums Support [Resolved] Category link issue on GP element

Home Forums Support Category link issue on GP element

Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #1747331
    Tom
    Lead Developer
    Lead Developer

    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.

    #1751264
    William

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

    #1753434
    Tom
    Lead Developer
    Lead Developer

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

    #1757957
    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' );
    #1761111
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1763959
    William

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

    #1764136
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 16 through 22 (of 22 total)
  • You must be logged in to reply to this topic.