12 Hacks and Tips to Declutter Your WordPress

Declutter your WordPress!

I love WordPress. In my mind, it has that perfect balance between being easy to use and being powerful for developers. Over the years I've developed my own techniques for the sites we build at Select Performers. One of my bugbears is clean and uncluttered code and the same goes to the design. One issue with WordPress is that it is just so easy to add lots and lots of plugins that end up clogging up the code and design. I'm going to share with you some code that will declutter your WordPress. Of course, these are just my examples, but please do feel free to use and to tweak. I've also put most of the code below in my own "Must Use Plugin" which you can view on GitHub here - I call it the Select WP Plugin.

To use any of the following examples, you can add them to your functions.php or custom.php file in your WordPress theme. You could, of course add them to a plugin or add as a must use plugin as I do. This would result in less cluttered code. Do whatever you feel comfortable with.

---

#1 Remove Help & Screen Options from the Dashboard

When many of our clients log on to the WordPress dashboard for the first time, it can be a little overwhelming an experience at first. Although WordPress is easy to use, the WordPress dashboard can end up with lots of clutter and unnecessary dashboard plugins. I'll come on to how you can remove most of these shortly, but first of all, here is how to remove the "screen options" and "help" options at the top right of the dashboard. Most of our clients won't need these on the dashboard and I'd like to keep things simple.  The code came from brasofilo on this WordPress StackExchange post.

/* ------------------------------------------------------ */
// Remove help and screen context & Options
// http://wordpress.stackexchange.com/questions/73561/how-to-remove-all-widgets-from-dashboard
add_filter( 'contextual_help', 'wpse_25034_remove_dashboard_help_tab', 999, 3 );
add_filter( 'screen_options_show_screen', 'wpse_25034_remove_help_tab' );

function wpse_25034_remove_dashboard_help_tab( $old_help, $screen_id, $screen )
   {
      if( 'dashboard' != $screen->base )
      return $old_help;
      $screen->remove_help_tabs();
      return $old_help;
   }

function wpse_25034_remove_help_tab( $visible )
   {
      global $current_screen;
      if( 'dashboard' == $current_screen->base )
      return false;
      return $visible;
   }
/* ------------------------------------------------------ */

---

#2 Remove Admin Bar

The other thing that just needs to go, is the WordPress admin bar. You'll have your own view, but I think it's too "in your face" and clunky. I've come up with my own subtle approach in the form of a faded button that appears on the bottom left of the screen when you are logged in. I'll come on to that in a bit, but I thought I'd include the remove admin bar code by Yoast which I included in my previous WordPress Hacks post:

/* ------------------------------------------------------ */
// Disable the Admin Bar.
// From: http://yoast.com/disable-wp-admin-bar/
add_filter( 'show_admin_bar', '__return_false' );

function sp_hide_admin_bar_settings()
{
?><style type="text/css">.show-admin-bar {display: none;}</style><?php
}

function sp_disable_admin_bar()
{
add_filter( 'show_admin_bar', '__return_false' );
add_action( 'admin_print_scripts-profile.php', 'sp_hide_admin_bar_settings' );
}
add_action( 'init', 'sp_disable_admin_bar' , 9 );
/* ------------------------------------------------------ */

---

#3 Create Simple Admin button

So now that we have removed the admin bar, let's add that subtle button to the bottom left. You may need to tweak the code a little for your needs, but this works for me. I'm using a faded grey curved shape with a cog that appears on the bottom left of the screen when logged in. When you click on it, you get a menu that gives you the option to go to the dashboard, edit the post/page or log out. I am using the font library Font Awesome to display the cog, so you'll have to have that installed. If not, just change the <i class="icon-cog"></i> and the other icon tags to whatever you like.

/* ------------------------------------------------------ */
// Select Performers Admin Button
// This function creates a subtle button on the bottom left of the screen when logged in
// When you click on the button a simple WP admin bar appears
// Note, you should hide the standard WP bar
// You need Font Awesome installed to show the button
function sp_custom_login()
{
$current_user = wp_get_current_user();
$displayName = $current_user->display_name;
$logout = wp_logout_url("/");

if(is_user_logged_in())
{
echo '<style>
.adminEdit {position:fixed;bottom:20px;left:10px; z-index:9999; display:none;}
.adminEdit p { background:#dedede; opacity:0.8; padding:10px; border:#ababab 1px solid; font-size:0.9em; border-radius:5px;}
#admin-menu-show { position:fixed; bottom:-50px; left:-50px; border-radius:50px;width:100px; height:100px; background-color:#333; opacity:0.2; z-index:9999;}
#admin-menu-show:hover {opacity:0.7;}
#admin-menu-show:active {opacity:1; background-color:#900;}
#admin-menu-show i { color:#fff; font-size: 90px;padding-left: 10px;display: block;margin-top: 10px;}
#admin-menu-show:hover {cursor:pointer;}
</style>';
echo "<script>jQuery(document).ready(function ($) { $('#admin-menu-show').click(function() { $('.adminEdit').toggle('fast');});});</script>";

}
if ( current_user_can('edit_post'))
{
edit_post_link("<i class=\"icon-edit\"></i> Edit Page","<div class=\"adminEdit\"><p><i class=\"icon-user\"></i> $displayName logged in | <a href=\"$logout\" title=\"Log Out\"><i class=\"icon-signout\"></i> Log Out</a> | <a href=\"https://iag.me/wp-admin/\" title=\"Go to Dashboard\"><i class=\"icon-cog\"></i> Dashboard</a> | ","</p></div>");
?><div id="admin-menu-show" title="Show Admin Bar"><i class="icon-cog"></i></div><?php
}
elseif(is_user_logged_in())
{
echo "<div class=\"adminEdit\"><p><i class=\"icon-user\"></i> $displayName logged in | <a href=\"$logout\" title=\"Log Out\"><i class=\"icon-signout\"></i> Log Out</a>";
?><div id="admin-menu-show" title="Show Admin Bar"><i class="icon-cog"></i></div><?php
}
}
add_action('wp_footer', 'sp_custom_login');
/* ------------------------------------------------------ */

---

#4 Remove Dashboard Title and insert an IFRAME

Coming back to that dashboard, we have some more decluttering to do. We've removed the help and screen options, but we could remove the dashboard title and insert content from elsewhere using an IFRAME. I don't use this technique myself currently, but if you want to have full control over what goes on your dashboard then this might be your option. Again the code comes from  brasofilo on another WordPress StackExchange post.

/* ------------------------------------------------------ */
// Remove Dashboard Title and insert an IFRAME
// http://stackoverflow.com/questions/13505155/how-to-insert-a-full-height-iframe-into-a-blank-wordpress-dashboard/13505156#13505156
add_action( 'admin_head-index.php', 'wpse_73561_dashboard_scripts' );

function wpse_73561_dashboard_scripts() 
{
    ?>
        <style>
            .wrap h2, .postbox .handlediv, #icon-index { display:none }
            #wpcontent { margin-left:0 !important }
        </style>
        <script language="javascript" type="text/javascript">   
            function sizeIFrame() 
            {
                var helpFrame = jQuery("#myframe");
                var innerDoc = (helpFrame.get(0).contentDocument) 
                ? helpFrame.get(0).contentDocument 
                : helpFrame.get(0).contentWindow.document;

                helpFrame.height(innerDoc.body.scrollHeight + 35);
            }

            jQuery(function() 
            {
                sizeIFrame();
                jQuery("#myframe").load(sizeIFrame);
            });

            jQuery(document).ready(function($) 
            {
                $('#wpbody').html(
                    '<iframe src="http://example.com" 
                     frameborder="0" id="myframe" 
                     style="margin:0;padding:0;left:0;top:0" 
                     scrolling="auto" 
                     width="100%" height="100%"></iframe>'
                );
            });
        </script>   
    <?php
}

---

#5 Remove Annoying Dashboard Widgets

Usually I want to keep the WordPress dashboard but remove all the dashboard widgets that pop up from WordPress itself or common plugins. I've modified some code from the wonderful Jeff Starr on this article on DigWP. It removes the core WordPress admin dashboard widgets as well as ones from PowerPress, Broken Links Checker and more.

/* ------------------------------------------------------ */
// Remove Dashboard Widgets
// http://digwp.com/2010/10/customize-wordpress-dashboard/

function disable_default_dashboard_widgets()
   {
      // disable default dashboard widgets
      remove_meta_box('dashboard_right_now', 'dashboard', 'core');
      remove_meta_box('dashboard_recent_comments', 'dashboard', 'core');
      remove_meta_box('dashboard_incoming_links', 'dashboard', 'core');
      remove_meta_box('dashboard_plugins', 'dashboard', 'core');
      remove_meta_box('dashboard_recent_drafts', 'dashboard', 'core');
      remove_meta_box('dashboard_quick_press', 'dashboard', 'core');
      remove_meta_box('dashboard_recent_drafts', 'dashboard', 'core');
      remove_meta_box('dashboard_primary', 'dashboard', 'core');
      remove_meta_box('dashboard_secondary', 'dashboard', 'core');
      remove_meta_box('rg_forms_dashboard', 'dashboard', 'normal;'); 
      remove_meta_box('blc_dashboard_widget', 'dashboard', 'normal;'); 
      remove_meta_box('powerpress_dashboard_news', 'dashboard', 'normal;');
      // disable Simple:Press dashboard widget
      remove_meta_box('sf_announce', 'dashboard', 'normal');
   }
add_action('admin_menu', 'disable_default_dashboard_widgets');

---

#6 Stop TinyMCE in WordPress 3.x messing up your HTML code

If you like a bit more control over your WordPress posts and you're happy to use HTML, you'll have noticed that WordPress likes to try and clean up things- particularly when you switch between visual and text editors. This is plain annoying, but this piece of code posted by Phil Middlemass on the leighton blog (which itself was taken from this post on WP Engineer) does the trick...

/* ------------------------------------------------------ */
// Stop TinyMCE in WordPress 3.x messing up your HTML code
// http://www.leighton.com/blog/stop-tinymce-in-wordpress-3-x-messing-up-your-html-code
function override_mce_options($initArray)
   {
        $opts = '*[*]';
        $initArray['valid_elements'] = $opts;
        $initArray['extended_valid_elements'] = $opts;
        return $initArray;
    }
add_filter('tiny_mce_before_init', 'override_mce_options');
/* ------------------------------------------------------ */

---

#7 Remove Plugin Clutter from Widgets and Menus

We've removed most of the clutter from the dashboard, but some plugins make it difficult and they also add clutter to their menus. If you inspect the code on these pages you may be able to find the id or class for the widget. You can then hide it by using a bit of custom CSS. I use the following code which removes clutter from W3 Total Cache, Better WP Security and Yoast's WordPress SEO plugin:

/* ------------------------------------------------------ */
// Remove Clutter by hiding widgets using CSS
add_action('admin_head', 'wp_remove_clutter');

function wp_remove_clutter()
{
echo '<style>
.toplevel_page_better-wp-security .side, #w3tc-dashboard-widgets, #wpseo_content_top + .postbox-container {display:none;}
</style>';
}
/* ------------------------------------------------------ */

---

#8 Convert absolute URLs in content to site relative ones

There seems to be a war between developers who want to use full URLS or relative ones. I am in the site relative camp. WordPress really needs to move over to this, but I don't think it ever will. To clarify, an absolute URL includes the site root. For example https://iag.me/tech/this-is-a-test-post/. The problem with this method is that it is long and is not portable. If I change the domain of my blog (or wish to use a dev and main site) I have to change all the instances of the URLS in the whole WordPress database. A site relative URL gets rid of the site root, for example: /tech/this-is-a-test-post/. The following code converts all links from absolute to site relative ones when you submit a post or a page (taken from thisismyurl.com)

/* ------------------------------------------------------ */
/* Convert absolute URLs in content to site relative ones
   Inspired by http://thisismyurl.com/6166/replace-wordpress-static-urls-dynamic-urls/
*/
function sp_clean_static_url($content) {
   $thisURL = get_bloginfo('url');
   $stuff = str_replace(' src=\"'.$thisURL, ' src=\"', $content );
   $stuff = str_replace(' href=\"'.$thisURL, ' href=\"', $stuff );
	return $stuff;
}
add_filter('content_save_pre','sp_clean_static_url','99');
/* ------------------------------------------------------ */

---

#9 Add Confirmation Box When Publishing Pages & Posts

I don't know if this has happened to you, but I've published a post by accident before it's ready. This means it gets mailed out to my subscribers, added to Triberr and my RSS subscribers get the unfinished post. This simple piece of code is a lifesaver and really should be part of the WordPress core. When you click the publish button you get a dialogue box asking you if you want to publish the post. Brilliant! A huge thanks to Jesse Gardner for this code on this GitHub Gist.

/* ------------------------------------------------------ */
// Add confirmation dialogue box when publishing posts/pages
// https://gist.github.com/plasticmind/4337952
/* = Add a "molly guard" to the publish button */

add_action( 'admin_print_footer_scripts', 'sr_publish_molly_guard' );
function sr_publish_molly_guard() {
echo "
<script>
jQuery(document).ready(function($){
$('#publishing-action input[name=\"publish\"]').click(function() {
if(confirm('Are you sure you want to publish this?')) {
return true;
} else {
$('#publishing-action .spinner').hide();
$('#publishing-action img').hide();
$(this).removeClass('button-primary-disabled');
return false;
}
});
});
</script>
";
}

---

#10 Add Featured Image and Link Back to Original Post in RSS feed

I'm a big fan of featured images. Not all themes use them, but when I am building custom themes for clients I always use them. It allows you to have an image at the top of an article and listed on the home page and blog pages. The problem is that the featured image doesn't get used in the RSS feed. This bit of code adds it at the top of the article entry. I've also added some code that links back to the original article on the website. You may want to add copyright information here. The following code makes sure the RSS feed uses the excerpt as opposed to the whole article, but you can easily change that. The code comes from Paul Und.

// ------------------------------------------------------------------------------
// Include Featured Image & Add Link Back To Original Post
// http://www.paulund.co.uk/7-tips-to-improve-your-wordpress-rss-feed
// ------------------------------------------------------------------------------
function feed_copyright_disclaimer($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$featuredImage = '<p style="text-align:center;"><a href="' . get_permalink() . '">' . get_the_post_thumbnail($post->ID,"medium-large") .
'</a></p>';
}
$content = $featuredImage."<p>".get_the_excerpt()."</p>".'<p><a href="' . get_permalink() . '">Read all of this article</a> on the website.</p>';
return $content;
}

add_filter('the_excerpt_rss','feed_copyright_disclaimer');
add_filter('the_content_feed','feed_copyright_disclaimer');
// ------------------------------------------------------------------------------

---

#11 Make WordPress Captions HTML5 Compliant & Responsive

This one is a bit more geeky but still important. If you or your clients have ever used captions when inserting images in WordPress you may have been frustrated by the way it works. The problem is, WordPress hard-codes the width to the image. This is fine unless your site uses a responsive design where the image will break the layout when viewed on a mobile device. The following code changes the caption code to use proper HTML5 compliant code and allow your site to remain responsive. You will need to add your own CSS code if you want to beautify it, but this was a life saver for me recently for a client's site:

/* ------------------------------------------------------ */
// Filter to replace the  shortcode text with HTML5 compliant code
// http://codex.wordpress.org/Function_Reference/add_filter
function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
extract(shortcode_atts(array(
'id' => '',
'align' => '',
'width' => '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $val;

$capid = '';
if ( $id ) {
$id = esc_attr($id);
$capid = 'id="figcaption_'. $id . '" ';
$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
}

return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >'
. do_shortcode( $content ) . '<figcaption ' . $capid
. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);

---

#12 Add non-US Address Support to Gravity Forms

Finally, I wanted to share some code for you Gravity Form lovers out there. I do realise that this isn't to do with decluttering, but it is a way to to improve WordPress. Gravity Forms is (in my opinion) the best forms plugin out there. It's very powerful and I use it on all our clients' websites. Unfortunately, Gravity Forms seems to be fairly US-centric and only caters for US addresses in their forms. You can select "international" but that isn't very flexible. The following code snippets allow you to add support for UK, Australian and Brazilian addresses. With a bit of messing around you would be able to modify them for other countries too. Let me know what you think! They all come from this wonderful article on WPSites.

United Kingdom

/* ------------------------------------------------------ */
// Add UK Address support to Gravity Forms
// http://wpsites.net/web-design/add-country-specific-address-code-to-gravity-forms-address-fields-for-aus-u-k/

add_filter("gform_address_types", "uk_address", 10, 2);
function uk_address($address_types, $form_id){
$address_types["uk"] = array(
"label" => "UK",
"country" => "United Kingdom",
"zip_label" => "Postcode",
"state_label" => "County",
"states" => array(""=>"","Aberdeenshire"=>"Aberdeenshire","Angus/Forfarshire"=>"Angus/Forfarshire","Argyllshire"=>"Argyllshire","Ayrshire"=>"Ayrshire","Banffshire"=>"Banffshire","Bedfordshire"=>"Bedfordshire","Berkshire"=>"Berkshire",
"Berwickshire"=>"Berwickshire","Blaenau Gwent"=>"Blaenau Gwent","Bridgend"=>"Bridgend","Buckinghamshire"=>"Buckinghamshire","Buteshire"=>"Buteshire","Caerphilly"=>"Caerphilly","Caithness"=>"Caithness",
"Cambridgeshire"=>"Cambridgeshire","Cardiff"=>"Cardiff","Carmarthenshire"=>"Carmarthenshire","Ceredigion"=>"Ceredigion","Cheshire"=>"Cheshire","Clackmannanshire"=>"Clackmannanshire",
"Conwy"=>"Conwy","Cornwall"=>"Cornwall","Cromartyshire"=>"Cromartyshire","Cumberland"=>"Cumberland","Denbighshire"=>"Denbighshire","Derbyshire"=>"Derbyshire","Devon"=>"Devon","Dorset"=>"Dorset",
"Dumfriesshire"=>"Dumfriesshire","Dunbartonshire/Dumbartonshire"=>"Dunbartonshire/Dumbartonshire","Durham"=>"Durham","East Lothian/Haddingtonshire"=>"East Lothian/Haddingtonshire","Essex"=>"Essex","Fife"=>"Fife",
"Flintshire"=>"Flintshire","Gloucestershire"=>"Gloucestershire","Gwynedd"=>"Gwynedd","Hampshire"=>"Hampshire","Herefordshire"=>"Herefordshire","Hertfordshire"=>"Hertfordshire","Huntingdonshire"=>"Huntingdonshire",
"Inverness-shire"=>"Inverness-shire","Isle of Anglesey"=>"Isle of Anglesey","Kent"=>"Kent","Kincardineshire"=>"Kincardineshire","Kinross-shire"=>"Kinross-shire","Kirkcudbrightshire"=>"Kirkcudbrightshire",
"Lanarkshire"=>"Lanarkshire","Lancashire"=>"Lancashire","Leicestershire"=>"Leicestershire","Lincolnshire"=>"Lincolnshire","Merthyr Tydfil"=>"Merthyr Tydfil","Middlesex"=>"Middlesex",
"Midlothian/Edinburghshire"=>"Midlothian/Edinburghshire","Monmouthshire"=>"Monmouthshire","Morayshire"=>"Morayshire","Nairnshire"=>"Nairnshire","Neath Port Talbot"=>"Neath Port Talbot",
"Newport"=>"Newport","Norfolk"=>"Norfolk","Northamptonshire"=>"Northamptonshire","Northumberland"=>"Northumberland","Nottinghamshire"=>"Nottinghamshire","Orkney"=>"Orkney",
"Oxfordshire"=>"Oxfordshire","Peeblesshire"=>"Peeblesshire","Pembrokeshire"=>"Pembrokeshire","Perthshire"=>"Perthshire","Powys"=>"Powys","Renfrewshire"=>"Renfrewshire",
"Rhondda Cynon Taff"=>"Rhondda Cynon Taff","Ross-shire"=>"Ross-shire","Roxburghshire"=>"Roxburghshire","Rutland"=>"Rutland","Selkirkshire"=>"Selkirkshire","Shetland"=>"Shetland","Shropshire"=>"Shropshire",
"Somerset"=>"Somerset","Staffordshire"=>"Staffordshire","Stirlingshire"=>"Stirlingshire","Suffolk"=>"Suffolk","Surrey"=>"Surrey","Sussex"=>"Sussex","Sutherland"=>"Sutherland","Swansea"=>"Swansea","Torfaen"=>"Torfaen",
"Vale of Glamorgan"=>"Vale of Glamorgan","Warwickshire"=>"Warwickshire","West Lothian/Linlithgowshire"=>"West Lothian/Linlithgowshire","Westmorland"=>"Westmorland",
"Wigtownshire"=>"Wigtownshire","Wiltshire"=>"Wiltshire","Worcestershire"=>"Worcestershire","Wrexham"=>"Wrexham","Yorkshire"=>"Yorkshire")
);
return $address_types;
}

Australia

/* ------------------------------------------------------ */
// Add Australian Address support to Gravity Forms
// http://wpsites.net/web-design/add-country-specific-address-code-to-gravity-forms-address-fields-for-aus-u-k/
add_filter("gform_address_types", "aus_address", 10, 2);
function aus_address($address_types, $form_id){
$address_types["australia"] = array(
"label" => "Australia",
"country" => "Australia",
"zip_label" => "Postcode",
"state_label" => "State",
"states" => array("NT"=>"NT", "ACT"=>"ACT","NSW"=>"NSW", "QLD"=>"QLD", "VIC"=>"VIC", "WA"=>"WA","SA"=>"SA", "TAS" => "TAS")
);
return $address_types;
}

Brazil

/* ------------------------------------------------------ */
// Add Brazilian Address support to Gravity Forms
// http://wpsites.net/web-design/add-country-specific-address-code-to-gravity-forms-address-fields-for-aus-u-k/
add_filter("gform_address_types", "brazilian_address", 10, 2);

function brazilian_address($address_types, $form_id){
$address_types["brazil"] = array(
"label" => "Brasil",
"country" => "Brasil",
"zip_label" => "CEP",
"state_label" => "Estado",
"states" => array("", "Acre", "Alagoas", "Amapa", "Amazonas","Bahia", "Ceara", "Distrito Federal", "Espirito Santo", "Goias", "Maranhao", "Mato Grosso", "Mato Grosso do Sul", "Minas Gerais", "Para", "Paraiba", "Parana", "Pernambuco", "Piaui", "Roraima", "Rondonia", "Rio de Janeiro", "Rio Grande do Norte", "Rio Grande do Sul", "Santa Catarina", "Sao Paulo", "Sergipe", "Tocantins")
);
return $address_types;
}

---

Conclusion

I hope you found these snippets useful. Let me know what you think. Have you got any snippets you use? As always, let me know in the comments below.