Frontend Ajax with WordPress

Most likely if you are a theme or plugin developer you will need a way to send AJAX calls to fetch new updates or to create new database records or anything else that may require a hidden backend http call. This post will show you how that is done. Unlike the admin area, frontend ajax in WordPress is on a tricky side. We will design a really basic plugin to learn how this stuff actually works. I am using WordPress 3.6 beta. First Step We will call our plugin "Test Plugin", so lets declare plugin meta comment /wp-content/plugins/test-plugin/test-plugin.php [crayon-58aa287ef11a8270921530/]   Second Step Enqueue our JavaScript File ajax.js. Please note that we will be creating this file in a second. /wp-content/plugins/test-plugin/test-plugin.php (append) [crayon-58aa287ef11c3767161239/]   Couple of points to note above are that, First we are loading our scripts for frontend only thus we are check  if the Dashboard or the administration panel is attempting to be displayed with is_admin() function and Second we are localizing a variable called ajaxurl that we can access globally as text_plugin.ajaxurl To read more on localizing some data please read this Third Step Lets create our ajax.js file, please note that I am creating /wp-content/plugins/test-plugin/ajax.js [crayon-58aa287ef11ce814484828/]   As you can see that this is a really simple jQuery Ajax call. If you want to learn more on jQuery Ajax please read this. The ajaxurl javascript global does not get automatically defined for you on frontend that is why we localized this property to be available to our function in previous step. Fourth Step Ok Don't be judgemental about this one and me being lazy, but to code below should be appended to our test-plugin.php file. /wp-content/plugins/test-plugin/test-plugin.php (append) [crayon-58aa287ef11d9084153335/]   Few things you should know When adding actions such … [Read more...]

WordPress Add extra meta links for your plugin on Installed Plugin page

  Hi Guys, Before you get confused on what I am going to say or write about let me show you a screenshot that is what we will be discussing in this blog post. Alright, So see those Links that appear besides my name Contact me Purchase Pro We are just going to look at how to do those The filter that we need to do this is called plugin_row_meta - that is responsible to handle meta links added to the plugin description on the plugin page. Here is the definition or line of code that you will be including in your plugin file. [crayon-58aa287ef2dff450834308/]   Now we will write our my_plugin_link function as shown below, remember that accepted arguments for our function is 2, First one is array of Links and second is Plugin file Function Now lets check what our filter function looks like [crayon-58aa287ef2e0f467449607/]   And that's pretty much it. Just add a few more links to that $links array and you will see that they will be appended to the plugin meta links that you see on plugins page. I hope that this helps you. Just in case the above mentioned code can be improved, leave your comments Cheers … [Read more...]

WordPress Youtube Channel Embed Plugin – A Pro Edition

Hello, You must have been using the Free edition of this plugin and wanted to upgrade to PRO version, that's what brought you here on this page. PRO version's biggest advantage is personal email support and guaranteed 48-72 hours reply. You get free support for 6 months and free upgrade for 12 months. Plugin name I named this plugin as jcwp youtube channel embed pro, Lets check what this plugin has to offer. Screenshots A screen shot of the Options page   Thumbnails mode Much sharper and clean thumbnails with hover effect.   Lightboxed video when  thumbnail is clicked You have all control on specifying the borders, border colors, overlay color etc. Above is just an example. The real result depends on how you want to make it look. List mode     There are many other options you can control how your videos are displayed. I've intentionally taken out autoplay settings because I think that do not add anything to the usability of the plugin. Options Channel mode This tells the plugin how to render the videos. Thumbnail mode will display static images for your videos and when user clicks on it video lightbox will be shown List|Thumbnails Channel name : This will be the channel name which you wish to include Maximum results Number of videos to display [not supported anymore] Start Index  Pointer from where the videos should be shown. Handy, if you want to show videos from a given position Filter by keyword Look for keyword in the video title and filter the resultsImportant: This has been replaced by filter by Videos Thumbnail width For thumbnail mode Video width Target width of the video Show video title Would you like to include video titles as captions Embed using Either use IFrame  or old object Object embeds. I recommend you to use IFrame Sort by How do you want your videos to be sorted autoPlay: set videos to auto play when in thumbnail mode. Video will auto play once … [Read more...]

WordPress – Using Colorpicker in your plugins

Hello, While I have been working on a new Wordpress plugin, I wanted to use a Color picker, I started my usual lookup on WordPress codex to see how can I go about it. So here are my findings and details on how to use a color picker within your plugin. Most of the information is gathered from wordpress.org Anyway lets get back to the point. These lines of code are taken from my WordPress plugin called Youtube Channel Embed PRO and modified to suit readability. First thing that is required is to correctly include color picker styles and javascript files required as shown below In your plugin code add and action as shown below [crayon-58aa287ef3624202213523/] [crayon-58aa287ef3633677384805/]     Most important part above is to include wp-color-picker dependency to your_javascript_file.js Now we will enqueue our color picker styles as shown below [crayon-58aa287ef3639098770863/] Now that we have our scripts and styles sorted out we can use color picker in your plugin pages now, as shown below [crayon-58aa287ef363f427730740/] [crayon-58aa287ef3644506106182/] As you can see that we are applying jQuery function wpColorPicker() on our input boxes that has class color-picker. And thats pretty much it. You have just converted a normal text box to a color picker. End result will look like this   Dependencies WordPress Color Picker will not work on older version, It will required at least version 3.5.x for you to make use of it. Else you have still use some other color picker solution,  there are heaps of them available for Free. I hope that this post will help you sort your color picker woes. I found it really useful and easy to use. In case I missed a point or 2 please leave your comments to let me know so that others can benefit from it.       … [Read more...]

Creating Shortcodes in WordPress – Beginner Tip

Hey Guys, Well, there are times when you would need this. The need could be as simple as adding two numbers but ShortCodes offers so much flexibility to WordPress that it is right of every blogger to know how to create a shortcode. I know, if you are like me the first thing you will do is to search Google for it and you will be taken to wordpress codex. So right at the end of this post there is a link to official ShortCode API that WordPress provides. The purpose of this post is to make is as simple as it can get. Let get back to the point. I will be creating a short code to add 2 numbers and we will call our new short code function as my_shortcode_adder, and shortcode name as addnumbers I know its not very intuitive but will do the job for us :) First thing that you will need to do is to look for The Theme's functions.php file The most important part of our shortcode creation is the file called functions.php (found in /wp-content/themes/THEME_NAME/functions.php) and it will always be there under your current theme folder. Lets check our function that we will place (append) to functions.php file as shown below [geshi  nums="0"] [crayon-58aa287ef3f5c248799924/]   So we are using a couple of functions above. $atts defines the input that is in form of an array , To set default values for missing attributes and to also eliminate any attributes that are not known or recognized by your shortcode, the API provides a shortcode_atts() function. As you can see above that we are setting defaults for our attributes number1 and number2 to O The most important thing however is that you should not be echo'ing  your output in your shortcode function, you should always return it. Registering Shortcode Just defining the above function is not enough. You should also get it registered with WordPress. This is done by using function add_shortcode  as shown below [geshi  nums="0"] [crayon-58aa287ef3f6c532971814/]   Above can go … [Read more...]

WordPress Force plugin version check

Hi Guys, This is a quick tip on WordPress which I think could be useful if you work with WP. If you've just started to work with plugin development or are looking for a way to force wordpress to check new versions of Plugin then there is an easy way to do it and a bit technical way. Option 1 This is for people who are non technical. All you need to do is to goto http://yourdomain.com/wp-admin/update-core.php Replace yourdomain.com with your site domain name and click on Check Again button as shown below This will do a quick check for updated plugins. Option 2 If  for any reason above does not work and you have access to your mySQL database then running the query below will do the trick for you [crayon-58aa287f0035a434200883/] Deleting this transient won't really break stuff either as far as I've tested but I prefer setting the values to NULL Trick is that Wordpress won't repeatedly hit their website to check for updates rather it does it every few hours. Under_site_transient_update_plugins it store  last_checked:1363755775 which is the timestamp for the last time they checked for any update. So it will count N hours (where N is 12 hours I guess, correct me if I am wrong) from this timestamp before firing another request I hope that this will help you out. Cheers.   … [Read more...]

WordPress How to schedule a post

Hi Guys, Just if you are not aware WordPress by default supports scheduling a post, No plugin is required. You can also publicize your post to Facebook, Twitter, Linkedin, Tumblr and others. Lets check it out how to schedule a new post but before that I would like to make one thing clear that you are not adding this schedule to a cronjob but it is pretty much part of WordPress and you will need some activity on your blog to rely on WordPress scheduler. After I am done writing this post and ready to publish it that's when I can schedule it. Here is what you see at the right hand side of "Add New Post" screen     Now if you want to schedule then click on Edit link besides "Publish immediately" This is what you see   First field is Month, then date, then year and then Time value. Put the desired time and press OKNow you will see that Publish button's text will become Schedule Click that button and now your post is schedule to be published at new time selected by you. You can also make use of publicize feature and post your post publish status to social platforms as I stated before Just click Edit link besides Publicize and allow Wordpress.com to post on your behalf to your social timelines. If just in case you want to publish you scheduled post immediately then you just change the time to something in the past and it should get publish immediately I hope that this helps Cheers,       … [Read more...]

WP Errata plugin

Hello, Sometimes you may want to ask yourself that what if you are able to allow your users are able to send you error corrections from within your post. We have been using comments but sometimes comments are not a great way to pin point where the real problem. With so much room for improvement I am offering this one of its kind plugin that you can use to make parts of your post up for corrections and make them available to your blog readers. It will increase their interaction with your blog post and they will feel better about their contributions. Put it this way, the paragraph below is something that you can temporarily modify and send me your corrected version.   Well I don't want to brag about anything but one thing is sure that I am an Idiot and do so mani radm thingies.   So when you hover on the above element you will get an indication that you are able to interact with the above line and send me a better version of above. An email will be sent to me immediately notifying me with the following URL of the post Old content New modified content If I like the new corrected content then I can just search for old content within the post and replace old content with new one with any required modifications if required. And you are able to thank user about their input. Screenshots The options page is shown below for the plugin   Here is a screenshot for actual usage within the post Recommendation and usage If you want to make part of your post to accept corrections then your content should be directly under container with css class jcedit e.g. I am correctable  Please note that at this point custom styles within the container are not preserved so once user cancels or send a correction any associated styles will be lost for the correctable containers. In other words something like this is not recommended [crayon-58aa287f00977860523730/]   Compatibility This plugin should work … [Read more...]

Automatic WordPress post tagging

Hello, While I was going through some plugins on wordpress site I found a cool one that would help you out with automatically tagging your post based on Title Content Excerpt The plugin is called Automatic Post Tagger This is enormous saving of time and effort when you are manually tagging your posts. Let me show you how this all works Engine Ok so the thing that you want to do with this plugin is to create a list of tags with related words for each of the created tag. Here is a screenshot showing creating a tag screen (Click on the image to view larger image)     Once you set your tags then this plugin will automatically add tags to posts according to the keywords that are found in either of title, content, excerpt. Let me give you an example. you are able add a tag called information and technology to any post if the keywords like PHP, flash, WordPress etc are found in the post. The good thing is that you can set a set number of maximum tags that you want to go with a post. As you can see that you can import and export the tag list without any fuss. There are other useful settings for you to play with. Here is a link to the plugin http://wordpress.org/extend/plugins/automatic-post-tagger/ I would suggest that you should leave the default settings as is because they are pretty much ok. Remember that you can add a tag from Automatic post tagger settings page OR From post page too I hope that you will find this plugin useful. Let others know what you think about it by leaving your comments. If I got a fact wrong in this post please let me know about that. You will find out that automatic tagging can be fun. You just need to configure and know your tags accurately. You are able to remove any tag anytime. I hope this helps Cheers   … [Read more...]

WordPress left right key navigation plugin

Hello, I think I get carried away with few things. While I was working on detecting Arrow keys I wrote a simple jQuery plugin for Page navigation. It could be useful perhaps. More needed to be done like preserving state and ajaxifying it. While still on this note I wrote a Wordpress plugin putting my jQuery plugin to its core. Wordpress plugin is called "jcwp left right key navigation" Here are couple of screenshots as shown below   ScreenShot 1 Screenshot 2   So the Idea of this plugin is that when someone press right arrow key one then a title of next post is picked and shown automatically and when a user press the right arrow key again (twice in a row) then user is taken to a next post. Same applies to the left key pressing. When left arrow key is pressed once then the previous post title is shown to the user and when left arrow key is pressed twice in a row then user is taken to the previous post. To hide the preview press any other key or ESC key. Features Disable the plugin function without uninstalling it. You can put your own text for Next and Previous labels. You can specify if the next and previous post should be picked from same category. You can pick up a theme. RIght now only theme that is supported is "grey"   Where to get it from As you know that because of lack of donations and very heavy bandwidth to some of my stuff I have stopped hosting plugin files on my blog, the other reason was that it was maintenance nightmare when I issue an update to my plugins instead I host them permanently with wordpress now and you can get it from wordpress from the url below http://wordpress.org/extend/plugins/jcwp-left-right-key-navigation Or simple search for "jcwp" Installation 1. Upload unzipped plugin directory to the /wp-content/plugins/ directory 2. Activate the plugin through the 'Plugins' menu in WordPress 3. Use the Plugin Options on left menu under Settings > JCWP Left … [Read more...]