Community Forums › Forums › Archived Forums › General Discussion › Executive Pro – Show Excerpt on Hover over Post Title
Tagged: executive pro
- This topic has 12 replies, 3 voices, and was last updated 8 years, 10 months ago by mparks.
-
AuthorPosts
-
May 5, 2015 at 9:06 am #150226mparksMember
I am using Executive Pro theme and have a list of post titles that are on my front page in the Home Top widget area. I am using Genesis Featured Posts and they display just the title. Is there a way to hover over the title and display an excerpt of the post? It currently displays nothing when hovering.
Thanks in advance for the help!
http://ca.ei2.orgMay 7, 2015 at 8:54 am #150686vajrasarMemberFirst, that is possible but you have to do some custom code for that. Second, with that approach your page will then resize every time someone will hover onto the title (for making room to show excerpt) unless it is done in a tooltip fashion (using JS).
I make WordPress websites using Genesis Framework.
May 7, 2015 at 8:56 am #150690vajrasarMemberFor the same see this - https://sridharkatakam.com/portfolio-grid-in-dynamik-with-title-and-excerpt-on-hover/
The live demo of how it would look - http://websitesetuppro.com/demos/beautiful-pro/portfolio/
The use case is when you show an image and the excerpt is contained in the image itself rather than making room for excerpts every time someone hovers on it.
I make WordPress websites using Genesis Framework.
May 7, 2015 at 10:48 am #150719mparksMemberThanks for the response. I am trying to make it like a tooltip would look where the excerpt just pops up on hover, not where it actual fits in into the page.
May 7, 2015 at 1:29 pm #150752vajrasarMemberHere you go - http://imakewp.com/show-excerpt-as-tooltip-while-hovering-on-title/
I make WordPress websites using Genesis Framework.
May 8, 2015 at 7:34 am #150922mparksMemberThank you so much for all the help! I have done exactly as you stated on your site and I can't seem to get it. I did notice there is already some code similar to yours in the functions.php file. If I comment it out, it kills the site. This is what is already existing in the functions.php:
//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'executive_load_scripts' );
function executive_load_scripts() {
/*
wp_enqueue_script( 'executive-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
*/
wp_enqueue_style( 'dashicons' );wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
}
One other thing, on the old site they did not acutally use the 'excerpt' field to fill the tool tip, it was just pulling the first x amount of characters from the post. I'm sorry I used the wrong terminology... it would be great if it could do that, but if it's too much trouble it can stay using the excerpt field.
Thanks again for all the help!
KimberlyMay 8, 2015 at 7:42 am #150924mparksMemberThis was the code in the functions.php pertaining to this in the OLD site that we are updgrading. It used the old Crystal theme. Maybe it helps to see how it behaved on there:
add_action('wp_head','my_add_qtip');
function my_add_qtip() { ?>
<script type="text/javascript" src="/wp-content/themes/crystal/qtip/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){$('#home-bottom div.post p').css('display', 'none');
$('#home-bottom div.post').each(function(index) {
if( $(this).children("p").text() ) {
$(this).children("h2").children("a" ).attr('title', $(this).children("p").text() + " ..." );
} else {
$(this).children("h2").children("a" ).removeAttr('title');
}
});
$('#home-bottom div.post a[title]').qtip({
show: 'mouseover',
hide: 'mouseout',
position: {
corner: { target: 'bottomMiddle', tooltip: 'topLeft' }
},
style: { name: 'cream' }
})});
</script><?php
May 8, 2015 at 9:02 am #150952vajrasarMemberFirst, you can add the enqueue_script code, as it will not interfere with the existing one (also don't comment the old code).
Second, the JS you pasted in last reply seems to be doing the same with taking
the_content
instead ofthe_excerpt
and showing it in tooltip. Moving forward, you can comment that code for a while and check the one I gave you in the way it is mentioned.I will try and come up with fetching content from post content rather than excerpt in few hours and will update you here.
PS. It goes without saying but do take a full backup before making changes.
I make WordPress websites using Genesis Framework.
May 9, 2015 at 4:29 am #151192vajrasarMemberIn the code I mentioned (in the tutorial) to put in
functions.php
, replace that code with this -<?php //* Don't include this opening php tag //* Enqueue PowerTip add_action( 'wp_enqueue_scripts', 'sk_load_powertip' ); function sk_load_powertip() { // Won't enqueue if the device is mobile as there is no hover functionality for those devices if ( wp_is_mobile() ) { return; } if( is_home() ) { wp_enqueue_style( 'powertip-css', get_stylesheet_directory_uri() . '/css/jquery.powertip.min.css' ); wp_enqueue_script( 'powertip', get_stylesheet_directory_uri() . '/js/jquery.powertip.min.js', array( 'jquery' ), '', true ); wp_enqueue_script( 'powertip-init', get_stylesheet_directory_uri() .'/js/powertip-init.js' , array( 'powertip' ), '1.0.0', true ); } } add_action( 'genesis_entry_content', 'vg_show_hide_excerpt', 10 ); function vg_show_hide_excerpt() { if( is_home() ) { ?> <div class="hide-excerpt"> <?php echo wp_trim_words( get_the_content(), 80 ); ?> </div> <?php } }
Let me know if it works for you!
I make WordPress websites using Genesis Framework.
May 12, 2015 at 10:03 am #151865mparksMemberI am still having trouble getting this to work... I have replaced what you said in the last post, but it's still not working. No error or anything, just does not show the excerpt on hover.
Any idea on something I may need to check?
Thanks so much for the continue help on this!
KimberlyMay 12, 2015 at 12:08 pm #151884brockMemberWorks for me! A link to your site might help with debugging, Kimberly. I was able to drop Vajrasar's code in on top of a fresh install of Executive Pro. There was no need to remove anything or comment anything out. The first thing to check is that the javascript is in fact loading on the page.
When you view source, make sure that these scripts are loading:
<script type='text/javascript' src='http://localhost/executive-pro/wordpress/wp-content/themes/executive-pro/js/jquery.powertip.min.js?ver=4.2.2'></script> <script type='text/javascript' src='http://localhost/executive-pro/wordpress/wp-content/themes/executive-pro/js/powertip-init.js?ver=1.0.0'></script>
Good luck and thanks for the tutorial Vajrasar.
May 18, 2015 at 9:02 am #152554mparksMemberI have checked the source and this is at the very bottom of the code... so it does appear to be running.
The site is http://ca.ei2.org
Thanks for the continued help!
<script type='text/javascript' src='http://ca.ei2.org/wp-content/themes/executive-pro/js/jquery.powertip.min.js?ver=4.2.2'></script>
<script type='text/javascript' src='http://ca.ei2.org/wp-content/themes/executive-pro/js/powertip-init.js?ver=1.0.0'></script>May 22, 2015 at 7:17 am #153251mparksMemberHey there,
Update... so I have installed this theme on a new site to play around with this show excerpt feature. I finally got it to work! However, what I am wanting it to do is a little different. I basically set the theme up like the demo version off the StudioPress site. If you go to the site where I want it to work, http://ca.ei2.org Down under the slider, I want the posts that are listed in the 3 panels to have this hover/excerpt feature. Any suggestion on how to do that would be greatly appreciated. Thanks so much for the continued help on this!
Kimberly
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.