Title Tooltip on Hover

Hi.

I’d like the title tooltip to appear on all the posts displayed on category pages and front page which I’m using the recent_post shortcode to display posts from various categories. How do I do that?

Thanks
Martin

Hi Martin,

Did you add some customization for the recent post shortcode because by default, the items displayed in the recent post blocks should include the title attribute just like what you can see here.

If you added some custom codes, the title element of the recent post items should be from this line of code:

$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( 'echo=0' ) ) ) . '">'

If you already have the exact code or you have not added any custom code, please provide us with the admin and FTP access to your site in a Secure Note:

@Jade is this from /wp-content/plugins/cornerstone/includes/shortcodes/recent-posts.php

What I see in recent-posts.php is this code:

$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( $post->ID ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( array( 'echo' => false, 'post' => $post->ID ) ) ) ) . '">'

Martin

FOUND!

This is the culprit

jQuery(function($){
$(document).ready(function(){
$('a').attr('title','');
});
});

Sorry for the trouble.

Martin

Glad to hear that. :slight_smile:

1 Like

Is it possible to eliminate the word “Permalink to:” in the tooltip title?

From this

<a class="x-recent-post3 with-image" href="https://example.com/whatever-anything/" title="Permalink to: "Whatever Anything" style="opacity: 1;">

to this

<a class="x-recent-post3 with-image" href="https://example.com/whatever-anything/" title="Whatever Anything" style="opacity: 1;">

Hello @corsaunelec,

Yes, it is possible. Actually your code is correct.

Regards.

Good to know. But where do I go to remove the words from the shortcode?

Hi @corsaunelec,

I don’t see any “Permalink to:” to your recent post titles anymore, please clarify what you’re trying to do.

Thanks,

Thanks for the reply.

I have managed to get rid of the ‘Permalink to’ in the title with this in recent-posts.php.

esc_attr( sprintf( __( '%s', 'cornerstone' ),

Now what should I do to keep it from future updates? Copy to the child theme?

Hello @corsaunelec,

Thanks for updating the thread.

Yes, I would suggest you to move the code and other changes from Theme parent files to child theme so that when theme is updated in future, changes are not lost. To learn more about child theme, please take a look at following resource.

Thanks.

1 Like

What is the right path to include in the child theme, like this?

wp-content/themes/x-child/plugins/cornerstone/includes/shortcodes/recent-posts.php

Or

wp-content/themes/x-child/cornerstone/includes/shortcodes/recent-posts.php

Hi @corsaunelec,

No, none of that path is right. You need to copy the entire Recent Posts function code on your Child theme’s functions.php file.

// Modified Recent Posts 
// =============================================================================

function new_function_name ( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    // 'show_excerpt' => 'true',
    'no_sticky'    => '',
    'no_image'     => '',
    'fade'         => ''
  ), $atts, 'x_recent_posts' ) );

  $allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
  $type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';

  $id            = ( $id           != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class        != ''     ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
  $count         = ( $count        != ''     ) ? $count : 3;
  $category      = ( $category     != ''     ) ? $category : '';
  $category_type = ( $type         == 'post' ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset       != ''     ) ? $offset : 0;
  $orientation   = ( $orientation  != ''     ) ? ' ' . $orientation : ' horizontal';
  // $show_excerpt  = ( $show_excerpt == 'true' );
  $no_sticky     = ( $no_sticky    == 'true' );
  $no_image      = ( $no_image     == 'true' ) ? $no_image : '';
  $fade          = ( $fade         == 'true' ) ? $fade : 'false';

  $js_params = array(
    'fade' => ( $fade == 'true' )
  );

  $data = cs_generate_data_attributes( 'recent_posts', $js_params );

  $posts = get_posts( array(
    'orderby'             => 'date',
    'post_type'           => "{$type}",
    'posts_per_page'      => "{$count}",
    'offset'              => "{$offset}",
    "{$category_type}"    => "{$category}",
    'ignore_sticky_posts' => $no_sticky
  ) );

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";

    foreach ($posts as $post) {

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'entry-cropped' );
        $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
        $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
        $image_output_class = 'with-image';
      }

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( $post->ID ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( array( 'echo' => false, 'post' => $post->ID ) ) ) ) . '">'
                 . '<article id="post-' . $post->ID . '" class="' . implode( ' ', get_post_class('', $post->ID) ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title( $post->ID ) . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date( '', $post->ID ) . '</span>'
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    }

  $output .= '</div>';

  return $output;
}

There you need to do you your modification, besides from your modification (removing title) you also need to change the function name x_shortcode_recent_posts to a different name, one that does not already exist. As you can see on the sample code above I renamed it to new_function_name

Then you also need to add this another function to execute the swap of recent_posts to your modified recent_posts

/*swap x_recent_posts to modified recent_posts*/
add_action('wp_head', 'change_recent_posts');
function change_recent_posts() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'new_function_name' );
}

Please keep in mind that these codes serve only as a guide with the understanding that it would ultimately be your responsibility to take it from here.

Cheers!

1 Like

Thanks Friech.

Just don’t understand why the need to have the words ‘Permalink to:’ in the title. I’ll just modify the plugin file, just a few seconds job if I remember with the updates. Don’t want the functions.php in child theme to go for miles long just for a change like this.

Great help BTW.

Thanks again.

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.