bavotasan.com » Function

Run a Shortcode Anywhere in WordPress

c.bavota — Thu, 07 Jul 2011 19:12:11 +0000

WordPress shortcodes are macro codes that allow you to perform certain actions within the post content. By default they only display on single post pages within the post content. The most commonly used one is probably the gallery shortcode which looks like this:

[gallery]

Including that in your post content will display the post’s gallery on the front end. But what if you also wanted to display your shortcode on a category page, or on any page template for that matter? That’s pretty simple thanks to an awesome function called get_shortcode_regex.

Using get_shortcode_regex we can easily put together a code snippet that will check your post content for any specific shortcode:

$pattern = get_shortcode_regex();
preg_match('/'.$pattern.'/s', $post->post_content, $matches);
if (is_array($matches) && $matches[2] == 'the_shortcode_name') {
   // do something
}

If you include the above function within the WordPress loop on a category page, it will search through the post content for a shortcode called “the_shortcode_name”. If it finds it, it will store the shortcode in the $matches variable. Now you can actually run the shortcode by making one small modification:

$pattern = get_shortcode_regex();
preg_match('/'.$pattern.'/s', $post->post_content, $matches);
if (is_array($matches) && $matches[2] == 'the_shortcode_name') {
   $shortcode = $matches[0];
   echo do_shortcode($shortcode);
}

That will find the shortcode (if it’s included in the post content) and it will run it. Include that within the WordPress loop on any page template and you can display the shortcode anywhere you want.

is_child() Conditional Function for WordPress

c.bavota — Sat, 23 Apr 2011 20:15:04 +0000

I wrote a little function a while back to Check if a Page is a Child of Another Page in WordPress called is_child(). It used the page ID to return a true or false value dependent on if the current page was a child of the parent page specified. I have recently made a little change so that the function could now accept either a page ID or slug.

Here it is again with the changes:

function is_child($page_id_or_slug) { 
	global $post; 
	if(!is_int($page_id_or_slug)) {
		$page = get_page_by_path($page_id_or_slug);
		$page_id_or_slug = $page->ID;
	} 
	if(is_page() && $post->post_parent == $page_id_or_slug ) {
       		return true;
	} else { 
       		return false; 
	}
}

The modification was inspired by Helpful Page Functions for WordPress.

Helpful Page Functions for WordPress

c.bavota — Wed, 13 Apr 2011 17:55:10 +0000

Over the past month I have been working on a large project that has taken up a lot of my time, but I wanted to quickly share two small functions that helped me. The first will display the content of a page by passing the page ID. Add the following code to your functions.php file:

function get_page_content($page_id) {
	$page_data = get_page($page_id); 
	$content = apply_filters('the_content', $page_data->post_content);
	return $content; 
}

If your page ID is “15″, you can now use the following code to display its content:

echo get_page_content(15);

The second function will return the page ID based on the slug. Add the following code to your functions.php file:

function get_page_id($page_slug) {
    $page = get_page_by_path($page_slug);
    if(!empty($page)) {
        return $page->ID;
    }
}

Now the following snippet will store the page ID in a variable called $page_id:

$page_id = get_page_id("about-me");

You could even use the two functions together:

echo get_page_content(get_page_id("about-me"));

Or you could modify the first function to use the page slug instead of the page ID:

function get_page_content($page_slug) {
	$page = get_page_by_path($page_slug);
	$page_data = get_page($page->ID); 
	$content = apply_filters('the_content', $page_data->post_content);
	return $content; 
}

Now you could use this to display your content:

echo get_page_content("about-me");

You could even take it a step further and make the function take either an ID or a page slug:

function get_page_content($page_id_or_slug) {
	if(!is_int($page_id_or_slug)) {
		$page = get_page_by_path($page_id_or_slug);
		$page_id_or_slug = $page->ID;
	} 
	$page_data = get_page($page_id_or_slug); 
	$content = apply_filters('the_content', $page_data->post_content);
	return $content; 
}

Now the following will both give the same result:

echo get_page_content("about-me");
echo get_page_content(15);

Use jQuery to Replace a Word with a Link

c.bavota — Mon, 09 Aug 2010 20:54:46 +0000

If you use a word multiple times on your site and you don’t feel like going through all your posts to replace every instance of it, you can use jQuery to search your page and do the replacing for you. I wanted to replace a word throughout an entire site with a link and all it took was a small piece of code.

If you don’t already have jQuery loaded into your page, include this before your closing .

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'>script>

That will load up jQuery from Google.

Now you just need to include this in your site’s footer, before the closing . (Why in the footer? Because including your JavaScript after all of your code is the efficient way to do it.)

<script type="text/javascript">
(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/jQuery/ig, 'jQuery')); 
})(jQuery)
script>

Since jQuery doesn’t have a core function for replacing text, we will use the JavaScript replace() function. The i after the slash makes the search and replace case-insensitive, and the g makes it global.

I have the script working on this page to replace every instance of the word jQuery with a link to the jQuery Web site.

Using Ajax with WordPress

c.bavota — Mon, 02 Aug 2010 18:53:53 +0000

A little while back, I updated Magazine Basic and added the Ajax save function. When I uploaded it to WordPress to await approval, I received some feedback on how I could incorporate Ajax using the admin-ajax.php file instead of the sloppy way I had it coded. All of the core Ajax functions in WordPress rely on admin-ajax.php and using it for custom scripts is extremely easy to implement.

Let’s take a look at all the pieces you need to get it working. In this example I will build a small mailing list function that will send out an email to the admin when a person clicks submit.

Here’s our form:


	
	
	 admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" />

Here’s the jQuery:

jQuery(document).ready(function(){
	jQuery("#mailinglist").submit(function()	{
		if(jQuery("#mailinglistemail").val()=="") {
			jQuery("#mailinglist #message").text("Please enter your email address.");
			return false;
		} else {
			var email = jQuery('#mailinglistemail').val();
			if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
				jQuery("#mailinglist #message").text("Please enter a valid email address.");
				return false;
			} else {
				var data = {
					action: 'join_mailinglist',
					email: email
				};
				jQuery("#mailinglistsubmit").hide();
				jQuery(".ajaxsave").show();
				jQuery.post("", data,
				function(response){
					jQuery(".ajaxsave").hide();
					jQuery("#mailinglistsubmit").show();
					jQuery("#mailinglist #message").html(response);
				});		
				return false;
			}
		} 
 
	});
});

Let me explain each part.

When a user clicks submit, we need to check that the email field is not empty. If it is empty, we let the user know by sending the “Please enter your email address.” message and we stop the form from being submitted by including the return false; line.

if(jQuery("#mailinglistemail").val()=="") {
	jQuery("#mailinglist #message").text("Please enter your email address.");
	return false;
}

Next, we’ll do a simple validation to make sure the email address actually contains the @ symbol and a period. If not, send an error message and return false.

var email = jQuery('#mailinglistemail').val();
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
	jQuery("#mailinglist #message").text("Please enter a valid email address.");
	return false;
}

Once all that is done and everything is good, we can submit our form. This is where admin-ajax.php comes into play. When using admin-ajax.php, you need to include an action callback to make it work. Our callback is join_mailinglist. This is going to interact with our PHP to make everything work on the backend. Let’s create a data variable to store our action and our email value.

var data = {
	action: 'join_mailinglist',
	email: email
};

Now we will hide our submit button and have a loader graphic appear to let people know something is going on. Then will will use the jQuery .post function to send everything out to the admin-ajax.php file. Once the function is complete and a response is given, the loader will disappear, the submit button will return and a success message, or error message will indicate what happened.

jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post("", data,
function(response){
	jQuery(".ajaxsave").hide();
	jQuery("#mailinglistsubmit").show();
	jQuery("#mailinglist #message").html(response);
});		
return false;

With the form and the jQuery in place, all we need now is some PHP.

The admin-ajax.php file requires two action filters.

add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

The first action will only work if users are logged in. The second is if users don’t have to be logged in. For our requirements, it should look like this:

add_action('wp_ajax_join_mailinglist', 'join_mailinglist_callback');
add_action('wp_ajax_nopriv_join_mailinglist', 'join_mailinglist_callback');

Here is our join_mailinglist_callback function, which needs to be added to functions.php:

function join_mailinglist_callback() {
	$email = $_POST['email'];
	if(!empty($email)) {
		$yourEmail = 'c@bavotasan.com';
		$subject = 'Add me to your mailing list';
		$success = mail($yourEmail, $subject, $email);
		if(!empty($success)) {
			echo 'Your email is subscribed to our mailing list.';
		} else {
			echo 'There was a problem. Please try again.';
		}
	}
	die();
}

With everything in place, you will get a form that works like the one below.

Shorten Your Post Titles in WordPress

c.bavota — Fri, 16 Jul 2010 15:24:22 +0000

This is not a function that you would need to use often, but I came across a reason to use it recently and I thought it might be a good idea to share it. All it does is limit the number of words in your title, just in case you don’t want it to wrap onto a second line. I used it in the featured slideshow on Magazine Premium since the size of the boxes is fixed.

Include this in your functions.php file between the PHP tags:

function short_title($after = '', $length) {
	$mytitle = explode(' ', get_the_title(), $length);
	if (count($mytitle)>=$length) {
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle). $after;
	} else {
		$mytitle = implode(" ",$mytitle);
	}
	return $mytitle;
}

Then you can use it within the WordPress loop like this:

 echo short_title('...', 8); ?>

If you would rather count by characters instead of just words, you can add this function to your functions.php file instead of the one above:

function short_title($after = null, $length) {
	$mytitle = get_the_title();
	$size = strlen($mytitle);
	if($size>$length) {
		$mytitle = substr($mytitle, 0, $length);
		$mytitle = explode(' ',$mytitle);
		array_pop($mytitle);
		$mytitle = implode(" ",$mytitle).$after;
	}
	return $mytitle;
}

6 Tips to Speed Up jQuery

c.bavota — Tue, 13 Jul 2010 16:10:12 +0000

As it stands, jQuery is an amazingly efficient JavaScript framework, but there are a few things that you can do when creating your code that will end up slowing it down significantly. I’ve noticed that a few small changes to my standard way of using jQuery have made my code run a lot faster.

1. Be More Specific with Selectors

When you are setting up jQuery to search through the DOM for a specific element, the more information you give it, the faster it will find the element. It is also faster to use IDs instead of classes.

Something like this will require going through the whole DOM structure to find the element:

$(".item")

These are way more efficient:

$("#item") // use IDs instead of Classes
$("p.first .item") // be more specific with the location

2. Always Use $(this)

If you are using a selector to traverse the DOM in search of an element to perform a specific function on, that element becomes stored and can be manipulated within the function by using $(this).

This code will traverse the DOM twice to get the same element:

$("#item").click(function() {
  $("#item").addClass('clicked');
});

This is the efficient way since the element is already stored within the $(this) call:

$("#item").click(function() {
  $(this).addClass('clicked');
});

3. Pass Multiple Selectors

If you want the same functions to occur on multiple elements, it is possible to group selectors together to increase performance and avoid repetitive traversing of the DOM.

// bad
$("p#one").fadeIn();
$("p#two").fadeIn();
$("p#three").fadeIn();

// good
$("p#one, p#two, p#three").fadeIn();

4. Use Multiple Properties and Values

Many jQuery methods accept multiple properties and values instead of just a single property and value pair. Including multiple properties will help speeds things up as it reduces the amount of jQuery objects that are created within your code.

// bad
$("img#one").attr('src', 'http://mysite.com/images/image.jpg');
$("img#one").attr('alt', 'My Image');

// good
$("img#one").attr({
  'src': 'http://mysite.com/images/image.jpg',
  'alt': 'My Image'
});

5. Add Styles with Classes or IDs

If you want to add multiple style changes to an element, it make more sense to use CSS to assign your styles to a Class or ID, and then add that Class or ID to the element.

Create your styles: