How to Add Signature or Ads after Post Content in WordPress


All you have to do is add the following code in your theme’s functions.php file or in asite-specific plugin.

1 //Add Signature Link
2 function custom_content_after_post($content){
3 if (is_single()) { 
4     $content .= '<p>Load Your Content Here</p><img src="'. get_template_directory() .'/images/signature.png" alt="Your Name" />';
5 }
6     return $content;
7 }
9 add_filter( "the_content""custom_content_after_post" );

All you have to do is change the code after the = sign. You can use it to place an image like we did above. You can use it to add ads. This is by far the simplest way of doing so which will work in parent themes as well as child themes of popular frameworks like GenesisThesis etc.

Note: if you are using a child theme, and your image is stored in your child theme’s images folder then replace get_template_directory with get_stylesheet_directory.

If you don’t like to code, then you can use one of the many plugins that are available such as FT Signature Manager or WordPress Signature.

Lastly, if you were wondering how to add ads within post content (such as after the first paragraph of your post), then check out our article on how to insert ads within WordPress post content.

How to Create WordPress Custom Post Type


In this tutorial we are going to learn how to create custom post type in WordPress in an easy and simple way. No reason to think custom post type is hard and difficult to learn but instead let say “Hurray, I finally found out how to create custom post type for my great website in less than 30 minutes”.

Don’t worry, in this tutorial I will explain every steps as clear as possible so after reading this tutorial you can practice it your self.

The Questions

  • What is custom post type?
  • Why custom post type?
  • When we use custom post type?
  • Where custom post type can be optimal for use ?
  • How many post types we can have in WordPress based site?

You might ask “What makes custom post type so special?”.

Just like common type “post”, custom post type is :
  • still act as posts
  • by default do not display on common archive
  • by default do not appear on feed
  • can have its own permalink
  • can have its custom hierarchy
  • can have custom menu display on admin menu
  • and many thing you can do with them

In short, custom post type is like combination between type “pages” and “post” but you can customized it.

Let’s Start Playing with Custom Post Type

Let say we have a restaurant with a lot of food recipes from all over the world. Can it be done with common “post” ? Sure, but in this condition we want specific layout display and more organized besides the food recipes display side by side with restaurant news article.

We are going to create custom post type for our restaurant and named it “recipes” (without quotes off course). You can put the codes on your theme’s functions.php file.

1. Register our custom post type (make it integrated with WordPress post system)

register_post_type( 'recipes', $recipes_args );

2.  Define GUI options to display on Add / Edit post

$recipe_labels = array(
 'name' => 'Recipes',
 'singular_name' => 'Recipes',
 'menu_name' => 'Recipes',
 'add_new' => 'Add Recipes',
 'add_new_item' => 'Add New Recipes',
 'edit' => 'Edit',
 'edit_item' => 'Edit Recipes',
 'new_item' => 'New Recipes',
 'view' => 'View Recipes',
 'view_item' > 'View Recipes',
 'search_items' > 'Search Recipes',
 'not_found' => 'No Recipes Found',
 'not_found_in_trash' => 'No Recipes Found in Trash',
 'parent' => 'Parent Recipes',

3. Define hierarchy and permalink

$recipe_args = array(
 'labels' => $recipe_labels,
 'description' => 'put description for this recipes custom post type',
 'public' => true,
 'show_ui' => true,
 'show_in_menu' => true,
 'capability_type' => 'post',
 'hierarchical' => false,
 'rewrite' => array('slug' =&gt; 'recipe-name'),
 'query_var' => true,
 'supports' => array('title','editor','excerpt','custom-fields','thumbnail'),
 'menu_position' => 5,
 'has_archive' => true,

Up to this point our post type have been defined and registered, but still have no hierarchy or taxonomy.

4. Register taxonomy label (again make it integrated )

//register recipe taxonomy category
register_taxonomy( 'recipe-type', array( 'recipe' ), $taxonomy_recipe_category_args );

5. Define taxonomy label for custom post type

$taxonomy_recipes_category_labels = array(
 'name' => 'Recipes Types',
 'singular_name' => 'Recipes Types',
 'search_items' => 'Search Recipes Types',
 'popular_items' => 'Popular Recipes Types',
 'all_items' => 'All Recipes Types',
 'parent_item' => 'Parent Recipes Type',
 'parent_item_colon' => 'Parent Recipes Type:',
 'edit_item' => 'Edit Recipes Type',
 'update_item' => 'Update Recipes Type',
 'add_new_item' => 'Add New Recipes Type',
 'new_item_name' => 'New Recipes Type Name',
 'separate_items_with_commas' => 'Separate recipe type with commas',
 'add_or_remove_items' => 'Add or remove recipe types',
 'choose_from_most_used' => 'Choose from the most used recipe types',
 'menu_name' => 'Recipes Types',

6. Define action options for taxonomy label

$taxonomy_recipe_category_args = array(
 'labels' => $taxonomy_recipe_category_labels,
 'public' => true,
 'show_ui' => true,
 'hierarchical' => true,
 'rewrite' => array( 'slug' =&gt; 'recipe-type' ),
 'query_var' => true,
 'singular_label' => 'Recipe Type',

Finally, our custom post type have all requirements.

Breaking Down the Codes

Now that we have all the codes written, you probably wondering what on earth was those codes.

Fear not, I’m going to explain every bit of the above codes for you.

Step 1

On this step we define our custom post type name and for this example we name it “recipes”.

You can name it  with anything but just for suggestion make the name for custom post type simple and meet the purpose.

Step 2

We are defining how custom post type will look when we  add or edit or viewing archives of recipe post type (see screenshot for more detail).

Recipes Post Type

Step 3

On this step we can customizing how the custom post type action.

‘labels’  : Contain array from the step 1 ( $recipes_label )

‘description’ : ‘put description for this recipes custom post type’, : Optional post type description

‘public’ => true  : If we want to display this post type in admin UI.

‘show_ui’ => true, :  Display a user-interface for this post type

‘show_in_nav_menus’ => true,  : Whether post_type is available for selection in navigation menus

‘capability_type’ => ‘post‘, The post type to use for checking read, edit, and delete capabilities

‘hierarchical’ => false : Whether the post type is hierarchical. Allows parent to be specified (default is false)

‘rewrite’ => array(‘slug’ => ‘recipe-name’),  : Rewrite permalinks with this format (in this example the single custom post type will have slug ‘recipe-name’ – without quotes)

‘query_var’ => true :  Name of the query var to use for this post type

‘supports’ => array(‘title’,’editor’,’excerpt’,’custom-fields’,’thumbnail’)  : An alias for calling add_post_type_support() directly, by default is only title and editor.

In this example, the recipes custom post type that we made will have excerpt box, custom-fields box, and featured image as additional.

Need more options?

Don’t worry we can add more like : author, trackbacks, comment, revisions, and page-attribute.

‘menu_position’ => 5,  : Custom post type menu position. A little tips on menu position:

  •  5 – below Posts menu
  • 10 – below Media menu
  • 20 – below Pages menu

‘has_archive’=> true, : Will enables post type archives that displays all the items under corresponding post type.

For more options, WordPress Codex have reference in Function Reference : Register Post Type

Step 4

In this step we play with taxonomy hierarchy.

register_taxonomy( 'recipe-type', array( 'recipes' ), $taxonomy_recipe_category_args );

Our taxonomy is defined as ‘recipe-type’ and as part of custom post type ‘recipes’ (see code right above).

Step 5

We arranged how the taxonomy admin panel UI look like. I believe it’s easier to explain with a screenshot.

Recipe Types

Step 6

On this step, we made optional arguments for taxonomy label.

‘labels’ => $taxonomy_recipe_category_labels, : This label variable is array taken from Step 5.

 ’public’ => true : Option to display this taxonomy label in the admin UI

‘show_ui’ => true : Display a user-interface (admin panel) for this taxonomy

‘hierarchical’ => true : If we want to make the taxonomy hierarchical. Allows Parent to be specified

‘rewrite’ => array( ‘slug’ => ‘recipe-type’ ) : The permalink way for the taxonomy will have slug ‘recipe-type’. You can change it with other, just make sure to refresh / re-save the settings on Setting -> Permalinks

‘query_var’ => true : Name of the query var to use for this post type, (by default is true).

‘singular_label’ => ‘Recipe Type’ : name for one object of this taxonomy. Defaults to value of name

Further information can see Function Reference Register Taxonomy

Display Custom Post Type in Front End

To this point we have defined and registered our recipes post type easily, and now it’s time to make it real. Be ready, the following will need more attention and very seriously (just kidding, trust me it will be easy steps )

According to WordPress Template Tags guide, for single post item is displayed using single.php or single-postname.php template file.

But how about single post for custom post type?

You just need to make a file named single-custom-post-type-name.php. Based on our tutorial, our single post template file for for recipes post type is single-recipes.php

To test if it’s working, just copy single.php file of Twenty Eleven or Twenty Ten theme to your current theme folder that you use for this tutorial and rename it to single-recipes.php.

For displaying all archives for recipes post type you just need to create, a file named taxonomy-recipes.php and it will use something query arguments like WP_Query. Here’s a simple example of the archive page:

<?php get_header(); ?>
<div id="wrapper">
    <div class="inner">
        <ul class="posts">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <h3 class="title"><a href="<?php the_permalink() ?>" title="<?php echo get_the_title(); ?>"><?php the_title(); ?></a></h3>
                <div class="the-content">
                    <?php the_content(); ?>
            <?php endwhile; ?>
            <div class="navigation clearfix">
                <?php previous_posts_link( __('&laquo; Previous', 'warrior') ); ?>
                <?php next_posts_link( __('Next &raquo;', 'warrior') ); ?>
            <?php endif; ?>
<?php get_footer(); ?>

Add Shortcut Links to the Toolbar


WordPress makes it easy to add custom stuff to the Toolbar. This is a great way to personalize the look and feel of the WP Admin with custom menus, links, or whatever makes sense. To further streamline workflow, you can create keyboard-shortcuts to open your Toolbar links with a single keystroke.

For example, the DigWP Toolbar contains a shortcut-link to our Gmail account, which is then linked back to the Admin area from the Google Toolbar. This helps minimize the number of open tabs and save time while working with related sites. In this tutorial, you’ll learn how toadd links to the WordPress Toolbar and then take it further with optional accesskey shortcuts and integration with the Google toolbar.

Adding a link to the WP Toolbar

As with many things, WordPress makes it easy to customize the Toolbar. To add or customize links, menus, and groups, we use the add_node() function to modify the$wp_admin_bar global-object. Here is the basic usage of add_node():

<?php $wp_admin_bar->add_node( $args ); ?>

Passing an array of arguments, add_node() adds a “node” to the WP Toolbar based on the specified criteria. As explained in the WordPress Codex:

Toolbar items are also called “nodes”. Nodes can be parents for other nodes, which creates dropdown menus. Group nodes together with add_group() to create distinct sections in a Toolbar menu.

In this case, the item we’re adding is a link to an external page, which will be our Gmail inbox for this tutorial. One reason why we’re using Gmail as an example is that you can link back to your site from the Google Toolbar, which we’ll get to in a bit. For now, here is a screenshot showing the Gmail link added to the WP Toolbar:

[ Screenshot: Gmail shortcut with accesskey displayed in the WP Toolbar ]

Adding our link to the Toolbar requires the following code in a plugin or your theme’sfunctions.php file:

// add a link to the WP Toolbar function custom_toolbar_link($wp_admin_bar) { $args = array( 'id' => 'gmail', 'title' => 'Gmail', 'href' => '', 'meta' => array( 'class' => 'gmail', 'title' => '' ) ); $wp_admin_bar->add_node($args); } add_action('admin_bar_menu', 'custom_toolbar_link', 999);

Things to edit in this snippet:

  • 'id' => 'gmail' — the ID of the <li> element containing the custom link
  • 'title' => 'Gmail' — the anchor-text for the custom link
  • 'href' => '' — the URL for the custom link
  • 'class' => 'gmail' — the class attribute for the custom link
  • 'title' => '' — the title attribute for the custom link

That should do the trick, but there is much more customization possible. For a list of all the available parameters and arguments, check out the add_node() page at the WP Codex.

You may also want to look at remove_node if you’re getting into customizing the WP Toolbar.

Taking it further with accesskey

Having a custom link in the WP Toolbar is nice, but when located at the top of the page, you may find yourself scrolling just to reach it. By adding an accesskey attribute to the anchor element, we create a keyboard-shortcut that will open our custom link directly. You can add an accesskey attribute to any anchor element like so:

<a href="..." accesskey="g">Gmail</a>

You can use any single character for the accesskey value in theory, but in practice you’ll avoid headaches in certain browsers (*cough*) by sticking with letters of the alphabet. Once a link (or form element) has an accesskey, visitors can open it with a keyboard shortcut. For example, for Chrome/Mac, the shortcut is control+alt+accesskey. Other browsers have their own similar shortcuts, all well-documented on the Web. Here is a good overview of accesskey for more information.

Tip: If you’re using Chrome, Display Access Keys enables you to view all the accesskey shortcuts while surfing the Web. You can see an example in the previous screenshot: the extension displays the little “[g]” next to the link. Learning the accesskeys of your favorite sites can speed-up navigation. And for even more control in Chrome, check out Vimium for vim-like shortcuts and page-navigation.

Implementing accesskey with Toolbar links

Unfortunately, accesskey isn’t on the list of supported attributes for the add_node() function. So unless you want to fiddle with a custom-walker, jQuery is probably the easiest way of doing it:

'html' => '<script>$j(document).ready(function(){$j(".gmail a").attr("accesskey","g");});</script>',

Just add that line to the custom_toolbar_link() function like so:

// add a link to the WP Toolbar function custom_toolbar_link($wp_admin_bar) { $args = array( 'id' => 'gmail', 'title' => 'Gmail', 'href' => '', 'meta' => array( 'html' => '<script>$j(document).ready(function(){$j(".gmail a").attr("accesskey","g");});</script>', 'class' => 'gmail', 'title' => '' ) ); $wp_admin_bar->add_node($args); } add_action('admin_bar_menu', 'custom_toolbar_link', 999);

That will do the job, adding the specified accesskey attribute to the custom link in the Toolbar. Here is a peek under the hood, showing how the JavaScript is inserted immediately after the link, which then includes the requisite accesskey.

[ Screenshot: Toolbar link's accesskey attribute revealed in the source code ]

This also shows us that the content of add_node’s html parameter appears after the hyperlink. Unfortunately add_node() doesn’t include accesskey (or rel) attributes, so we’re taking the next-easiest way of getting there. Adding accesskey is easy with jQuery.

With everything in place, I press control+alt+g and I’m in Gmail. Getting back is (almost) just as easy..

Linking back from the Google Toolbar

The interesting thing about Google’s latest “black” toolbar is its similarity to the WP Toolbar:

[ Screenshot: Comparison of WordPress Toolbar vs Google Toolbar ]

They’re not the same height though, Google’s Toolbar is 30px while WP’s Toolbar is only 28px. Even so, when working together with your WordPress site and any of your Google stuff, the consistency is nice. It took awhile to find something that worked, but eventually found theGTools+ extension, which enables you customize the Google Toolbar. Here’s a screenshot showing GTools+ Options:

[ Screenshot: GTools+ extension ]

That box contains the links that appear in the Toolbar. Add or remove whatever you wish, and customize further with other settings as needed. After adding your URL to GTools+, you should see something like this:

[ Screenshot: Google Toolbar with custom-link to ]

Voilà! Navigating between Google and WordPress sites is even more seamless.. a sign of things to come? Who knows, but even without the link back to your site from the Google Toolbar, adding shortcut links to your WP Toolbar is a great way to personalize websites and streamline your workflow.

Give Your Customers Driving Directions With the Google Maps API



Instead of just showing your business location on a Google Map, why not offer your users the opportunity to get driving directions on the same page? No need for them to open up a new browser window and find it themselves, we can do better than that!

Using the Google Maps API within your WordPress website is a relatively simple process and we’ll explore exactly how to do it in this tutorial.

What We’ll Be Doing in This Tutorial…

  1. First we’ll set up some custom options so that we can enter information about our map in the WordPress Admin panel.
  2. Then we’ll use shortcodes to output a map container, input fields and directions container
  3. Finally we’ll write some JavaScript to initiate the Google Map

Note: We’ll be writing a fair bit of JavaScript here, but don’t worry! This is a WordPress tutorial so feel free to gloss over the JavaScript parts 🙂

Step 1 Create the Directory and Files

  1. Create a folder inside your theme called Map
  2. Inside this folder, create map.php
  3. Finally create map.js

Step 2 Include the map.php File

In your functions.php file (located in the root directory of your theme) – include the map.php file you created at the top.

  1. /* functions.php */
  2. include(‘map/map.php’);

Step 3 Register Settings

There are 3 things that we want to be able to edit from the Admin area.

  1. The Destination. We’re going to use Longitude and Latitude values to specify the precise location of your destination (more details to follow)
  2. The infoWindow content. This is the white bubble you often see on Google Maps – we want to be able to edit the text in the bubble!
  3. Initial Zoom Level of the map – how far the map is zoomed in when the user first loads the page.

In map.php, hook into admin_init to register our settings:

  1. function map_init() {
  2.     register_setting(‘general’, ‘map_config_address’);
  3.     register_setting(‘general’, ‘map_config_infobox’);
  4.     register_setting(‘general’, ‘map_config_zoom’);
  5. }
  6. add_action(‘admin_init’, ‘map_init’);

Now we can set up the heading text for our section in the options page and all of the inputs we need.

  1. function map_config_option_text() {
  2.     echo ‘<p>Set Options for the Map here:</p>’;
  3. }
  4. // Longitude, Latitude Values for the Destination
  5. function map_config_address() {
  6.     printf((‘<input type= »text » id= »map_config_address » name= »map_config_address » value= »%s » size= »50″/>’), get_option(‘map_config_address’));
  7. }
  8. // The text content for the InfoWindow Bubble
  9. function map_config_infobox() {
  10.     printf((‘<textarea name= »map_config_infobox » id= »map_config_infobox » cols= »30″ rows= »3″>%s</textarea>’), get_option(‘map_config_infobox’));
  11. }
  12. // The initial Zoom Level of the map.
  13. function map_config_zoom() {
  14.     printf((‘<input name= »map_config_zoom » id= »map_config_zoom » value= »%s » />’), get_option(‘map_config_zoom’));
  15. }

Finally we hook into admin_menu to display our settings in the WordPress Admin:

  1. function map_config_menu() {
  2.     add_settings_section(‘map_config’, ‘Map Configuration’, ‘map_config_option_text’, ‘general’);
  3.     add_settings_field(‘map_config_address’, ‘Address – Longitude and Latitude’, ‘map_config_address’, ‘general’, ‘map_config’);
  4.     add_settings_field(‘map_config_infobox’, ‘Map InfoWindow’, ‘map_config_infobox’, ‘general’, ‘map_config’);
  5.     add_settings_field(‘map_config_zoom’, ‘Map Zoom Level’, ‘map_config_zoom’, ‘general’, ‘map_config’);
  6. }
  7. add_action(‘admin_menu’, ‘map_config_menu’);

Go into your admin area, you should now see this:

Step 4 Enter Your Destination, infoWindow Text and Zoom Level

  1. Destination AddressThe Google Maps API actually accepts regular addresses such as ‘Newgate Lane, Mansfield, Nottinghamshire, UK’ – However, you’ll find that you will want to be more precise with your destination (for example, you’ll most likely want to point directly to your business and not just the street). You can use a Google Maps API V3 Sample to search for your destination. Drag the target around until you have pin-pointed your spot. When you’re happy, copy the Lat/Lng: value into the address field in the options – for example 27.52774434830308, 42.18752500000007 (just the numbers separated by the comma, no brackets or quotes!)
  2. InfoWindow TextMake this whatever you want. Your Business Name would be a good idea 🙂
  3. Zoom LevelA good starting point is 10.

Click ‘Save Changes’ and when the page refreshes you can check that the info has been stored. It should look something like this now:

Step 5 Set Up the Shortcodes

When we are finished, we’ll have 3 elements: the Map, the Form, and the Directions – so in this tutorial I’ve decided to split them up into 3 separate shortcodes. This will allow us to change the order/placement of each item without having to modify any of our PHP code. For example, you may decide to have your directions above the map instead of below, or at the side, etc.

  1. Shortcode 1 : wpmap_mapHere we register and enqueue the Google Maps API JavasScript file as well as our own maps.js file.Next we use the $output variable to store our map-container div along with some custom data attributes. ( data-map-infowindow will store the content for the infowindow and data-map-zoom will represent the initial zoom level – both of these values are returned using WordPress’s get_optionfunction).

    Finally we return the generated HTML to be output:

    1. function wpmap_map() {
    2.     wp_register_script(‘google-maps’, ‘;);
    3.     wp_enqueue_script(‘google-maps’);
    4.     wp_register_script(‘wptuts-custom’, get_template_directory_uri() . ‘/map/map.js’,  »,  », true);
    5.     wp_enqueue_script(‘wptuts-custom’);
    6.     $output = sprintf(
    7.         ‘<div id= »map-container » data-map-infowindow= »%s » data-map-zoom= »%s »></div>’,
    8.         get_option(‘map_config_infobox’),
    9.         get_option(‘map_config_zoom’)
    10.     );
    11.     return $output;
    12. }
    13. add_shortcode(‘wpmap_map’, ‘wpmap_map’);
  2. Shortcode 2 : wpmap_directions_containerHere we simply return an empty div with an ID of dir-container. This will act as the container for the directions.
    1. function wpmap_directions() {
    2.     $output = ‘<div id= »dir-container » ></div>’;
    3.     return $output;
    4. }
    5. add_shortcode(‘wpmap_directions_container’, ‘wpmap_directions’);
  3. Shortcode 3 : wpmap_directions_inputThis generates the Markup needed for our form.This is also where we’ll set our final custom option – the destination Address. This time, we’ll use a hidden form field to hold the Latitude/Longitude value that we entered earlier in the Admin Panel.
    1. function wpmap_directions_input() {
    2.     $address_to = get_option(‘map_config_address’);
    3.     $output = ‘<section id= »directions » class= »widget »>
    4.                 <strong>For Driving Directions, Enter your Address below :</strong><br />
    5.                 <input id= »from-input » type= »text » value= » » size= »10″/>
    6.                 <select class= »hidden » onchange= » » id= »unit-input »>
    7.                     <option value= »imperial » selected= »selected »>Imperial</option>
    8.                     <option value= »metric »>Metric</option>
    9.                 </select>
    10.                 <input id= »getDirections » type= »button » value= »Get Directions » onclick= »WPmap.getDirections(); »/>
    11.                 <input id= »map-config-address » type= »hidden » value= »‘ . $address_to . ‘ »/>
    12.             </section>’;
    13.     return $output;
    14. }
    15. add_shortcode(‘wpmap_directions_input’, ‘wpmap_directions_input’);

Now we have the shortcodes set up, you can go ahead and type them into your Contact Us page (or any page you like).

If you preview the page now, all you’ll see is the form input fields. That’s because we haven’t written our JavaScript that will initialize the Map yet and the div for the directions is currently empty.

Note: Before we dive into the JavaScript, we just need to add this to our style.css:

  1. #map-container {
  2.     width: 100%;
  3.     height: 400px;
  4. }

Step 7 Writing JavaScript to Interact With Google Maps API

Now it’s time to make the magic happen! I’ll provide a quick run-down of what we’re going to do first, then we’ll dig straight into the code.

  1. First we’re going to create an object WMmap and assign properties to it (some of which we’ll be grabbing from the markup that we created in the shortcodes)
  2. Then we’ll add a few methods to handle the functionality of the map and directions.
  3. One of these methods, init, will be responsible for loading the map and also for setting some default values such as the infoWindow text, zoom level and initial marker position (all from WordPress options)
  4. Finally we’ll set an event listener to load our map when the page is ready.


I’ll explain each part of the code step-by-step, but don’t worry if you get lost, we’ll put it all together at the end.

Set Properties

Let’s create our object and set some properties. Here we are simply querying the DOM to retrieve the HTML elements that contain the values we need. The property names we’re using should be very clear and self-explanatory (mapContainer is obviously the Map Container, etc :))

Here we also get a couple of objects from the API that we’ll use later when we deal with Directions.

  1. var WPmap = {
  2.     // HTML Elements we’ll use later!
  3.     mapContainer    : document.getElementById(‘map-container’),
  4.     dirContainer    : document.getElementById(‘dir-container’),
  5.     toInput         : document.getElementById(‘map-config-address’),
  6.     fromInput       : document.getElementById(‘from-input’),
  7.     unitInput       : document.getElementById(‘unit-input’),
  8.     // Google Maps API Objects
  9.     dirService      : new google.maps.DirectionsService(),
  10.     dirRenderer     : new google.maps.DirectionsRenderer(),
  11.     map             : null,
  12.     /* continues below */
  13. }

The Methods

These are also part of our WPmap object, if you are unsure how everything ties together, be sure to check out the bottom of this tutorial to see all of the code together.


This is called from within another method that we’ll see later, it basically controls the insertion of the directions into the page.

  1. /* within WPmap object */
  2. showDirections:function (dirResult, dirStatus) {
  3.     if (dirStatus != google.maps.DirectionsStatus.OK) {
  4.         alert(‘Directions failed: ‘ + dirStatus);
  5.         return;
  6.     }
  7.     // Show directions
  8.     WPmap.dirRenderer.setMap(;
  9.     WPmap.dirRenderer.setPanel(WPmap.dirContainer);
  10.     WPmap.dirRenderer.setDirections(dirResult);
  11. },


This is called once from our init method. It will set the startLatLng property equal to agoogle.maps.LatLng object that we can use later. It requires that we provide it separate Latitude and Longitude values – how can we do this?

  1. In our shortcode we inserted a hidden form field that contains the Latitude & Longitude value that we set in the WordPress Admin. Then we retrieved the hidden form field and stored it in toInput. This means we can now access the value using WPmap.toInput.value
  2. However, the value we set in the form is just a string with a comma separating the numbers. To separate the values we can split the string up using .split(","). This will return an array containing the Latitude and Longitude as separate values.
  3. Now we can access each one by using the arrays index.
  1. /* within WPmap object */
  2. getStartLatLng: function () {
  3.     var n = WPmap.toInput.value.split(« , »);
  4.     WPmap.startLatLng = new google.maps.LatLng(n[0], n[1]);
  5. },


Because we have allowed our users to select whether they would prefer directions in Metric or Imperial, we use this method to set DirectionsUnitSystem to either METRIC or IMPERIAL.

  1. /* within WPmap object */
  2. getSelectedUnitSystem:function () {
  3.     return WPmap.unitInput.options[WPmap.unitInput.selectedIndex].value == ‘metric’ ?
  4.         google.maps.DirectionsUnitSystem.METRIC :
  5.         google.maps.DirectionsUnitSystem.IMPERIAL;
  6. },


This is the method that is called when the user clicks the Get Directions button.

  1. First we get the address that the user entered and store it in the fromStr variable.
  2. Next we set up an options object – dirRequest. This will contain the options needed to provide the Driving Directions.
    1. origin – The address that the user entered.
    2. destination – The google.maps.LatLng object containing the Latitude and Longitude values of your destination.
    3. travelMode – Here we ensure we are only retrieving Driving Directions.
    4. unitSystem – Specify which unit of measurement to use based on user’s choice.
  3. Finally, we call WPmap.dirService.route – and pass two parameters to it:
    1. dirRequest – this is the object containing our options.
    2. WPmap.showDirections – the callback function that handles the placement of the directions into the page.
  1. /* within WPmap object */
  2. getDirections:function () {
  3.     var fromStr = WPmap.fromInput.value;
  4.     var dirRequest = {
  5.         origin      : fromStr,
  6.         destination : WPmap.startLatLng,
  7.         travelMode  : google.maps.DirectionsTravelMode.DRIVING,
  8.         unitSystem  : WPmap.getSelectedUnitSystem()
  9.     };
  10.     WPmap.dirService.route(dirRequest, WPmap.showDirections);
  11. },


This is the method that is called when the page is loaded. It is responsible for :

  1. Initiating the map, centered on your address.
  2. Retrieving values that are needed to set the infoWindow text and the initial Zoom level.
  3. Setting a marker pin showing your address.
  4. Listening for when when a user clicks ‘Get Directions’ so that it can remove the initial Marker and infoWindow
  1. init:function () {
  2.     // get the infowindow text and zoom level
  3.     var infoWindowContent = WPmap.mapContainer.getAttribute(‘data-map-infowindow’);
  4.     var initialZoom       = WPmap.mapContainer.getAttribute(‘data-map-zoom’);
  5.     // call the method that sets WPmap.startLatLng
  6.     WPmap.getStartLatLng();
  7.     // setup the map.
  8. = new google.maps.Map(WPmap.mapContainer, {
  9.         zoom      : parseInt(initialZoom),
  10.         center    : WPmap.startLatLng,
  11.         mapTypeId : google.maps.MapTypeId.ROADMAP
  12.     });
  13.     // setup the red marker pin
  14.     marker = new google.maps.Marker({
  15.         map       :,
  16.         position  : WPmap.startLatLng,
  17.         draggable : false
  18.     });
  19.     // set the infowindow content
  20.     infoWindow = new google.maps.InfoWindow({
  21.         content : infoWindowContent
  22.     });
  23., marker);
  24.     // listen for when Directions are requested
  25.     google.maps.event.addListener(WPmap.dirRenderer, ‘directions_changed’, function () {
  26.         infoWindow.close();         //close the initial infoWindow
  27.         marker.setVisible(false);   //remove the initial marker
  28.     });
  29. }//init
  30. ;// <– this is the end of the object.

** Optional **

If you want to display a nice message (like the one seen below) to your users after they have requested directions, just copy the code under the image into the event listener inside the init method.

Optional Thank you message:

  1. // Get the distance of the journey
  2. var distanceString = WPmap.dirRenderer.directions.routes[0].legs[0].distance.text;
  3. // set the content of the infoWindow before we open it again.
  4. infoWindow.setContent(‘Thanks!<br /> Looks like you\’re about <strong> ‘ + distanceString + ‘</strong> away from us. <br />Directions are just below the map’);
  5. // re-open the infoWindow
  6., marker);
  7. setTimeout(function () {
  8.     infoWindow.close()
  9. }, 8000); //close it after 8 seconds.

Step 8 Add the Event Listener That Will Load the Map

Are you still with me? We’ve made it all the way to end now and all that’s left to do is call the WPmap.init()method when the page loads. Add this to the bottom of map.js

  1. google.maps.event.addDomListener(window, ‘load’, WPmap.init);

Putting All the JavaScript Together

We’ve covered a lot of ground here, so let’s see how it looks when it’s all put together.

  1. var WPmap = {
  2.     // HTML Elements we’ll use later!
  3.     mapContainer   : document.getElementById(‘map-container’),
  4.     dirContainer   : document.getElementById(‘dir-container’),
  5.     toInput        : document.getElementById(‘map-config-address’),
  6.     fromInput      : document.getElementById(‘from-input’),
  7.     unitInput      : document.getElementById(‘unit-input’),
  8.     startLatLng    : null,
  9.     // Google Maps API Objects
  10.     dirService     : new google.maps.DirectionsService(),
  11.     dirRenderer    : new google.maps.DirectionsRenderer(),
  12.     map:null,
  13.     showDirections:function (dirResult, dirStatus) {
  14.         if (dirStatus != google.maps.DirectionsStatus.OK) {
  15.             alert(‘Directions failed: ‘ + dirStatus);
  16.             return;
  17.         }
  18.         // Show directions
  19.         WPmap.dirRenderer.setMap(;
  20.         WPmap.dirRenderer.setPanel(WPmap.dirContainer);
  21.         WPmap.dirRenderer.setDirections(dirResult);
  22.     },
  23.     getStartLatLng:function () {
  24.         var n = WPmap.toInput.value.split(« , »);
  25.         WPmap.startLatLng = new google.maps.LatLng(n[0], n[1]);
  26.     },
  27.     getSelectedUnitSystem:function () {
  28.         return WPmap.unitInput.options[WPmap.unitInput.selectedIndex].value == ‘metric’ ?
  29.             google.maps.DirectionsUnitSystem.METRIC :
  30.             google.maps.DirectionsUnitSystem.IMPERIAL;
  31.     },
  32.     getDirections:function () {
  33.         var fromStr = WPmap.fromInput.value; //Get the postcode that was entered
  34.         var dirRequest = {
  35.             origin      : fromStr,
  36.             destination : WPmap.startLatLng,
  37.             travelMode  : google.maps.DirectionsTravelMode.DRIVING,
  38.             unitSystem  : WPmap.getSelectedUnitSystem()
  39.         };
  40.         WPmap.dirService.route(dirRequest, WPmap.showDirections);
  41.     },
  42.     init:function () {
  43.         // get the content
  44.         var infoWindowContent = WPmap.mapContainer.getAttribute(‘data-map-infowindow’);
  45.         var initialZoom       = WPmap.mapContainer.getAttribute(‘data-map-zoom’);
  46.         WPmap.getStartLatLng();
  47.         // setup the map.
  48. = new google.maps.Map(
  49.             WPmap.mapContainer,
  50.             {
  51.                 zoom: parseInt(initialZoom),     //ensure it comes through as an Integer
  52.                 center: WPmap.startLatLng,
  53.                 mapTypeId: google.maps.MapTypeId.ROADMAP
  54.             }
  55.         );
  56.         // setup the red pin marker
  57.         marker = new google.maps.Marker({
  58.             map:,
  59.             position: WPmap.startLatLng,
  60.             draggable: false
  61.         });
  62.         // set the infowindow content
  63.         infoWindow = new google.maps.InfoWindow({
  64.             content:infoWindowContent
  65.         });
  66., marker);
  67.         // listen for when Directions are requested
  68.         google.maps.event.addListener(
  69.             WPmap.dirRenderer,
  70.             ‘directions_changed’,
  71.             function () {
  72.                 infoWindow.close();         //close the first infoWindow
  73.                 marker.setVisible(false);   //remove the first marker
  74.                 // setup strings to be used.
  75.                 var distanceString = WPmap.dirRenderer.directions.routes[0].legs[0].distance.text;
  76.                 // set the content of the infoWindow before we open it again.
  77.                 infoWindow.setContent(‘Thanks!<br /> Looks like you\’re about <strong> ‘ + distanceString + ‘</strong> away from us. <br />Directions are just below the map’);
  78.                 // re-open the infoWindow
  79.       , marker);
  80.                 setTimeout(function () {
  81.                     infoWindow.close()
  82.                 }, 8000); //close it after 8 seconds.
  83.             }
  84.         );
  85.     }//init
  86. };
  87. google.maps.event.addDomListener(window, ‘load’, WPmap.init);

Tutorial Notes

  1. Be sure to research anything you don’t understand on Google’s Maps API Website
  2. When writing this tutorial, I was testing my code using the stock TwentyEleven WordPress Theme. Something was causing the arrow at the bottom of the InfoWindow on the map to display incorrectly. It’s because .entry-content img on line 857 has a max-width set. This screws up the way that Google renders the infoWindow. To fix it, enter this somewhere below it:
    1. #map-container img { max-width: none; }

Comment insérer un plugin JQuery dans son thème WP


Partie 1: Anatomie d’un plugin jQuery

Dans cette partie, nous allons voir de quoi est généralement constitué un plugin jQuery, et où nous devons placer les différents composants. Tout au long de cet article, nous allons prendre l’exemple du plugin FancyBox (même s’il existe déjà une implémentation WordPress, c’est juste pour avoir un exemple concret).

A) La Source Javascript

jQuery est une librairie JavaScript, et les plugins servent à étendre ses possibilités, ils sont donc écrit en suivant la même syntaxe que jQuery. Chaque plugin que vous trouverez est écrit dans un fichier JavaScript. C’est le coeur même du plugin, et doit donc être inclus dans votre application:

  1. //Include the plugin script
  2. <script type= »text/javascript » src= »Chemin_vers/jquery.fancybox.js »></script>

B) Le Code Javascript

Une fois le plugin inclus, vous êtes souvent amené à écrire quelques lignes de code afin de faire marcher votre plugin avec votre application. La plupart du temps, cela consiste à écrire quelques lignes afin de faire marcher le plugin avec un élément particulier de votre page, et avec un évènement particulier. Comme par exemple, faire marcher la FancyBox après un clic sur un lien:

  1. //Write the plugin setup
  2. <script type= »text/javascript »>
  3. jQuery(document).ready(function(){
  4. //Fancybox
  5. jQuery(« a.fancy »).fancybox({
  6. overlayShow: true,
  7. overlayOpacity: 0.7
  8. });
  9. });
  10. </script>

C) Les styles additionnels

Certains plugins marchent avec des styles particuliers, comme les fenêtres modales comme la FancyBox par exemple. Ces styles sont requis et garantissent le bon fonctionnement du plugin. Ils doivent donc être inclus dans l’application.

  1. //Include the plugin Stylesheet
  2. <link rel= »stylesheet » type= »text/css » href= »Chemin_vers/jquery.fancybox.css » />

D) Comment tout mettre en place ?

Une fois que vos fichiers sont prêts, c’est une pratique courante et recommandée de les ajouter à votre application en mettant les styles dans le header de la page, et les scripts juste avant la fermeture du tag </body>.

Partie 2: Comment tout intégrer dans WordPress?

Maintenant que nous avons une meilleure compréhension des différents éléments que l’on peut trouver dans un plugin jQuery, et où ils sont sensé aller, voyons comment nous pouvons faire de même dans WordPress.

Comment déclarer un plugin WordPress ?

A) Dans WordPress, les plugins sont stockés dans le dossier /wp-content/plugins. Il suffit donc de se rendre dans ce dossier, et de créer un dossier du même nom que votre plugin, dans notre cas, FancyBox.

B) Dans ce dossier, copiez tous les fichiers nécessaires au bon fonctionnement de votre plugin jQuery, (script, css, images etc).

C) Créez un fichier appelé init.php. Init.php est un fichier particulier que va utiliser WordPress pour reconnaître notre nouveau plugin. Ouvrez ce fichier et copiez le code suivant dedans:

  1. /*
  2. Plugin Name: FancyBox //Your plugin name (here we’d write Fancybox)
  3. Plugin URI: //Url of your choice
  4. Description: Implementation of the FancyBox for jQuery //Brief PLugin Description
  5. Version: 1.0 //Version of your plugin
  6. Author: Jeremy Desvaux //Name of the author
  7. Author URI: //Url of your site
  8. License: Creative Commons Attribution-ShareAlike //Licence
  9. //Other terms and conditions
  10. This program is free software; you can redistribute it and/or modify
  11. it under the terms of the GNU General Public License as published by
  12. the Free Software Foundation; either version 2 of the License, or
  13. (at your option) any later version.
  14. */

Comme vous pouvez le voir, dans ce fichier on spécifie un nom, une URL, une description et deux trois autres informations du même type. Ces informations sont ensuite réutilisées par WordPress dans l’interface d’administration des plugins comme vous pouvez le voir sur l’image suivante:

Plugin Interface Screenshot

Depuis cette image, nous pouvons voir que notre futur plugin a été reconnu par WordPress, et qu’il contient les informations que nous avons spécifiées. Le moment est venu de tout faire marcher maintenant. D’après ce que nous avons wu dans la partie 1, il nous faut trouver un moyen d’inclure nos fichiers dans le header et le footer de notre application.

Comment inclure des fichiers dans le header de WordPress?

Ce que l’on veut faire, c’est inclure notre feuille de style, dans le header de la page. En html, on le fait en plaçant une balise link directement dans le header. Dans WordPress, c’est déconseillé, il existe une fonction spécifique pour réaliser cela, elle s’appelle wp_enqueue_style() (ref codex ici)

wp_enqueue_style accepte plusieurs paramètres, principalement le nom de votre feuille de style et son url. On peut aussi ajouter des dépendances (c’est à dire d’autres styles qui doivent être inclus avant), et un numéro de version. Dans notre cas, afin d’ajouter notre feuille de style dans le header, on utiliserait wp_enqueue_style comme ceci:

  1. //Add the stylesheet into the header
  2. wp_enqueue_style(
  3. « jquery.fancybox »,
  4. WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css »,
  5. false,
  6. « 1.3.1 »
  7. );

Ligne 3, vous pouvez voir le nom que l’on donne à notre feuille de style, l’url de sa source, avec l’emploi de la constante WP_PLUGIN_URL qui renferme le chemin vers le dossier des plugins. Du coup si l’utilisateur décide de le changer, le lien vers la feuille de style ne sera pas brisé. Ligne 5, false veut dire qu’il n’y a pas de dépendance. et ligne 6, 1.3.1 détermine la version de la feuille.

Voilà tout pour le header. En fait, pour récapituler, au lieu d’ajouter par nous même la feuille de style dans le header directement, on demande à WordPress de le faire pour nous.

Comment inclure des fichiers dans le footer de WordPress?

D’une manière très similaire, afin d’ajouter nos scripts dans le footer de WordPress, nous faisons à nouveau appel à une fonction, cette fois ci appellée wp_enqueue_script() (ref codex ici).

wp_enqueue_script accepte des paramètres similaires à wp_enqueue_style, c’est à dire un nom de script, une url, des dépendances et un numéro de version. Le dernier paramètre est un booléen et vous permet de spécifier où vous désirez inclure vos fichiers. Si c’est 0 (par défaut), le script sera inclus dans le header, sinon, si c’est 1, dans le footer. Dans notre cas, afin d’inclure les fichiers dans le footer, on utilisera le booléen avec la valeur 1.

Il est maintenant temps d’inclure nos scripts avec wp_enqueue_script:

  1. //Add the scripts in the footer
  2. wp_enqueue_script(« jquery »);
  3. wp_enqueue_script(
  4. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox.js »,
  5. array(« jquery »), « 1.3.1 »,1);
  6. wp_enqueue_script(
  7. « jquery.fancyboxsetup », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/fancybox-setup.js »,
  8. array(« jquery », »jquery.fancybox »), «  »,1);

Lignes 3 et 6, vous pouvez voir wp_enqueue_script en action. On ajoute les scripts en sépcifiant leur nom, chemin, dépendance et version, et on les places dans le footer grâce au 1 à la fin. Comme vous pouvez le voir, la FancyBox a une dépendance (jQuery) et le script d’initialisation en a 2, (jQuery et FancyBox).

Il est temps de tester.

Votre plugin est maintenant prêt à l’emploi. Si vous retournez dans l’interface d’administration des plugins et que vous l’activez, WordPress va ajouter vos fichiers aux bons endroits, et votre plugin commencera à marcher.

Comment utiliser le plugin sur des pages spécifiques seulement?

Maintenant que notre plugin est actif, WordPress va ajouter les fichiers spécifiés dans init.php dans chaque page de votre application. Alors si c’est ce que vous voulez car vous utilisez le plugin sur toutes les pages c’est très bien. Sinon, c’est un gaspillage de ressources, et cela rajoute du temps de téléchargement pour rien.

Je vais vous montrer une petite technique toute simple que j’utilise pour avoir plus de contrôle. C’est très simple.

L’astuce consiste à rassembler le code que l’on vient d’écrire, et de la placer dans une nouvelle fonction que l’on appellera FancyBox_wp_setup():

  1. //Group the code inside a function
  2. function fancybox_wp_setup(){
  3. wp_enqueue_style(
  4. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css »,
  5. false, « 1.3.1 »);
  6. wp_enqueue_script(« jquery »);
  7. wp_enqueue_script(
  8. « jquery.fancybox », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/jquery.fancybox.js »,
  9. array(« jquery »), « 1.3.1 »,1);
  10. wp_enqueue_script(
  11. « jquery.fancyboxsetup », WP_PLUGIN_URL. »/jQuery2Wp_fancybox/fancybox-setup.js »,
  12. array(« jquery », »jquery.fancybox »), «  »,1);
  13. }

Ceci à 2 effets différents. Cela empêche WordPress d’ajouter vos fichiers de partout, ce qui est ce que l’on voulait, mais cela vous donne aussi accès à la fonction FancyBox_wp_setup(), que vous pouvez appeler sur chaque page où vous désirez utiliser le plugin.


Quand vous trouvez le plugin idéal pour votre nouveau design, l’intégrer dans WordPress n’est qu’à quelques lignes de code! J’espère que la prochaine fois que vous trouverez un plugin que vous souhaitez utiliser, vous vous souviendrez de cet article et que vous le transformerez en un plugin WordPress en 5 petites minutes.

Top 20 des plugins WP…

1     Google XML Sitemaps

Google XML Sitemaps est un plugin réalisé par  Arne Brachhold ayant pour but de créer un fichier de type plan de site Google. Ce fichier aura but d’aider google à crawler, parcourir, votre site et non l’indexer comme il est dit dans la description du plugin. Découvrez Google XML Sitemaps et sa configuration.

2     W3 Total Cache

W3 Total Cache est réalisé par  Frederick Townes. Le but de ce plugin est de vous fournir une solutioncomplète de cache et minification sur votre site WordPress. Il est communément admis qu’un système de cache améliorera les performances de votre site, attention car cela n’est pas vrai danstous les cas. Vous avez un VPS avec un NAS pour le disque dur ? Alors passez votre chemin pour la mise en cache disque.

3     NextGEN Gallery

La façon dont WordPress s’occupe des images vous pose un problème ? NextGEN Gallery est un plugin réalisé par Alex Rabe dans le but de palier à ces problèmes. NextGEN gallery est un plugin costaud.

4     Contact Form 7

Vous recherchez un plugin pour gérer vos formulaire qui soit simple et flexible ? Contact Form 7, réalisé par Takayuki Miyoshi est le plugin qu’il vous faut.

5     WordPress SEO by Yoast

WordPress SEO fait parti de nos plugins chouchou. Il est réalisé par Joost de Valk et vous permettra de gérer tous les aspects du référencement WordPress.

Nous devrions garder un seul plugin, ça serait lui.

6     WP Super Cache

WP Super cache est réalisé par Donncha O Caoimh. Le but de ce plugin est de vous fournir un système de cache performant pour WordPress. À croire que la demande est forte de ce côté là !

7     All in One SEO Pack

All in One SEO Pack porte bien son nom car lui aussi regroupe tous ce qu’il faut pour le référencement de votre site WordPress. Ce plugin est réalisé par Michael Torbert.

8     Fast Secure Contact Form

Fast Secure Contact Form a pour but de vous débarrasser des vilains spammeurs qui utiliseraient vos formulaire en vous proposant un plugin de contact sécurisé. Ce plugin est réalisé par Mike Challis.

9     Sociable

Les réseaux sociaux ont la côté, et ce n’est pas prêt de changer. Sociable,  plugin réalisé par Blogplay, vous permettra d’intégrer un lien de partage vers autant de réseaux sociaux que vous le désirerez.

10     Google Analytics for WordPress

Avoir des statistiques d’utilisation de son site web, c’est un minimum à nos yeux. Google Analytics se taille la part du lion dans ce domaine. Google Analytics for WordPress est réalisé par Joost de Valk.

Bien que les thèmes embarques souvent la possibilité d’insérer un code Google Analytics, nous avons toujours du remplacer les fonctionnalités du thème par ce plugin bien plus puissant en terme de configuration.

11     Share Buttons

Share Buttons fait parti de ces plugins pour le partage sur les réseaux sociaux. Il a été réalisé par Lockerz / AddToAny.

12 Stats

Vous n’aimez pas que vos statistiques partent chez le Grand Frère ? Automattic a pensez à vous en créant ce plugin. Toutefois… il s’agit toujours d’un plugin en SaaS.

13     Akismet

Marre du spam dans vos commentaires ? Akismet est là pour vous. En fait, Akismet est déjà intégré par défaut, ce qui le rend de facto incontournable dans son domaine. On pourra toutefois noter encore une fois que le SaaS, c’est Automattic. Dommage.

14     GRAND FlAGallery

Et oui, la gestion des galeries n’est pas le fort de WordPress et Graand FIAGallery fait parti de ces plugins qui l’on bien compris. Ce plugin est réalisé par  Best Photo Gallery

15     Add Link to Facebook

L’idée derrier ce plugin ? Vous permettre de ne pas avoir à vous souciez de publier vos nouveautés sur Facebook, Add Link to Facebook s’en chargera pour vous. Add Link to Facebook est développé par Marcel Bokhorst.Add Link to Facebook vous obligera  à faire un tour du côté des applications Facebook pour fonctionner. Rien de bien méchant, il suffit de suivre le guide.

16     WP e-Commerce

Pour ceux d’entre vous qui nous lirez pour la première fois, WP e-Commerce fait parti des plugins dont nous parlons très souvent, pour la simple et bonne raison que nous l’utilisons dans de nombreux projets client. Ce plugin est développé par Instinct Entertainment.

17     qTranslate

Vous souhaitez réaliser un site multilingue sous WordPress ? qTranslate est un excellent plugin réalisé dans de but par Qian Qin.

18     WP-PageNavi

Les liens vers les pages précédentes sous WordPress… c’est pas ça. Avec WP-PageNavi, vos visiteurs pourront facilement accéder à du contenu dit profond. Ce plugin est réalisé par  Lester ‘GaMerZ’ Chan & scribu.

19     WPtouch

Envi de rendre votre site WordPress facilement utilisable par vos internautes mobiles ? WPTouch est fait pour vous. Ce plugin est réalisé par BraveNewCode Inc.

20     TinyMCE Advanced

L’éditeur de texte de WordPress ne vous suffit plus ? TinyMCE Advanced le boostera en vous apportant un grand nombre de nouvelles fonctionnalités comme l’insertion de tableau, la justification, le choix de la taille de police… et tellement plus. Ce plugin est réalisé par Andrew Ozz.


Ajouter des icônes aux custom post types de WordPress


La plupart du temps les custom post types sont initialisés dans le fichier functions.php mais peuvent l’être dans un fichier dédié. A vous d’effectuer une recherche de la fonctionregister_post_type.

Ajoutez ensuite la ligne de code suivante dans les paramètres :

'menu_icon' => get_bloginfo('template_directory') . '/images/podcast-icon.png',  // URL de l'image

Pour vous donner un aperçu complet, voici le code complet pour créer un custom post types intitulé Podcasts :

add_action( 'init', 'register_cpt_podcast' );

function register_cpt_podcast() {

    $labels = array(
        'name' => _x( 'Podcasts', 'podcast' ),
        'singular_name' => _x( 'Podcast', 'podcast' ),
        'add_new' => _x( 'Add New', 'podcast' ),
        'add_new_item' => _x( 'Add New Podcast', 'podcast' ),
        'edit_item' => _x( 'Edit Podcast', 'podcast' ),
        'new_item' => _x( 'New Podcast', 'podcast' ),
        'view_item' => _x( 'View Podcast', 'podcast' ),
        'search_items' => _x( 'Search Podcasts', 'podcast' ),
        'not_found' => _x( 'No podcasts found', 'podcast' ),
        'not_found_in_trash' => _x( 'No podcasts found in Trash', 'podcast' ),
        'parent_item_colon' => _x( 'Parent Podcast:', 'podcast' ),
        'menu_name' => _x( 'Podcasts', 'podcast' ),

    $args = array(
        'labels' => $labels,
        'hierarchical' => true,

        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields', 'comments', 'revisions' ),
        'taxonomies' => array( 'genre' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,

        'menu_icon' => get_bloginfo('template_directory') . '/images/podcast-icon.png',
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'

    register_post_type( 'podcast', $args );

Il vous suffit de modifier l’URL du fichier image comme dans cet exemple.

Retournez à présent dans le back office de WordPress puis remarquez l’apparition de votre icône pour le custom post type concerné.

Capture d'écran - Back office de WordPress avec icône personnalisé pour le custom post type

Icônes symbolisant les podcasts de 16×16

Pack d’icônes pour les custom post types de WordPress, prêts-à-l’emploi.


Taille : 4,7 MiB  •  Date : 22 octobre 2011 •  Hits : 293

Comment styliser son backOff WordPress…

Voici un exellent tuto pour voir comment styliser son back office wordpress.

Source : WP channel

Le code à placer dans le fichier functions.php du thème  pour activer la nouvelle feuille de style du back office:

function admin_css() {

$admin_handle = 'admin_css';
$admin_stylesheet = get_template_directory_uri() . '/css/admin.css';

wp_enqueue_style( $admin_handle, $admin_stylesheet );
add_action('admin_print_styles', 'admin_css', 11 );