For example, if you have written a plugin that has a settings page, and that settings page requires a custom jquery script to be loaded, you should always ensure that the custom jquery script is only loaded when the settings page is displayed, not on every other page of the WordPress admin as well.

There are a couple of ways that you can limit which pages your scripts get loaded on, but by far the best method is to do it the way that WordPress intended

If you wanted to enable jQuery UI in the WordPress admin, you’d do it like this:

1
2
3
4
5
6
7
8

function load_ui_script() {
	wp_enqueue_script('jquery-ui.min', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js', false, '1.4', 'all');
}
function load_ui_style() {
	wp_enqueue_style('jquery-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css', false, '1.8', 'all');
}
add_action('admin_print_scripts', 'load_ui_script');
add_action('admin_print_styles', 'load_ui_style');

This works very well, but is not a good idea because if any other plugins (or the active theme) also load jQuery UI in the admin, there are likely to be conflicts.

So let’s say that you are trying to load jQuery-UI on only the post edit screen; you can do it like this:

1
2
3
4
5
6
7
8

function load_ui_script() {
	wp_enqueue_script('jquery-ui.min', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js', false, '1.4', 'all');
}
function load_ui_style() {
	wp_enqueue_style('jquery-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css', false, '1.8', 'all');
}
add_action('admin_print_scripts-edit.php', 'load_ui_script');
add_action('admin_print_styles-edit.php', 'load_ui_style');

Notice the -edit.php ? That tells WordPress to only activate the script on the edit post page. You can use any page slug there. So, for example, in my Easy Content Types plugin, I used the following to add jQuery UI to the new post screen, the post edit screen, and the new custom post type screen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function ecpt_datepicker_ui_scripts() {
	wp_enqueue_script('jquery-ui.min', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js', false, '1.4', 'all');
}
function ecpt_datepicker_ui_style() {
	wp_enqueue_style('jquery-ui-css', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css', false, '1.8', 'all');
}
// load all the scripts
 
add_action('admin_print_scripts-post.php', 'ecpt_datepicker_ui_scripts');
add_action('admin_print_scripts-edit.php', 'ecpt_datepicker_ui_scripts');
add_action('admin_print_scripts-post-new.php', 'ecpt_datepicker_ui_scripts');
add_action('admin_print_styles-post.php', 'ecpt_datepicker_ui_style');
add_action('admin_print_styles-post.php', 'ecpt_datepicker_ui_style');
add_action('admin_print_styles-post-new.php', 'ecpt_datepicker_ui_style');
add_action('admin_head', 'ecpt_datepicker');

You can also use this same method to load scripts on your custom plugin / theme settings pages.

Hope this helps.

Related Posts

• Font Size Controller with jQuery Thu 24 Feb 2011
• Sugar Slider – WordPress Sliders Manager Sun 06 Feb 2011
• jQuery Tricks for Developers Trying to Satisfy Designers Mon 15 Nov 2010

The first step is to set up your HTML structure:

1
2
3
4
5
6

<div class="image-wrap">
	<div class="image-thumb">
		<img src="path/to/your/image.jpg">
	</div>
        <div class="image-shadow"></div>
</div>

Next, some basic CSS:

1
2
3
4
5
6
7

.image-wrap { position:relative; }
.image-thumb {
	height:180px; /*set this to the size of your image*/
	width:280px; /*set this to the size of your image*/
	z-index: 1;
	position: relative;
}

The next step is a little more complex and utilizes the :before and :after pseudo selectors to allow us to do super cool stuff

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.thumb-shadow	{
	position: absolute;
	top: 0;
	left: 0;
	height:180px; /*this must be the same as declared above*/
	width:280px; /*this must be the same as declared above*/
	z-index: 0;
}
/*shadow*/
.image-shadow:after {
	content: '';
	position: absolute;
	background: #828282;
	width: 98%;
	height: 4px;
	bottom:3px;
	right: 2px;
	z-index: -1;
	-webkit-transform: rotate(2deg);
	box-shadow: 0 2px 5px #828282;
}
.image-shadow:before {
	content: '';
	position: absolute;
	background: #828282;
	width: 95%;
	height: 4px;
	bottom:3px;
	left: 2px;
	z-index: -1;
	-webkit-transform: rotate(-2deg);
	box-shadow: 0 2px 5px #828282;
}
/*end shadow*/

What we have done created two gray “stripes” that are slightly blurred, and then rotated them slightly to give the impression of a curved shadow. Pretty cool, huh?

This is a pretty simple application of this technique, and you could go much further and create more intricate shadows if you wanted.

Related Posts

• Freebie - CSS 3 Drop Down Menus Tue 22 Jun 2010

Luckily, there’s an easy fix to the above scenario.

All of the query parameters passed by WordPress are stored in a global variable called $query_string. So, let’s say you have a query like this:

1

query_posts('cat=5&posts_per_page=6');

If that’s in an archive loop, the archive will break, so, to fix it, do this instead:

1
2

global $query_string;
query_posts('cat=5&posts_per_page=6&' . $query_string);

This will cause query_posts() to recognize all of the parameters passed from WordPress, as well as all of those you have chosen to pass manually.

Hope this helps!

Related Posts

http://site.com/blog/blog/page/2?s=searchphrase

when it should have been:

http://site.com/blog/page/2?s=searchphrase

Notice the second “blog” in there?

Finally, I tried reverting back to the default search form by removing searchform.php from my theme directory. There! I found it. The problem was fixed. But I really needed and wanted my custom searchform.php. So what was the problem?

Well, looking at the Codex entry for get_search_form(), I saw that the default search form layout was:

1
2
3
4
5
6

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

and mine was:

1
2
3
4
5
6

<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

See the problem? It’s not obvious, but the problem is caused by bloginfo(‘url’); being used for the action=”" parameter of the FORM tag, instead of echo home_url();.

I am not exactly sure why bloginfo(‘url’) is different from echo home_url(); because they both display exactly the same thing. But it does fix the problem.

Hopefully this will solve someone else’s trouble before you spend hours and hours on it as I did.

Related Posts

1
2

$category_id = 12; //replace with your category ID
echo get_cat_name($category_id);

This is particular useful in cases, such as them option panels, where a user has enter ID numbers of categories, and you need to get the name of those categories.

Related Posts

Using the wp_get_attachment_image_src() function, we can obtain the URL of whatever image size we want:

1
2
3
4
5

// store the image URL in an array
$image = wp_get_attachment_image_src( get_post_thumbnail_id(  $post->ID ), "thumbnail-size" );
 
// output the URL
echo $image[0];

You can choose to display whatever size of image you want by altering the “thumbnail-size” parameter. It can be any size you have declared in your functions.php with add_image_size(), or it can be an array, like this:

1

$image = wp_get_attachment_image_src( get_post_thumbnail_id(  $post->ID ), array(400, 350 true) );

Related Posts

This is a really simple, and by no means a fully polished method of building a font size controller. Depending on your requirements though, this may work as perfectly for you as it did for me.

First, layout some basic HTML:

1
2
3
4
5

<ul>
    <li><a href="#" id="small">A </a></li>
    <li><a href="#" id="medium">B </a></li>
    <li><a href="#" id="large">C</a></li>
</ul>

Our controller now looks something like this:

A B C

Then some basic CSS:

1
2
3
4
5
6
7
8
9
10
11
12

#small	{
	font-weight: bold;
	font-size: 16px;
}
#medium	{
	font-weight: bold;
	font-size: 19px;
}
#large	{
	font-weight: bold;
	font-size: 22px;
}

Lastly, we add a little jQuery to make the magic happen.

1
2
3
4
5
6
7
8
9

$j('#small').click(function() {
	$j('body p').css('fontSize', '12px');
});
$j('#medium').click(function() {
	$j('body p').css('fontSize', '14px');
});
$j('#large').click(function() {
	$j('body p').css('fontSize', '18px');
});

Now, whenever any of the font size controls are clicked in our controller, all of the Paragraph tabs on our site will have their font changed to the specified pixel size. Simple, yet effective.

Related Posts

• Add Scripts and Styles to Specific Admin Pages Only Thu 30 Jun 2011
• Give Away: 3 Free Copies of Font Uploader for WordPress Mon 02 May 2011
• Sugar Slider – WordPress Sliders Manager Sun 06 Feb 2011

I need those columns to be the same height. ALWAYS

I only want that arrow there when there’s a sub menu

Every browser must be supported, including IE 6! For ALL effects!

The list of common demands goes on and on (makes you kind of wish everyone used green text-only consoles still . . . ).

This post is a list of jQuery tools for developers trying to appease their designer overlords.

Use Your Own Image Bullets

This simple snippet will let you use whatever you want, such as text or images for list bullets.

1
2
3
4

$(document).ready(function() {
   $("ul").addClass("Replaced");
   $("ul > li").prepend("‒ "); // use dashes for bullets
});

If you wanted to use an image, you could use this instead:

1
2
3
4

$(document).ready(function() {
   $("ul").addClass("Replaced");
   $("ul > li").prepend("<img src='path-to-your-image'/>"); // use a custom image
});

Then just make sure you have a class like this

1

 ul.Replaced { list-style : none; }

to remove the default bullets.

Cross Browser Opacity

Making an element transparent can be accomplished using only CSS, but requires about five lines of code. With jQuery, we can achieve transparency with just one line:

1

$(".element").css("opacity", 0.5);

Text-Shadows in IE

CSS 3 brought us the wonderful text-shadow property, but, as usual, it’s not supported in IE. So, if your designer insists that text shadows must be present in IE as well, then you can use this nifty little plugin from Kilian Valkhof.

To enable text-shadows in IE, your code looks like this:

1
2
3
4
5
6
7

$(.element).textShadow({
	color:   "#000",
	xoffset: "5px",
	yoffset: "5px",
	radius:  "5px",
	opacity: "50"
});

jQuery Text Shadows (137)

Make Columns Equal Heights

If you’re working with a multi-column layout, it can be extremely useful to make those automatically resize so that their heights are matched.

The jQuery looks like this:

1

$(".columns").equalHeights(100,300); // Min height of 100. Max height of 300

This will set any element of the class “columns” to a minimum height of 100 pixels, and a maximum height of 300 pixels. If the content causes an element to grow larger than 300 pixels, a scrollbar will be added.

You can check out the plugin page at CSS Newbie or download directly below:

jQuery Equal Heights (133)

Add Arrows to LIs with Nested ULs

If you’ve ever made a multi-level drop down menu in something like WordPress where all the ULs and LIs are generated for you, you’ll know that it can be very difficult to add such simple effects as arrow indicators to all the LIs that contain a nested UL, without also giving arrows to the LIs without ULs.

This simple jQuery trick, demonstrated to me by Michael Martin, will automatically add a special “has-sub-menu” class to all your LI’s with nested ULs.

1

$j('.menu > li > ul').parent().addClass('has-sub-menu');

Then you just style accordingly:

1
2
3

.menu > li.has-sub-menu	{
	background: url('../images/triangle.png') no-repeat 80px 20px;
}

If you have a multi-leveled menu, with say a sub menu within a sub menu, you can us this to add a different triangle to the 2nd level sub menu:

1

$j('.menu li ul li ul').parent().addClass('sub-sub-menu');

Add Pseudo Selector Support to IE

Pseudo selectors in CSS are one of a developers best friends, except when IE gets involved. So, in order to rectify that small grievance, you can use the SuperSelectors jQuery plugin to add support for pseudo selectors to IE. And it can be used like this:

1

$(document).superSelectify();

That will give support for all pseudo selectors, using special class names. Read more about it on Skull Jackpot.

That’s it for now, enjoy!

Related Posts

• Add Scripts and Styles to Specific Admin Pages Only Thu 30 Jun 2011
• Font Size Controller with jQuery Thu 24 Feb 2011
• Sugar Slider – WordPress Sliders Manager Sun 06 Feb 2011

1

wp_list_pages('child_of=10');

where 10 is the page ID, you have probably run into the problem of how to prevent this from breaking if the ID of the page ever changes, but the name is kept the same.

Well with this function, you can do this:

1
2

$page_id = wt_get_ID_by_page_name('PageName');
wp_list_pages('child_of=' . $page_ID);

All you need to do is paste the function in your functions.php:

1
2
3
4
5
6

function wt_get_ID_by_page_name($page_name)
{
	global $wpdb;
	$page_name_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_name = '".$page_name."'");
	return $page_name_id;
}

Related Posts

• Wordpress CMS Tips and Tricks - Part 3 Wed 19 May 2010
• Check if Current Page is in Tree Wed 08 Sep 2010
• Quick Tip: Remove right margin from column post layout with php Sat 08 May 2010

1

add_action('publish_post', 'the_function_to_perform');

This works great, but with one, major problem: it doesn’t work for custom post types.

While working on an update to my WordPress Announcements plugin, I ran into a problem because publish_post did not work for my custom post type. After several hours of digging, I came across this: {$new_status}_{$post->post_type}, and it did exactly what I wanted it to do: perform an action every time a certain custom post type is published.

It works like this:

1

add_action('publish_custom_post_type_name', 'function_to_perform');

where “custom_post_type_name” is the name of your custom post type. So if you have a post type of “music”, your hook would like this:

1

add_action('publish_music', 'function_to_perform');

Perfect!

This allowed me to do exactly what I needed to do for my plugin update. So what is this update? Well, I’m not going to come straight out and tell you, except to say that it has to do with really cool announcement notifications. You should check out the WordPress Announcements plugin, and follow me on Twitter to stay informed about the update coming any day now.

Update

Recently, I also found that you can use the action hooks like this:

1
2
3

add_action('new_to_publish_{custom_post_type_name}', 'function_to_perform');
add_action('draft_to_publish_{custom_post_type_name}', 'function_to_perform');
add_action('pending_to_publish_{custom_post_type_name}', 'function_to_perform');

The combination of these three hooks will allow you to run a task only the first time the custom post type is published, and not every time it is updated as well.

Related Posts

• Email Notifications for WordPress Announcements Wed 06 Oct 2010
• Premium WordPress Announcements Plugin Sat 17 Jul 2010
• Better Related Posts Widget Sat 06 Aug 2011