Avoid trouble with filter and the_content in WordPress

One problem i just came across while working on my WordPress plugin that many might not know is the danger of making mistakes on filter and the_content action hook. The importance of 'the_content' action hook and where this particular small sentence will affect your overall WordPress and caused it to malfunction if WordPress plugin developer used it carelessly (scary stuff). In this article, i will show you some of the mistake i made and what are the consequences in screen shot to inform WordPress plugin developers what will happen to WordPress when this two is being used wrongly.

What is 'the_content and filter?

In case you don't know what is filter and the_content action hook, filter is used in WordPress to filter the data between WordPress and its database. Short to say, you can manipulate the data retrieved from WordPress database before it shows out. The 'the_content' action hook is used to tell WordPress to print the content of the post, short to say, i am trying to manipulate the data from WordPress before displaying out to the end-user.

Problem

i have a test site which use to debug and test my plugin in a test environment before implementing it on the LIVE site. Everything goes well on the TEST since there is only one plugin but problem came when there are more than one plugin which hell can happen, not only deal to naming or method contradiction but some other unknown problem can occurred. One of the very rarely unforeseen problem is the filter and 'the_content' action hook problem. By the way, I am using WordPress v2.8 for testing.

Consequences

Many might not know what will 'the_content' affect the internal and external of WordPress (Many might aware of the external consequences but not the internal ones). Let's take a look at one of my plugin tester site (http://1sitedaily.com) who reported these problems to me. In the post page, she was typing the post and this particular red thing came out of no where!
unidentify-red-bar-wp

This red post was either the previous post or the current post! It was caused by the use of 'the_content' action hook imappropriately (imagine how irritating will it be for the user). Once she clicked save as draft or worst when it suddenly auto save as draft and empty page is return!

post-save-draft-empty

Although the page was saved, this is not acceptable! Internally, this is what will happen to the Administration panel when 'the_content' action hook is not being used appropriately. Nonetheless, if this method is not used appropriately for the external part, the content might not even be showing!

missing-front-panel-content

This has missing content on the front page.

missing-sing-page-content

Same post with missing content on single page.

What happen?

So what really happen there? It is actually quite a silly mistake make by developers with PHP (even me) that usually forgotten by them when writing for a open source application. Deep in our mind, we think this is a new language with all the rule define by WordPress but its actually just PHP.The external mistakes was,

function article_example($content)
{
	if($content != "")
	{
		echo $content;
	}
	else
	{
		echo "NOTHING FOUND";
	}
}
add_filter('the_content', 'article_example');

Nothing seems wrong here, right? It will print out the relevant codes instructed on the template. But this is where the problem comes internally. Since filter event handler is also attached in the administration panel, anything that trigger 'the_content' in the administration panel will result in the above function execution (this means post page also uses 'the_content' to output the display we see on the editor). So, the red box appeared in WordPress was due to Ajax function being executed behind WordPress to save as draft and the function above was executed which duplicated a content out of the post. When the 'save as draft' button was clicked, a empty page (or any other words in the page which does not return the user back to the post page) was returned because the above function was executed and the echo statement was called. In PHP, during any execution or redirection was occurring, and echo statement will stop the page from redirecting. That is the main reason why the post page was not shown and other page appeared in front of the user.

The internal mistakes are something like this,

function article_example($content)
{
	$content = "The content contains: ".$content;
}
add_filter('the_content', 'article_example');

which the developers forgotten to output or return the correct value back to WordPress. The other thing that might occurs will be semantic errors or logic error.

Correct way of displaying filter and 'the_content'

Save yourself some time, in WordPress to echo a statement when using the filter statement ALWAYS use return,

function article_example($content)
{
	return "The content contains: ".$content;
}
 add_filter('the_content', 'article_example');

returning the value using filter will also resulting the display of the modified content! No problem will occurs like the above one when using return instead of echo although it also do the job!

Tutorial: How to get post id when using publish_post action hook in WordPress

This topic may seems stupid to some plugin developers but it may really surprise you. Most of you will just say, "Hey, just use the WordPress global variable, $post. Issue solved!". Yes, it is stated as global variable across WordPress developers and it should be globally available. Surprisingly, IT IS NOT~. I spend hours researching for an answer which are not document anywhere and finally decided to write a post to inform some plugin developer who are still unaware of such condition.

Problem

I wanted to attached a function to an event, publish_post whenever the user click on publish or update button when they have done with their post in WordPress. Usually, global variable $post will solve this problem easily. But for the case of publish_post action hook, this is not the case. The global variable $post which is accessible in any area of WordPress is not accessible when a user clicked on the publish button. The global variable $post will return 'null' instead of the post object which contain all the post data. Let the nightmare began.

Solution

Usually, we will see this on top of the post,

url-wordpress

The URL of the post page contains the post ID! So the smart alex me try to be funny and use a $_GET['post'] to try retrieve the post id after i have failed miserably on the global variable, $post upon user clicked on publish button. With hope, it fail again. So i was thinking, maybe there exist some post data instead of a get data. So i try to use $_POST['post'] to retrieve the post id. Fail (expected). Since i am using a function to tried all these methods (post,get, global variable) as shown below,

function example()
{
global $wpdb;
global $post;
echo var_dump($post)."<br />";
echo $_POST['post']."<br />";
echo $_GET['post']."<br />";
}
add_action('publish_post', 'example');

There might be a problem retrieving global variable in my function so i try doing it outside the method as shown below,

global $post;
echo var_dump($post)."<br />";
echo $_POST['post']."<br />";
echo $_GET['post']."<br />";

function example()
{
global $wpdb;
global $post;
echo var_dump($post)."<br />";
echo $_POST['post']."<br />";
echo $_GET['post']."<br />";
}
add_action('publish_post', 'example');

It still fail! Nightmare. If you look at WordPress Plugin API, on the publish_post description it state this,

Runs when a post is published, or if it is edited and its status is "published". Action function arguments: post ID.

Action function arguments: post ID? Looks like using this action hook required a function argument post ID. So i tried this instead.

function example($post_ID)
{
global $post;
echo $post_ID."<br />";
echo var_dump($post)."<br />";
echo $_POST['post']."<br />";
echo $_GET['post']."<br />";
}
add_action('publish_post', 'example');

Surprisingly, i got it! The ID is retrieved this way! No global variable available if you are using publish_post action hook!

Conclusion

I believe the reason why the global variable,$post  is not available during publish_post action hook was because the details of the post has been updated by the user and the information in the global variable are not updated. Thus, only the ID is available in the global variable if there is one. So to avoid unnecessary usage of memory, the global variable, $post was not created instead. The WordPress version for this was 2.8. Hope this help out a bit.

Tutorial: How to add action to excerpt in WordPress

In case some of you don't know what the title of this post means, it has to do with building plugin for WordPress. Let me explain  a little on what does an action means in WordPress. Basically, we can add a function to an action or event (whatever you called it) in WordPress to perform some task before or after the action or event has occured.

Problem

The reason why i bought this post up was because i nearly get frustrated working on my WordPress plugin because there wasn't any action listed in WordPress plugin API that stated an action that can be attached to an event before or after an excerpt is being bought out! Search all over the place, fail. So i decided to do a trial and guess with these action thing for my plugin to attached an event when an excerpt is being bought out.

Solution

In case you might not aware how a excerpt is being printed out on the template, they used


the_excerpt();

This will print out the excerpt in your WordPress. So i tried using the_excerpt to be placed into my WordPress add_action statement as shown below,


add_action('the_excerpt', 'hpt_attach_excerpt');

'hpt_attach_excerpt' is the function call when excerpt is being triggered. To my surprise, it work! But it will only display whatever the function, 'hpt_attach_excerpt' contains as shown below. no_exerpt_attached

So where is my regular excerpt? It seems like if i attached a defined action used in WordPress that are not listed in the WordPress Plugin API, it will be overwritten by my own method 'hpt_attach_excerpt'. I digged again to find the method in WordPress site that will provide me with the missing excerpt i was looking for. Fail. So i digged into the source code of WordPress and managed to find the key method that return the excerpt of a post, get_the_excerpt(). get_the_excerpt() is the based method that retrieve the data from the database to the_excerpt for it to filter.  Now i write the code as follow,


function hpt_attach_excerpt()
{
echo "This is the function 'hpt_attach_excerpt' produce";
echo get_the_excerpt();
}
add_action('the_excerpt', 'hpt_attach_excerpt');

Looking back to the display to check whether the attachment has completed.

found-excerpt-attached

There it is! Both my function message and my excerpt message!

P.S: You can use add_filter if you do not wish to overwrite the default function of 'the_excerpt' function.

Conclusion

If you have read through the post, you might aware that this is not only restricted to adding action for excerpt. This shows that we can add any WordPress function that are not defined in WordPress Plugin API (Offical action available) as action and rewrite or append any type of instruction to the default action given by WordPress. Can't find your action needed to perform your WordPress plugin? You just found the answer! Hope this can help many developers who are working on their plugin! ( Thanks for all the wonderful plugin developed! )

WordPress Database Design

Recently i have been working on WordPress plugin and related stuff a lot. There are times when i come across problems with the database of WordPress that required me to check or modify data in the table. However, i couldn't seems to find the correct source for the official WordPress database design which can really help understand a lot of the overall architecture practice of this open source application. But today i manage to find it and would like to share with people out there who can't find it because of various reason (Google fail you).

wordpress-database-design

You can find the most updated version on the WordPress official database design page (the reason why it cannot be found on search engine is because the title of the page is some weird name of the picture)

Tutorial: How to optimize wordpress plugin for SEO

This tutorial demonstrate a simple way to optimize your wordpress plugin for SEO purposes. It is always better to optimize some of your plugin if they are not doing their job properly.

What plugin required to optimize?

As we all know that the most important things should be placed on the header of the page. If our plugin place a script or a style on the header, it is important to bring them down so that search engine don't look at them as important. The most appropriate place is on the footer where the search engine spider prioritize the lowest among other section. ( unless you place your side bar below footer, footer usually is placed as lowest priority).

Identifying wordpress plugin that are not optimize

Identifying wordpress plugin that are not optimized for SEO can be both easy and difficult. If the plugin provided clues for your changes, it will be easily known which plugin has caused this mistake. However, if the instruction have no inserted any code to identify which plugin does the instruction belong, it will be more tricky than usual. In order to do this, i have illustrate it below.

1. Go to your website and right click on your page. Select view source to look at the source of your page to identify any unnecessary instruction that you do not want the search engine spider to see first.

right click image
right click image
source code
source code

2. notice that the source code i have provided above has a style tag with all its style in it? This is the plugin that should be updated to optimize for SEO. In the style tag, there are classes that indicate that it is from addtoany, with this i can identify that the plugin is "Add to Any: Share/Save/Bookmark Button".

How to optimize my wordpress plugin?

Optimizing your wordpres plugin for SEO is not that difficult. We just have to instruct the affected plugin to list those script or style to the footer as wordpress has provided a method wp_footer while your plugin most probability is using wp_head which caused it to place those unnecessary instruction on the header instead. After we identify our plugin, it is time to move those style sheet to the footer!

3. Go to your wordpress control panel and select plugin->editor->Add to Any: Share/Save/Bookmark Button

editor in wordpress image
editor in wordpress image

4. press Ctrl-F or edit->find in your browser and search for the word wp_head

search wp_head
search wp_head

5. change the found wp_head to wp_footer and click update

update file
update file

6. search for any other wp_head and change them all to wp_footer if necessary.

7. look at your home page source code again and it should have disappeared and went down to footer.

result of optimization
result of optimization

Note

There are things to take note about when trying to do the above steps. For all style it can be placed on the footer with no problem. However, for those javascript, please check properly before placing javascript or <script> tag to the bottom of the page as it will cause problem for some of the plugin since the methods are being called in the body before your scripts have imported into the page. Therefore, it cannot find those javascript methods if it is placed on the bottom. So we must check that the script has been imported before calling it within the body tag if we want to move the script tag to the bottom of the page.