All posts in Tutorials

Adding A Search Form to WP_List_Table

The WP_List_Table class is very handy but it lacks a few features that many people want to include in their plugin pages: Search. This little snippet is based off the example plugin provided by WordPress. You will see many people in the forums ask why there is no example included with search and that’s becuase there is no one size fits all solution. I think I have a pretty good one that should help most people looking to add search to their table classes. This might not fit everyones needs, but if you used the WordPress example plugin as a basis for your table class it will drop right in.

Step One

The first step is to add the search form to the page your table is on. This is very simple. and WordPress will do most of the work for you. Wrap the generated form code in a form tag, add the page name in a hidden variable so that WordPress knows what page we are on, and your done.

Step Two

Step Two is where things get tricky. As usual you would call tabelclass->prepare_items() but we are going to hack this to allow for a search parameter. The first thing we want to do is check to see if a search term is set, then call our prepare with the search string.

Next, we can add a search variable to the prepare_items() method, and make a simple if statement to filter the data in the table by what the user searched for. First make sure you add the search term to the prepare_items() method: function prepare_items($search = NULL){

Then you can check if a search value is supplied, and return a mySQL search instead of the normal data set:

That’s all you really need to change for basic search. If you are having trouble adding a search box to WP_List_Table this should point you in the right direction. The best part is you can search all of your columns instead of just one, and you do not need to built out complete tables that become bulky and cumbersome. All you need is a few lines of code to add the form to your table pages.

How To Use Social Image Hover Site Wide

I get a lot of questions on it being possible to apply the effect site wide easily with Social Image Hover for WordPress. This is not as easy as you think, if you were to simply enable it on all images you would run into major issues with logo images, button images, and other images on your site that you would not want the effect applied to. And because every theme uses different CSS and DOM structure, there is no easy way even with jQuery.

In version 2.0 of Social Image Hover full site wide support has been added that lets you apply Social Image Hover to images automatically on your site. To do this we will be using the power of jQuery’s selectors. Keep in mind these features are for more advanced users who are familiar with using jQuery.

After you are running v2.0 you will have a new settings page called Site Wide. Enable site wide support and then select which buttons you want to appear in your hovers by checking the box for each button you want to appear. If you just upgraded you will notice 3 new buttons including a close button.

 

Next you will need to pick out your selector. This is going to be different for every single theme most likely, and your site may require a more advanced selector. The default is the selector I used for the WordPress twenty ten theme: “.post img” What this does is tell Social Image Hover to look inside all of our post content divs with the class “post” and all images inside those divs.

Other Selector Examples

  • “img.customClass” – This would look for all images with the class customClass and apply the effect.
  • “div.post img.alignleft” – This will look in post content divs for only image with the alignleft class to apply social hover to.

From there just enter your URLs, Tweet info, etc. and click save. Changes will take affect right away. Alignleft, alignright, and aligncenter are all supported by Social Image Hover and you can also use custom images and site wide images together without them effecting one another!