Support » Theme: Pictorico » gaps in the feature content slider

  • Resolved srnb

    (@imonlyhappywhenitravel)


    Hi,
    I want to have an empty box in the Featured Content slider like the demo has. But an empty post without name, still has a publishing date and a link that works. How can I remove the date and the link, just to have an empty box? Thank you.

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Hi there!

    You could use some custom CSS to disable the hover effect on specific posts.

    In case you’re not aware: Please do not edit your theme’s files directly. Any changes you make there will be lost when it comes time to update.

    As you already have Jetpack installed then a straightforward way to add CSS is to navigate to Appearance > Edit CSS. (Alternatively you can set up a child theme or activate a standalone CSS plugin.)

    Use the following to disable the hover effect on the existing blank post on your site:

    .blog .site-content .post-796:hover .entry-header {
        display: none;
    }
    
    .post-796 {
        pointer-events: none;
    }

    To hide other posts in the future, you’ll need to duplicate the above custom CSS and replace 796 with the ID of the post you’re trying to hide.

    This guide gives good overview on finding a post’s ID:

    https://pagely.com/blog/2015/04/find-post-id-wordpress/

    Hope that’s helpful! Let me know if you have any extra questions.

    srnb

    (@imonlyhappywhenitravel)

    Thanx a bunch Siobhan, done pretty easily & quickly!

    Glad to hear that! 🙂

    srnb

    (@imonlyhappywhenitravel)

    Hi Siobhan,
    One more question regarding this. It doesn’t seem to work on mobile, what extra can I do for that?

    Thanks for pointing that out! You can use the following to hide the title from all posts without a featured image on mobile:

    .blog .site-content .hentry.no-thumbnail .entry-header {
        visibility: hidden;
    }

    Hope that’s helpful!

    srnb

    (@imonlyhappywhenitravel)

    Yep, you did it again, it worked, thanks a lot!

    Any time! 🙂

    srnb

    (@imonlyhappywhenitravel)

    Hello again,
    There’s one more place left that they are not hidden. The theme has previous-next buttons (arrows) below each post page. How can we differentiate that? The problem is there’s either a previous or next post after/before a blank post. How will we make it so that it skips the blank post and moves onto an actual one?
    Thank you.

    The function that controls the previous/next post navigation is called pictorico_post_nav() and can be found in the theme’s /inc/template-tags.php file:

    /**
     * Display navigation to next/previous post when applicable.
     */
    function pictorico_post_nav() {
    	// Don't print empty markup if there's nowhere to navigate.
    	$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
    	$next     = get_adjacent_post( false, '', false );
    
    	if ( ! $next && ! $previous ) {
    		return;
    	}
    	?>
    	<nav class="navigation post-navigation" role="navigation">
    		<h1 class="screen-reader-text"><?php _e( 'Post navigation', 'pictorico' ); ?></h1>
    		<div class="nav-links">
    			<?php
    				previous_post_link( '<div class="nav-previous">%link</div>', _x( '<span class="meta-nav"></span> %title', 'Previous post link', 'pictorico' ) );
    				next_post_link(     '<div class="nav-next">%link</div>',     _x( '%title <span class="meta-nav"></span>', 'Next post link',     'pictorico' ) );
    			?>
    		</div><!-- .nav-links -->
    	</nav><!-- .navigation -->
    	<?php
    }

    You could add the above function to your child theme’s functions.php file to edit it.

    I recommend changing the get_adjacent_post() functions within the above so that only posts that visitors can only navigate through posts that have a certain category. You can then assign that category to all your posts that don’t have a featured image, so that the ones with featured images are excluded from the navigation.

    Here is how the function would look if you edited the get_adjacent_post() functions to work in that way:

    /**
     * Display navigation to next/previous post when applicable.
     */
    function pictorico_post_nav() {
    	// Don't print empty markup if there's nowhere to navigate.
    	$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( true, '', true );
    	$next     = get_adjacent_post( true, '', false );
    
    	if ( ! $next && ! $previous ) {
    		return;
    	}
    	?>
    	<nav class="navigation post-navigation" role="navigation">
    		<h1 class="screen-reader-text"><?php _e( 'Post navigation', 'pictorico' ); ?></h1>
    		<div class="nav-links">
    			<?php
    				previous_post_link( '<div class="nav-previous">%link</div>', _x( '<span class="meta-nav"></span> %title', 'Previous post link', 'pictorico' ) );
    				next_post_link(     '<div class="nav-next">%link</div>',     _x( '%title <span class="meta-nav"></span>', 'Next post link',     'pictorico' ) );
    			?>
    		</div><!-- .nav-links -->
    	</nav><!-- .navigation -->
    	<?php
    }

    If you’re interested, you can also find further information on the get_adjacent_post() function here:

    https://codex.wordpress.org/Function_Reference/get_adjacent_post

    Take a look and have a play! 🙂

    srnb

    (@imonlyhappywhenitravel)

    Hi Siobhan,
    Appreciate the answer. There were no changes with the exact code above (neither of them, as-is or edited). Following your advice on categories, I assigned these 2 blank posts a “notapost” category and looking at the $excluded_terms, second parameter of get_adjacent_post, I tried to assign the posts with that category to this parameter. Didn’t work. Is the logic wrong?

    function pictorico_post_nav() {

    $categories = get_the_category();

    if ( ! empty( $categories ) && ($categories[0]->name)==’notapost’ ) {
    $skippostid = $categories[0]->term_id ;
    } else {
    $skippostid = ”;
    }

    // Don’t print empty markup if there’s nowhere to navigate.
    $previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( true, $skippostid, true );
    $next = get_adjacent_post( true, $skippostid, false );

    if ( ! $next && ! $previous ) {
    return;
    }
    ?>
    <nav class=”navigation post-navigation” role=”navigation”>
    <h1 class=”screen-reader-text”><?php _e( ‘Post navigation’, ‘pictorico’ ); ?></h1>
    <div class=”nav-links”>
    <?php
    previous_post_link( ‘<div class=”nav-previous”>%link</div>’, _x( ‘<span class=”meta-nav”></span> %title’, ‘Previous post link’, ‘pictorico’ ) );
    next_post_link( ‘<div class=”nav-next”>%link</div>’, _x( ‘%title <span class=”meta-nav”></span>’, ‘Next post link’, ‘pictorico’ ) );
    ?>
    </div><!– .nav-links –>
    </nav><!– .navigation –>
    <?php
    }

    @imonlyhappywhenitravel: I owe you an apology here: I got mixed up when originally looking at the code and gave you some incorrect advice.

    The get_adjacent_post() function controls the posts where the navigation buttons display, which is why the code I provided didn’t work as expected.

    The previous_post_link() and next_post_link() functions are the ones that control the post that the previous/next buttons link to. You can find more information on those functions here:

    To exclude a category from those functions, you’ll first need to find the category’s numeric ID. That can generally be found by navigating to the Posts > Categories in your site’s /wp-admin area. From there, select “Edit” next to the category you want to exclude and make a note of its ID in the URL. The following guide includes a good visual indicator of those instructions:

    https://bobwp.com/find-post-page-category-id-wordpress/

    The following edited version of the pictorico_post_nav() function shows what the previous_post_link() and next_post_link() functions would like if you edited them to exclude a category with an ID of ‘9’:

    /**
     * Display navigation to next/previous post when applicable.
     */
    function pictorico_post_nav() {
    	// Don't print empty markup if there's nowhere to navigate.
    	$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( true, '', true );
    	$next     = get_adjacent_post( true, '', false );
    
    	if ( ! $next && ! $previous ) {
    		return;
    	}
    	?>
    	<nav class="navigation post-navigation" role="navigation">
    		<h1 class="screen-reader-text"><?php _e( 'Post navigation', 'pictorico' ); ?></h1>
    		<div class="nav-links">
    			<?php
    				previous_post_link( '<div class="nav-previous">%link</div>', _x( '<span class="meta-nav"></span> %title', 'Previous post link', 'pictorico' ), FALSE, '9' );
    				next_post_link(     '<div class="nav-next">%link</div>',     _x( '%title <span class="meta-nav"></span>', 'Next post link',     'pictorico' ), FALSE, '9' );
    			?>
    		</div><!-- .nav-links -->
    	</nav><!-- .navigation -->
    	<?php
    }

    Hope that’s helpful!

    srnb

    (@imonlyhappywhenitravel)

    Done Siobhan! Thank you soooo much :))

    I appreciate a lot that you get the exact point I’m talking about. You’re the best!!!

    You’re more than welcome! I’m glad we got there. 😀

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘gaps in the feature content slider’ is closed to new replies.