Connect with us

Tips & Tricks

How to: show/hide a widget in WordPress with jQuery

In a previous post I talked about how to show/hide a single div html code with a search inside. Today I’d like to show you how I implemented jQuery into my new theme.

Published

on

As seen in the current theme, I am using jQuery to animate the show/hide or as known as the css style display: none;.

Since I am using a custom child theme on my site, and have Hybrid theme as my parent, the widgets or sidebar section is different than may be in your theme. But just apply the the style’s as follows to your theme.

First make sure that your WordPress site is calling jQuery, by plugging in this code into your header.php file above the <?php wp_head(); ?> text:

<?php wp_enqueue_script('jquery'); ?>

Then anywhere above the </head >, plug this code in:

<script type="text/javascript">
function toggleWidgets() {
	$('#primary h3.widget-title').addClass('plus');

	$('#primary h3.widget-title').click(function() {
		$(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
	});

}
$(document).ready(function() {
	toggleWidgets();
}
</script>

That’s it. Pretty simple huh.

So lets go over what the code does.

$('#primary h3.widget-title').addClass('plus');

This line finds all <h3> tags with the class widget-title inside the ID parameter of #primary and adds a class of plus.

Then

$('#primary h3.widget-title').click(function() {
		$(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
	});

Will apply a click function. When the H3 tag is clicked it will remove the class plus and add the class minus.

Then the code that says .next will then toggle the “next” element after the <h3> title.

Continue Reading
9 Comments

9 Comments

  1. Rolograaf

    July 29, 2009 at 5:59 am

    Tried this, saw the javascript in the source of my blog, but the plus class was not added and click function not activated. Any idears what I could have done wrong?

    • Alik

      September 14, 2009 at 7:27 am

      Same problem here. In Firebug th script is there, but the class is not added to h3 widget class inside div ID primary.

      Any ideas?

      • Austin

        September 15, 2009 at 12:40 pm

        Example links?

        • Alik

          September 18, 2009 at 5:40 pm

          http://accio.website.pl/ozo/
          code is working now (I think so 😉 ) but the CSS class/definition for hide/unhide panels is missing (?).
          .-= Alik´s last blog ..Import blogu z blox.pl do WordPress =-.

          • Chris

            September 28, 2009 at 9:22 pm

            Doesn’t work for me. I don’t see the class added. I have the last jquery installed, I even tried the noConflict just in case and nothing.

  2. Pingback: 30 Tutorials Combining Both Wordpress and jQuery : Speckyboy Design Magazine

  3. Pingback: 30 Tutorials Combining Both Wordpress and jQuery | Coyot [at] CanalCoffee.com : WordPress

  4. Pingback: 30 tutorial para utilizar jQuery en nuestro Wordpress | code

  5. Pingback: 20+ jQuery and Wordpress Tutorials – A Match Made in Heaven

You must be logged in to post a comment Login

Leave a Reply

Tips & Tricks

Remove spaces when echoing the_title

Ever wanted to print or echo the WordPress title attribute without spaces?

Published

on

This little trick can be useful for calling custom functions and printing the title with out spaces for W3C compatibility. I used this trick in a new theme called Galleria, which will be out for public download in the coming days.

Using this comes in handy for a delicious text link:

<?php $title = get_the_title(); ?>
<a href="http://del.icio.us/post?url=<?php echo $title; ?>&amp;<?php echo str_replace(" ", "%20", $title); ?>">
Bookmark This (<?php echo $title; ?>)</a>

What I am doing is calling $title = get_the_title(); and using str_replace(" ", "%20", $title); to replace empty spaces with a %20, which is used in URL encoding empty spaces.

Alternatively you can use a dash or underscore.

Thanks to Jason Boyle for his adaption.

Continue Reading

Tips & Tricks

Display the_excerpt only if there is text

Have you ever wanted to display the excerpt only if you write one? A simple couple lines of code can display the_excerpt any where you like.

Published

on

In my new theme, I am using this coded trick to display the excerpt on a single post only if I’ve got text inside. Usually if you use the_excerpt and you don’t have one, it will fake one for you.

This is not something that I wanted to do on the single post page. So I used the following code to check if the excerpt existed.

if ( !empty( $post->post_excerpt ) ) :

Once this action is taken into account, you can factor in what code you want to out put if the post_excerpt isn’t empty.

if ( !empty( $post->post_excerpt ) ) :
	the_excerpt();
else :
	false;
endif;

The above code checks if there is an excerpt and print’s it to the screen. If there isn’t an except, it doesn’t do anything.

Continue Reading

Tips & Tricks

Add a shortcode

Published

on

This is a simple one.

/**
 * Your Blog title
 *
 */
function my_blog_title() {
	$blogname = get_bloginfo('name');
    return '<span class="blog-title">' . $blogname . '</span>';
}		  	
add_shortcode('blog-title', 'my_blog_title');

Just add this to your functions.php file and then add [blog-title] in any post or page and it will return your Blog Title. :)

Continue Reading

Random Search Terms

Title

Recent Posts: Fully Net Worth . com

Tall Guy Car Reviews Net Worth: How Rich is the YouTube Star?

Tall Guy Car Reviews Net Worth: How Rich is the YouTube Star?

Tall Guy Car Reviews Net Worth and Bio: Corey Barrett is an American YouTube personality from Minneapolis, MN who runs the famous channel ‘Tall Guy Car Reviews’. He basically publishes video content related to car reviews and sometimes about his personal life. As of 2019, Tall Guy Car Reviews’ net worth is estimated to be […]

Danny Towers Net Worth: How Rich is the Puerto Rican Rapper?

Danny Towers Net Worth: How Rich is the Puerto Rican Rapper?

Danny Towers is an upcoming rapper who is best known for his songs “‘Motel Hell”, “Geekin”, and “Trauma”. He is currently on tour with Ski Mask The Slump God and was a good friend to late XXXTentacion. As of 2019, Danny Towers net worth is estimated to be $300,000. Danny was born on April 17, […]

Quin NFN Net Worth: How Much Money Does the Rapper Make?

Quin NFN Net Worth: How Much Money Does the Rapper Make?

Quin NFN is an emerging American rapper who has released songs such as “Talkin’ My Shit” and “Gametime Pt. 2”. He was born on January 18, 2001, in Austin, Texas, United States. As of 2019, Quin NFN net worth is estimated to be $200,000. Though Austin has been the home of some big stars in […]

Travis Hollman Net Worth- How Rich Is Stephanie Hollman’s Husband?

Travis Hollman Net Worth- How Rich Is Stephanie Hollman’s Husband?

Travis Hollman is a Businessman, innovator, and philanthropist. He is currently the President and CEO of Hollman Inc. which is a well-known company working on making sports, fitness, and office lockers. As of 2019, Travis Hollman net worth is estimated to be $20 million. His father had initially founded the company and formed the base […]

Trending