Previously we have featured more than 30 hacks and tricks to customize WordPress. But WordPress has been through several iterations and updates since the publication of that compilation. Some WordPress functions has been dropped, some have been replaced with better approaches that render some tricks you know no longer usable.
We figured that you might want new tips, tricks and hacks that do work with the latest version of WordPress. Here are 50. As a friendly reminder, please practice caution when attempting any of the tips in the Advanced section because you might render your site unusable if you don’t know what you are doing.
1. Disabling Full-Height Editor
WordPress 4.0 added a subtle UX change in the editor. If you are scrolling or writing a length paragraph, the height of the editor will match the height of your screen, eliminating the scroll-bars inside the editor.
To reach some panels like the Excerpt and Custom Fields that reside below the editor, you need to scroll all the way down through the end of paragraph. If you don’t want this, tick the option off in the Screen Options panel.
Compatibility: WordPress 4.0
2. Embed Before and After Image Comparison
Have you ever experienced image comparison where you can slide to the right to see the before and to the left for the after? If you want to display something like that on your website, you can install TwentyTwenty. This plugin is based on Zurb TwentyTwenty. The plugin introduces a new shortcode, [twentytwenty], where you can add two images to compare.
Compatibility: WordPress 3.5.1 or higher
3. Revert Plugins or Themes to Previous Version (Easily)
As with any other system update, there is a chance that a new plugin or theme update may accidentally screw up your website. WordPress does not allow us to revert to the previous version but you can install this plugin WP-Rollback to get that functionality. Once it is activated it will add a link “Rollback” on any installed plugin.
Compatibility: WordPress 3.8 or higher
4. Organize Admin Menu
Use this plugin, Admin Menu Manager, to organize each menu order in admin via a drag-and-drop interface.
Compatibility: WordPress 4.0 or higher
5. Text Editor SyntaxHighlighter
The WordPress text-mode editor is pretty plain. You can make it more user-friendly by installing HTML Editor SyntaxHighlighter, a plugin that adds syntax coloring like in a code editor. It will make editing a lot easier, especially if you use Text-mode editor more often than the Visual (WYSIWYG) counterpart.
Compatibility: WordPress 3.3 or higher
6. Adding Icon in Menu
Follow this tip to add icon beside your website menu items giving your menu navigation more visual appeal.
Compatibility: WordPress 4.1 or higher
7. Enabling Voice Search
WordPress search is poorly built, cumbersome, and don’t let me start on its search result accuracy. But don’t let that stop you from adding voice search capability to it. Once installed you will notice a “microphone” icon appear in the search box.
Compatibility: WordPress 2.6 or higher
8. Install WordPress Plugin via Github
Did you find a WordPress plugin in Github that you want to install in your website? Follow this tip on how to install plugins conveniently with just a few clicks. Be careful though of what you install as plugins are not moderated. There may be a chance that malicious codes may allow infiltration of your website.
Compatibility: WordPress 3.6 or higher
9. Install Plugin with Single Click
For more plugin management, you could install WP-Core. This is a plugin that makes WordPress plugin installations more streamlined. You can also makes a Collection to put several plugins together and install them with one click.
Compatibility: WordPress 3.5 or higher
10. Advanced Image Styles
We used to able to set margins and borders when we insert images to the content. From WordPress 3.9 onwards, these options were removed. If you missed them, you can install this plugin to bring these options back.
Compatibility: WordPress 3.9 or higher
11. Show Disk Usage Chart
Install this plugin Disk Usage Sunburst to display a beautiful visualization, similar to DaisyDisk, of your website disk space usage. A quite useful utility to add to your website.
Compatibility: WordPress 4.0 or higher
Advanced
Beyond this point are advanced tips and tricks for those who feel like exploring, and those who enjoy getting their hands dirty with codes. However, many of the following tips may render your website unusable, hence they should be carried out with more attention and with extra caution.
12. WordPress Output Debug File
This snippet will tell WordPress to save the debug log error in a .log file instead of displaying it in the front-end. A handy snippet to enable WordPress debugging in a live site.
Compatibility: WordPress 3.1
define("WP_DEBUG", true); define("WP_DEBUG_LOG", true); define("WP_DEBUG_DISPLAY", false); 13. Using Jetpack Modules – Offline
Run and enable all Jetpack modules offline including the modules that actually requires you to connect to WordPress.com to work; a useful tip if you are developing and integrating Jetpack modules to your theme.
Compatibility: WordPress 4.1
14. Login to WordPress with Email Address
WordPress exposes a user’s username, which makes it a step easier for brute-force attacks. You can consider changing login parameters with an email and password combination instead of by username using this hack.
Compatibility: WordPress 2.5.0
15. Disable self-ping / self-trackback
This trick prevents WordPress from self-ping, which happens if you cross-link pages or posts of your own website.
function no_self_ping( &$links ) $home = get_option( "home" ); foreach ( $links as $l => $link ) if ( 0 === strpos( $link, $home ) ) unset($links[$l]); add_action( "pre_ping", "no_self_ping" );
Another way you can use is by installing Disabler plugin. It is a plugin that allows you to turn on or off certain WordPress functionality including disabling self-ping.
Compatibility: WordPress 2.0
16. Pre-Populate Content
This tip is quite useful if you want to add default content each time you create a new post, page, or custom post type content; the idea is similar to adding a standard signature when creating new emails.
Compatibility: WordPress 1.5
17. Custom Class for Post
The following tip explores some customization of WordPress Post Class thoroughly with post_class. It’s helpful if you want to be more specific with regards to your post styles.
Compatibility: WordPress 2.7
18. Adding Google Fonts (the Right Way)
Another great tip from ThemeShaper, a complete guide to add Google Font to your WordPress theme correctly. It includes how to add it in the front-end, in the editor, and how to ensure compatibility for different languages.
Compatibility: WordPress 3.0
19. Loading Alternative Template
WordPress uses single.php to show post content. If you want to change it to, perhaps, post.php, this tip will show you how to override default WordPress templates correctly.
add_filter( "template_include", "my_callback" ); function my_callback( $original_template ) if ( some_condition() ) return SOME_PATH . "/some-custom-file.php"; else return $original_template;
Compatibility: WordPress 1.5
20. WordPress Theme Customizer from Scratch
WordPress 3.4 adds a new API called Customizer which allows you to build controls to customize theme and see the result in real-time. The Customizer API may be overwhleming for some, though, as it involves multi-disciplinary code sets including PHP, JavaScript, Ajax, and jQuery.
Nonetheless, Theme Foundation has compiled a complete guide to WordPress Customizer. You will learn how to add the Customize menu, build Sections, Settings, Input Controls as well as Panels, and learn their functions all together – in and out. An essential reference for WordPress theme developers.
Compatibility: WordPress 3.4
21. Using Vagrant with WordPress
Vagrant is a great tool to create a virtual environment, and to run a test of your WordPress development to ensure that themes and plugins would work in varying instances. In this following tip, Daniel Pataki, will walk you through how to get your WordPress site up and running with Vagrant.
Compatibility: Any WordPress Version
22. Retrieving WordPress Gravatar URL
The WordPress get_avatar() is a handy function to get a user’s avatar; the function retrieves the image along with the img element. But sometimes I want to grab just the image URL so that I could freely and easily add custom classes or ids to the image.
If you have this in mind, add the following code in your functions.php:
function get_avatar_img_url() $user_email = get_the_author_meta( "user_email" ); $url = "http://gravatar.com/avatar/" . md5( $user_email ); $url = add_query_arg( array( "s" => 80, "d" => "mm", ), $url ); return esc_url_raw( $url );
Then somewhere in another file – perhaps single.php or page.php – use the following code to show the image.
$avatar_url = get_avatar_img_url(); echo "<img src=" " . $avatar_url . " ">";
Here’s a more detailed post to break it down for you.
Compatibility: WordPress 1.5
23. Remove Classes From Menu
WordPress, by default, adds a bunch of classes. While this is good to allow extensive customization, the menu HTML markup looks really cluttered. Tidy it up and add only the class you need with the snippet below.
add_filter("nav_menu_css_class", "my_css_attributes_filter", 100, 1); add_filter("nav_menu_item_id", "my_css_attributes_filter", 100, 1); add_filter("page_css_class", "my_css_attributes_filter", 100, 1); function my_css_attributes_filter($var) return is_array($var) ? array_intersect($var, array("current-menu-item")) : ""; Compatibility: WordPress 3.0.0
24. Applying SSL In WordPress Multisite
SSL, not only secures your website, but also bumps up the rankings in Google search result. In the following tip, Jenni McKinnon covers how to deploy SSL in WordPress multisites that may employ multiple sub-domains.
Compatibility: WordPress 3.0.0
25. Customizing WordPress Content Editor
Adding styles to the editor will improve the writing experience in WordPress editor. You can match the typographic styles of the backend with the front-end allowing you to see the final version (or a version as close to the final as possible) while writing. This will reduce the switching of back and forth between the editor and the content output.
function my_editor_styles() add_editor_style( "editor-style.css" ); add_action( "admin_init", "my_editor_styles" );
Compatibility: WordPress 3.0.0
26. Creating Plugin Welcome Screen
If you have just updated WordPress you will be redirected to a special screen, showing the details of the latest version you have just installed, the contributors, the additions as well as all the changes made under the hood. This tip, Creating a Welcome Screen For Your WordPress Plugin by Daniel Pataki will guide you through how to build a welcome screen for your own plugin.
Compatibility: WordPress 3.6
27. Customize Jetpack Mobile Theme
Jetpack comes with a Mobile Theme. It is a special theme that is used when the website is viewed on mobile devices. And like any other theme, we can customize it. Here’s a how-to by Jeremy, one of Jetpack developers, on how to customize the Jetpack Mobile Theme. It’s a good alternative to consider in place of responsive web design.
Compatibility: WordPress 3.8
28. Adding Featured Image To Category
Want to add a featured image for a Category and display it in your theme? This feature is missing from WordPress, which could actually be useful for theme developers.
Compatibility: WordPress 3.6
29. Display Hidden “All Settings”
A WordPress easter egg, this code snippet will add all settings in the WordPress database into one page.
function all_settings_link() add_options_page(__("All Settings"), __("All Settings"), "administrator", "options.php"); add_action("admin_menu", "all_settings_link"); Compatibility: WordPress 3.1
30. Remove Update Notification
WordPress, by default, display update notifications to all user levels when they are logged in to the backend. Add the following codes to hide WordPress update notification except for users with Administrative privilege.
global $user_login; get_currentuserinfo(); if (!current_user_can("update_plugins")) // checks to see if current user can update plugins add_action( "init", create_function( "$a", "remove_action( "init", "wp_version_check" );" ), 2 ); add_filter( "pre_option_update_core", create_function( "$a", "return null;" ) ); Compatibility: WordPress 3.0.1
31. Add Thumbnail In Post/Page Edit List
This code will display featured images you have assigned to post in the Post column. A useful trick to see which post has a thumbnail and which does not. Note that your theme should support post thumbnails.
add_filter("manage_posts_columns", "posts_columns", 5); add_action("manage_posts_custom_column", "posts_custom_columns", 5, 2); function posts_columns($defaults) $defaults["riv_post_thumbs"] = __("Thumbs"); return $defaults; function posts_custom_columns($column_name, $id) if($column_name === "riv_post_thumbs") echo the_post_thumbnail( "featured-thumbnail" ); Compatibility: WordPress 3.0.0
32. Sharpening Images
Honestly, I did not know that we could sharpen images in WordPress as we are uploading the image. Here’s how you can, but bear in mind that it only works for JPG images.
function ajx_sharpen_resized_files( $resized_file ) $image = wp_load_image( $resized_file ); if ( !is_resource( $image ) ) return new WP_Error( "error_loading_image", $image, $file ); $size = @getimagesize( $resized_file ); if ( !$size ) return new WP_Error("invalid_image", __("Could not read image size"), $file); list($orig_w, $orig_h, $orig_type) = $size; switch ( $orig_type ) case IMAGETYPE_JPEG: $matrix = array( array(-1, -1, -1), array(-1, 16, -1), array(-1, -1, -1), ); $divisor = array_sum(array_map("array_sum", $matrix)); $offset = 0; imageconvolution($image, $matrix, $divisor, $offset); imagejpeg($image, $resized_file,apply_filters( "jpeg_quality", 90, "edit_image" )); break; case IMAGETYPE_PNG: return $resized_file; case IMAGETYPE_GIF: return $resized_file; return $resized_file; add_filter("image_make_intermediate_size", "ajx_sharpen_resized_files",900); Compatibility: WordPress 2.5
33. Remove Superfluous info In The Head
WordPress adds a bunch of things in the <head> such as WordPress version, RSD Link, and Shortlink, info that’s not all that useful. To remove these bits of info, use this:
function remove_header_info() remove_action( "wp_head", "rsd_link" ); remove_action( "wp_head", "wlwmanifest_link" ); remove_action( "wp_head", "wp_generator" ); remove_action( "wp_head", "start_post_rel_link" ); remove_action( "wp_head", "index_rel_link" ); remove_action( "wp_head", "adjacent_posts_rel_link" ); // for WordPress < 3.0 remove_action( "wp_head", "adjacent_posts_rel_link_wp_head" ); // for WordPress >= 3.0 add_action( "init", "remove_header_info" );
Remove either one of remove_action from the above snippet of which you want to retain.
Compatibility: WordPress 2.0
34. Smart WP_Debug
Ideally you should not enable the WP_Debug in a live site as it will expose critical information. But if you need a trick to do so safely, here it is:
if ( isset($_GET["debug"]) && $_GET["debug"] == "1" ) // enable the reporting of notices during development - E_ALL define("WP_DEBUG", true); elseif ( isset($_GET["debug"]) && $_GET["debug"] == "2" ) // must be true for WP_DEBUG_DISPLAY to work define("WP_DEBUG", true); // force the display of errors define("WP_DEBUG_DISPLAY", true); elseif ( isset($_GET["debug"]) && $_GET["debug"] == "3" ) // must be true for WP_DEBUG_LOG to work define("WP_DEBUG", true); // log errors to debug.log in the wp-content directory define("WP_DEBUG_LOG", true); With the above code added, you can enable debugging by adding ?debug=2, ?debug=1, ?debug=3 at the end of the URL to see the error that occurs in your website.
Compatibility: WordPress 2.0
35. Enable Shortcode In Widget
The following is a useful piece of code if you want to embed Youtube or SoundCloud in the widget area with a shortcode.
add_filter( "widget_text", array( $wp_embed, "run_shortcode" ), 8 ); add_filter( "widget_text", array( $wp_embed, "autoembed"), 8 );
Compatibility: WordPress 2.9.0
36. Set Default Editor (Visual/Text)
Set the default type of editor your users can use. Change the $editor either to html or tinymce. Of course, user would still be able to opt out of the default.
function my_default_editor() $editor = "tinymce"; // html or tinymce return $editor; add_filter( "wp_default_editor", "my_default_editor" );
Compatibility: WordPress 2.5.0
37. Prolong Auto-logout
WordPress allows one to remain logged in for 48 hours, plus an extension of 14 days if we check the “Remember Me” option at login. If however you are sure your computer will not be breached by a second or third party, you can add this code to keep yourself logged in for up to a year. You will only be prompted for a login once a year.
function keep_me_logged_in_for_1_year( $expirein ) return 31556926; // 1 year in seconds add_filter( "auth_cookie_expiration", "keep_me_logged_in_for_1_year" );
Compatibility: WordPress 2.8.0
38. Always Use Figure
WordPress will wrap img with a p tag. If you are an HTML semantic purist, you can add this code to force WordPress to wrap image with the figure element.
add_filter( "image_send_to_editor", function( $html, $id, $caption, $title, $align, $url, $size, $alt ) if( current_theme_supports( "html5" ) && ! $caption ) $html = sprintf( "<figure>%s</figure>", $html ); // Modify to your needs! return $html; , 10, 8 );
Compatibility: WordPress 2.9.0
39. Change Default Role Name
“Administrator”, “Author”, and “Subscriber” are the names given for WordPress users at the administrative level. To change these default names to something that sounds more apt for your website, add the following code, then make the change to the names to what you prefer:
function change_role_name() global $wp_roles; if ( ! isset( $wp_roles ) ) $wp_roles = new WP_Roles(); $wp_roles->roles["contributor"]["name"] = "Freelance"; $wp_roles->role_names["contributor"] = "Freelance"; add_action("init", "change_role_name"); Compatibility: WordPress 3.1
40. Default Attachment Settings
Here’s a snippet that lets you specify the default size, alignment, and the link for images you want to embed in the editor.
add_action( "after_setup_theme", "default_attachment_display_settings" ); function default_attachment_display_settings() update_option( "image_default_align", "left" ); update_option( "image_default_link_type", "none" ); update_option( "image_default_size", "large" );
Compatibility: WordPress 3.5
41. Validate Featured Image
Some of us prefer posts to be released with a Featured Image. This post, Validate Featured Image On Post, by Paul Underwood will show you how to make your users upload a featured image before their post can be published.
Compatibility: WordPress 3.0
42. Custom Image Size In Media Uploader
add_image_size is the WordPress function that allows us to crop and display custom image size. If you want to allow users to add image within this custom size, add the following codes to show the “custom image size” option in the WordPress media uploader.
function pw_add_image_sizes() add_image_size( "pw-thumb", 300, 100, true ); add_image_size( "pw-large", 600, 300, true ); add_action( "init", "pw_add_image_sizes" ); function pw_show_image_sizes($sizes) $sizes["pw-thumb"] = __( "Custom Thumb", "pippin" ); $sizes["pw-large"] = __( "Custom Large", "pippin" ); return $sizes; add_filter("image_size_names_choose", "pw_show_image_sizes"); Compatibility: WordPress 3.8
43. Load Script Only If A Particular Shortcode Is Present
In a previous post we have shown you how to create a custom shortcode. If your shortcode requires a JavaScript function, follow The Jedi Master way by Silviu-Cristian Burcă (famously known as Scribu) to ensure that you only load the JavaScript when the shortcode is applied.
Compatibility: WordPress 2.6
44. Menu Description
When you add in a menu through Appearance > Menu, you will see an input to add “Description”. But you won’t find it anywhere in the front-end as we have to customize the WordPress default menu template to include the description.
Here is an elegant way to do so.
function add_description_to_menu($item_output, $item, $depth, $args) if (strlen($item->description) > 0 ) // append description after link $item_output .= sprintf("<span class="description">%s</span>", esc_html($item->description)); // insert description as last item *in* link ($input_output ends with "</a>$args->after") //$item_output = substr($item_output, 0, -strlen("</a>$args->after")) . sprintf("<span class="description">%s</span >", esc_html($item->description)) . "</a>$args->after"; return $item_output; add_filter("walker_nav_menu_start_el", "add_description_to_menu", 10, 4); Compatibility: WordPress 3.0.0
45. Using Dashicons
You can now use WordPress’s very own crafted font icon, Dashicons, to add icons to the wp-admin menu. Check out our tutorial on how to start using Dashicons.
Compatibility: WordPress 3.8
46. Customize “Howdy” Message
Follow our previous tutorial to change the WordPress nonsensical “howdy” message that appears at the admin bar to something more personalized.
Compatibility: WordPress 2.9
47. Exclude Post From The Jetpack Popular Widget
Jetpack comes with a widget that allows you to show the most viewed or popular posts and pages. But sometimes your most popular pages could be the home page or a page that you do not want to include in the most viewed pile.
Add the following code to remove that page or post:
function jeherve_remove_post_top_posts( $posts, $post_ids, $count ) foreach ( $posts as $k => $post ) if ( "1215" == $post["post_id"] ) unset( $posts[$k] ); return $posts; add_filter( "jetpack_widget_get_top_posts", "jeherve_remove_post_top_posts", 10, 3 );
Replace the ID shown in the snippet with the ID of the post or page you want to remove.
Compatibility: WordPress 4.0 and Jetpack 3.3
48. Truncate Post Title
The following snippet controls the maximum title length. Add the following snippet in functions.php. Then use the function customTitle() in the template to output the title in place of the WordPress the_title() method.
function customTitle($limit) $title = get_the_title($post->ID); if(strlen($title) > $limit) $title = substr($title, 0, $limit) . "..."; echo $title;
If you build a WordPress theme with a tiled layout where the tile height has to be equal, you might want to specify the limit of the title length. This snippet should come in handy in that case.
Compatibility: WordPress 3.0
49. Remove WordPress Logo
WordPress 3.1 adds an admin bar, which includes a handful of links and the WordPress logo. If you are going to handout websites to a client and you want it to be brandless, here is the function to remove that WordPress logo.
function annointed_admin_bar_remove() global $wp_admin_bar; /* Remove their stuff */ $wp_admin_bar->remove_menu("wp-logo"); add_action("wp_before_admin_bar_render", "annointed_admin_bar_remove", 0); Compatibility: WordPress 3.1.0
50. QR Code with Link to Article
Improve your website accessibility for mobile devices with QR codes. This code allows you to display QR codes with a link pointing to the article. Mobile users with a QR code scanner can obtain the article link for quick viewing on their mobile devices.
<img src="http://api.qrserver.com/v1/create-qr-code/?size=500x500&data=" <?php the_permalink() ?> " alt="QR Code for <?php the_title_attribute(); ?>
Compatibility: WordPress 2.3.0
Now Read:
10 WordPress Plugins For Better Backend Administration
50 Most-Wanted WordPress Tips, Tricks and Hacks
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.