• -I need some help styling the category link on my website into a button on the right of the blog archive featured image

    -Here is how the category link is on my website.See picture

    -I want to style those category links into buttons and place them beside the blog achieve featured image like this. See picture

    -Basically you can see that on this website

    -Can someone here help me on how to achieve that? Thanks for the replies

Viewing 7 replies - 16 through 22 (of 22 total)
  • Theme Author Tom

    (@edge22)

    Remove this block of code:

    if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
        echo '<span class="comments-link">';
            comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
        echo '</span>';
    }

    That should do it ??

    Thread Starter michaelgof

    (@michaelgof)

    Perfect??

    – Now hovering over the author and date shows they are links. How do i stop that behavior?

    – It should just be the text and not clickable.

    Theme Author Tom

    (@edge22)

    This as your full function should do that:

    add_filter( 'generate_post_author', '__return_false' );
    add_filter( 'generate_show_comments', '__return_false' );
    add_filter( 'generate_post_date_output', 'tu_fancy_byline', 10, 2 );
    function tu_fancy_byline( $date, $time_string ) {
    	printf( ' <span class="byline">%1$s</span>',
    		sprintf( '<span class="author vcard" itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<span class="author-name" itemprop="name">%3$s</span></span>',
    			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    			esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
    			esc_html( get_the_author() ),
    			get_avatar( get_the_author_meta( 'ID' ) )
    		)
    	);
    
    	echo $time_string;
    }

    Your author link shouldn’t be a link already. Do you have any other functions added?

    Thread Starter michaelgof

    (@michaelgof)

    -Here is what i got in the child functions.php
    <?php
    /**
    * GeneratePress child theme functions and definitions.
    *
    * Add your custom PHP in this file.
    * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
    */

    function generatepress_child_enqueue_scripts() {
    if ( is_rtl() ) {
    wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    }
    }
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

    if (defined('WPSEO_VERSION')) {
    add_action('wp_head',function() { ob_start(function($o) {
    return preg_replace('/^\n?<!--.*?[Y]oast.*?-->\n?$/mi','',$o);
    }); },~PHP_INT_MAX);
    }

    /*my own code - this code shows the round author head, number of comments, date below post title */
    add_filter( 'generate_post_author', '__return_false' );
    add_filter( 'generate_show_comments', '__return_false' );
    add_filter( 'generate_post_date_output', 'tu_fancy_byline' );
    function tu_fancy_byline( $date ) {
    printf( ' <span class="byline">%1$s</span>',
    sprintf( '<span class="author vcard" itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<span class="author-name" itemprop="name">%3$s</span></span>',
    esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
    esc_html( get_the_author() ),
    get_avatar( get_the_author_meta( 'ID' ) )
    )
    );

    /*if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
    echo '<span class="comments-link">';
    comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
    echo '</span>';
    }*/

    echo $date;
    }

    /* position category links on featured image */
    add_filter( 'generate_show_categories', '__return_false' );

    add_action( 'generate_after_entry_header', function() {
    $categories_list = get_the_category_list( '' );

    if ( $categories_list ) {
    echo '<div class="category-container">' . $categories_list . '</div>';
    }
    }, 20, 20 );

    /* For styled comment count below reab more link */
    add_filter( 'generate_show_comments', '__return_false' );

    add_action( 'generate_after_content', function() {
    if ( is_singular() ) {
    return;
    }

    echo '<div class="comments-link">';
    comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
    echo '</div>';
    } );

    What do you suggest i edit?

    Thread Starter michaelgof

    (@michaelgof)

    – I tried your code *This as your full function should do that:*

    -It actually makes the author and date links unclickable??

    -But it duplicates the date with no spacing and the “last updated” text vanishes

    see it

    Theme Author Tom

    (@edge22)

    Hmm, I’m still seeing the links. Is the function I provided still active?

    Thread Starter michaelgof

    (@michaelgof)

    -Yes its the function you provided. i disabled the cache plugin

    -Here is what i see

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘How to Style the Category Links into Buttons’ is closed to new replies.