Milan Dinić's Blog

The Miscellaneous Ramblings from Serbia

Follow this blog via: RSS| Twitter| Email
  • About
  • WordPress
    • Plugins
      • Gravatar Signup Encouragement
      • Cache Images
      • bbPress Digest
      • Rename Media Files
      • Descriptions as Captions in Galleries
      • Run External Crons
      • Nav Menu Images
    • Blog Posts
    • Custom Development
  • Contact
    • Donate

Nav Menu Images 3.0: Hover and Active Images

26 March 2013

I’ve released version 3.0 of my plugin Nav Menu Images.

This version adds support for much requested features: setting images that are displayed when you hover default menu item image, and setting images that are used instead of default menu item images when menu item is of currently displayed page.

You can see how to use this features on plugin’s page.

Posted in Web design | Tagged Nav Menu Images, plugin, WordPress | Leave a response

Detect keydown, mousedown and Other TinyMCE Events in WordPress

13 February 2013

WordPress uses TinyMCE for its visual editor, making in hard to use regular Javascript for custom situations. Luckily, TinyMCE provides some callbacks that we can use.

In this example, I’ll show how you can do something when content of visual editor in WordPress has been accessed or changed by using TinyMCE’s handle_event_callback callback.

To register this callback, you need to use WordPress teeny_mce_before_init filter. This filter is used to filter TinyMCE’s options list before initialization. In this case, it would look like:

/**
 * Register callback on TinyMCE focus
 */
function md_callback_on_tinymce_click( $mceInit ) {
  $mceInit['handle_event_callback'] = "mdCallbackFunction";

  return $mceInit;
}

mdCallbackFunction is just a normal Javascript function that accepts parameter event and that you can place anywhere in you custom Javascript code. In this case, it would look like:

      function mdCallbackFunction(e) {
          // Do something
      }

Here is one real world situation where this trick can be used. Code below will hide Submit button on bbPress forms and it will show it only when you click on a text editor, either visual or text.

/**
 * Add bbPress TinyMCE focus callback function.
 */
function md_bbp_show_submit_on_tinymce_click( $mceInit ) {
  $mceInit['handle_event_callback'] = "mdShowBbpSubmit";

  return $mceInit;
}

/**
 * Display submit button on bbPress TinyMCE focus.
 */
function md_register_bbp_submit_onclick() {
  add_filter( 'teeny_mce_before_init', 'md_bbp_show_submit_on_tinymce_click' );
  ?>
  <script type="text/javascript">
    jQuery(document).ready(function($){
      // Hide Submit button
      $('#bbp_topic_submit').hide();
      $('#bbp_reply_submit').hide();
      // Display button when clicked in Text mode
      $("#bbp_topic_content").live('focusin', function (data) {
        $('#bbp_topic_submit').show();
      });
      $("#bbp_reply_content").live('focusin', function (data) {
        $('#bbp_reply_submit').show();
      });
    });
    function mdShowBbpSubmit(e) {
        jQuery('#bbp_reply_submit').show();
        jQuery('#bbp_topic_submit').show();
    }
  </script>
  <?php
}
add_action( 'bbp_theme_before_reply_form', 'md_register_bbp_submit_onclick' );
add_action( 'bbp_theme_before_topic_form', 'md_register_bbp_submit_onclick' );

Posted in Tips & Tricks, Web design | Tagged bbPress, code snippet, TinyMCE, tutorial, WordPress | Leave a response

Nav Menu Images 2.0: With the New WordPress 3.5 Media Views

11 February 2013

I’ve released version 2.0 of my plugin Nav Menu Images. It adds support for the new media views introduced in WordPress 3.5.

This makes it even easier to add images to nave menu items. No more waiting for upload screen, more prominent “Set featured image” button, easier removing/changing of images.

For older versions of WordPress, nothing has been changed, but you shouldn’t use that versions anyway.

Posted in Web design | Tagged Nav Menu Images, plugin, WordPress | Leave a response

How to Avoid Overwriting of WordPress Theme Translations

16 January 2013

If you are using WordPress in language other than English, you’ve experienced this painful process:

  • plugin/theme doesn’t include translations and you need to manually upload it
  • you download translation or translate it on your own, and upload it
  • new version of plugin/theme appears, you use automatic upgrader
  • translation files get deleted and you need to start from beginning

Although there was workaround that included using WordPress filters to point to different location for translations, WordPress 3.5 includes built-in solution that is, unfortunately, limited to themes only.

From now on, you can place your theme’s translation outside of theme’s directory in a themes subdirectory of your languages directory (WP_LANG_DIR). So, if your languages directory is default wp-content/languages, directory you should use is wp-content/languages/themes.

Another thing worth noting is that you need to change filename of translation if you use above solution. Theme translations files use only language codes as their names, for example sr_RS.mo. If you put translation in a WP_LANG_DIR/themes, you need to prefix this filename with theme’s textdomain. This textdomain is usually same as theme’s directory name, though you can confirm this by searching theme’s function.php file (or file included from over there) for load_theme_textdomain() function.

For example, translation of Twenty Twelve theme should be named twentytwelve-sr_RS.mo, for Hybrid theme hybrid-sr_RS.mo, for Responsive theme responsive-sr_RS.mo etc.

To summarize everything, instead of having your translation like
wp-content/themes/hybrid/languages/sr_RS.mo
move to
wp-content/languages/themes/hybrid-sr_RS.mo

Hopefully, WordPress 3.6 will include support for plugins as well, or, even better, full language packs support. If you are one that have need for it, beg WordPress developers to do something about that.

Posted in Software, Tips & Tricks, Web design | Tagged translations, WordPress | 3 Responses

Nav Menu Images: Developers Guide

23 November 2012

Following unexpected warm response from users of my latest plugin, Nav Menu Images, I decided to write a tutorial about advanced usage for developers.

Nav Menu Images uses filters of core WordPress nav menu template to change default content display. Since default content uses filter the_title, which is common in WordPres and used for filtering post titles, our filter is registered immediately before this filter is used and deregistered immediately after it’s used.

If you want to disable this behavior, and display images differently, you should set nmi_filter_menu_item_content filter to false, the easiest way which is with this line:

add_filter( 'nmi_filter_menu_item_content','__return_false' );

Now, if you still want to use default behavior but want to filter default content, you should use filter nmi_menu_item_content. This filter passes three arguments: the content that should be filtered, ID of a current item, and original content.

Since nav menu item is basically a WordPress post of nav_menu_item post type, you can use WordPress post functions to get item’s data. As said above, Nav Menu Images is already using the_title filter to display it’s content, so you can’t use get_the_title() function to get item’s title (which is called Navigation Label in UI), but you don’t need it since title is already passed by third argument, $original_content.

By default, Nav Menu Images displays just uploaded image of current item. But lets say that we want to display title also. In example below, we are displaying title after image, wrapped by our custom CSS class:

function md_nmi_custom_content( $content, $item_id, $original_content ) {
  $content = $content . '<span class="page-title">' . $original_content . '</span>';

  return $content;
}
add_filter( 'nmi_menu_item_content', 'md_nmi_custom_content', 10, 3 );

In second example, we are showing item’s description after image. Description is name of a field that will be shown in UI only if it’s checked under Screen Options, and it’s stored in post_content database field, so you can use function get_post_field() to get it’s value:

function md_nmi_custom_content( $content, $item_id, $original_content ) {
  $content = $content . '<span class="page-description">' . get_post_field( 'post_content', $item_id ) . '</span>';

  return $content;
}
add_filter( 'nmi_menu_item_content', 'md_nmi_custom_content', 10, 3 );

I hope this tutorial is a good starting point and that it solves some questions about customizing Nav Menu Images output. If you have any different example you made, please share in comments.

Posted in Software, Web design | Tagged nav menu, Nav Menu Images, plugin, tutorial, WordPress | 15 Responses

Next »

Recent Posts

  • Nav Menu Images 3.0: Hover and Active Images
  • Detect keydown, mousedown and Other TinyMCE Events in WordPress
  • Nav Menu Images 2.0: With the New WordPress 3.5 Media Views
  • How to Avoid Overwriting of WordPress Theme Translations
  • Nav Menu Images: Developers Guide

Categories

  • Asides
  • Blogging
  • Business
  • Fun
  • Internet Services
  • Marketing
    • Affiliate Marketing
      • AdSense
  • Miscellaneous
  • Personal
  • Politics
  • Serbia
  • Software
  • Technology
    • Search engines
      • Google
    • Web design
  • The Internet
  • Tips & Tricks
  • Uncategorized
  • World

Me Elsewhere

  • on Gravatar
  • on Serbian blog
  • on Twitter

Recent Tweets

  • And then what? 1 day ago
  • WordPress looks old, uncool, outdated, heavyweight, until service you're using gets bought and you need to evacuate. #tumblr #postereous 2 days ago
  • RT @EspuelasVox: Man-made ecological intervention gone very wrong: world's largest camel herd is in Australia http://t.co/PkZHWnfAWz 3 days ago
  • RT @Queen_UK: Denmark won because it is one of few countries that can afford to host next year. Angela Merkel sighing in almighty relief. #… 4 days ago
  • 3 out of last 5 #Eurovision were from Scandinavia, 4 out of 8 from Nordic. Coincidence? 4 days ago

Copyright © 2006-2013 Milan Dinić's Blog.

Copyright | Disclaimer | Contact