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?

  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

Tips & Tricks

Echo custom fields in any category

Published

on

Here is a neat trick. Say you want to show a custom field in you post or in a certain categories post. There is a simple code you need to write in order to accomplish this:

<?php $image = get_post_meta($post->ID, "image", $single = true); ?>
<?php if($image != '') : if(in_category(7)) { echo ''; } else { ?>
<img src="<?php echo $image ?>" alt="<?php the_title(); ?>" /></a>

In the example above I am calling the variable $image and telling the server that it equals the value of “image” inside get_post_meta or “custom field” of the current post.

Then we are asking if that variable $image doesn’t equal nothing or != and if it is in the category id of 7, echo what ever is in the single quotes (which is nothing in this example), otherwise show the <img> and the value inside “image” which should be the location of the image.

Update: Thanks to Austin from PressedWords for pointing out his trick, from the comment below.

Continue Reading

Tips & Tricks

Disable caching of your site or post

Published

on

I talked about Disabling search engine on search pages in a previous post using the meta tag. Today lets go over the web bots Cached copy of your site. If you are working on builder your blog, or have a temporary site up, use the following code:

<meta name="robots" content="noarchive">

This will tell any bot to follow your site, index it, but prevents a cached copy of this page from being available in the search results.

Continue Reading

Tips & Tricks

Disable search engine on search pages

Published

on

A good idea when trying to get the most out of your blog is usging the meta tag to tell the web bots to search & index your site. But for good SEO you should apply this code in your header.php file of your WordPress blog.

<?php if(is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php }?>

This will keep your site from getting a hit from bots over duplicate entries. 🙂

Continue Reading

Random Search Terms

Title

Top Articles

Top Searches

powered by WassUp

Recent Posts: Fully Net Worth . com

Lil Keed Net Worth: How Rich is the Rapper Actually?

Lil Keed Net Worth: How Rich is the Rapper Actually?

Raqhid Jevon Render is an American rapper and songwriter. He is best known for his songs such as “Nameless” and has risen the ranks from his neighborhood in Atlanta into an emerging star in the world of rap. Currently, Lil Keed has a contract with Young Thug’s YSL Records and 300 Entertainment. As of 2019, […]

Blippi Net Worth: How Much Money Blippi Makes from YouTube?

Blippi Net Worth: How Much Money Blippi Makes from YouTube?

Stevin John, who is better known by his alias as Blippi, is an American children’s educator who is popular on Youtube for his entertaining yet at the same time very well informing educational videos. As of 2019, Blippi net worth is estimated to be $25 million. He covers an array of topics for children to […]

Ashton Pienaar Net Worth: How Rich is the Below Deck Star?

Ashton Pienaar Net Worth: How Rich is the Below Deck Star?

Ashton Pienaar is a South African yacht deckhand and television personality best known for appearing on the television show “Below Deck”. As of 2019, Ashton Pienaar net worth is estimated to be $500,000. Ashton was born on June 16, 1989, in Johannesburg, South Africa. Unfortunately, we have no wide range of information regarding his early […]

Trending

%d bloggers like this: