How to Disable the WordPress Admin Bar

When you are logged into your WordPress site, the software automatically displays a toolbar at the top of the page. And whether you’re looking at the site from your dashboard or the front page of your website – the toolbar is always there. For many users, this is rather annoying and even more so when your developing the site.

If you’re a developer, this toolbar can really throw off the design of your front page, particularly if you have some CSS detail, which may be obscured by the admin bar. Even if you’re not a developer, you may find the admin bar too distracting.

So the question we have today is; can you somehow get rid of this little annoyance? Yes, and thankfully, you can remove it in just a few short minutes. Today, we’re going to show you how to disable your WordPress admin bar from your website using various methods.

How to Remove the WordPress Admin Bar Directly From the Dashboard

First, you need to login into your WordPress website and enter the dashboard. In order to disable the admin bar, click on Users and find Your Profile underneath it. There, under Keyboard Shortcuts, you’ll see Toolbar. You just uncheck the “Show toolbar when viewing the site” box right next to it.

And you’re actually all done. By unchecking this box, you won’t be able to see the toolbar on the front-end of your website. Of course, the software will continue to display it on the back-end of the site.

Due to the fact that the admin bar displays useful information like quick links to the front, creating new pages and posts, and access to your profile, you should definitely leave this version of the admin bar as is – after all, it contains some of the more important information about your website.

How to Disable the WordPress Admin Bar Using CSS

While the first method is without questions the easiest, this is a close second in terms of difficulty. You only have to copy and paste the CSS code below in Appearance > Customize > Additional CSS, or your style.css file.

The CSS code to disable the toolbar is:


#wpadminbar { display:none !important;}

How to Remove the WordPress Admin Bar Using a Plugin

While the solution above may be easy it isn’t the only way to remove the toolbar. You have a ton of plugins that are able to help you with the same problem. The most popular plugin is the Hide Admin Bar designed by Shelby DeNike which currently has 30,000+ active installs and a rating of 4.5/5 stars.

Luckily, there’s nothing to configure here at all, all you need to do is download the plugin, active it and your toolbar will be gone. It doesn’t get easier than that.

On the other hand, if you want to hide the toolbar for some user roles, you should download the Admin Bar Disabler by Scot Kingsley Clack instead. This plugin gives you an actual interface, where you can:

  • Blacklist the toolbar for certain users
  • Whitelist the toolbar for certain users
  • Disable the toolbar for everyone

You need to go to Settings and click on the Admin Bar Disabler. From there, you can customise everything you want. Although there are other toolbar-disabling plugins out there, we feel like these two are the best. If you can avoid using a plugin then that’s even better as too many plugins can obviously slow your site down; that and you can achieve the same in just a few lines of code without a plugin!

How to Remove the WordPress Admin Bar with Code

If you don’t want to download any additional plugins, don’t worry, you can also disable the toolbar with code. There are a few different ways to go about this and this is our preferred method out of them all.

For starters, if you want to disable the toolbar for all users, simply add this piece of code in your theme’s functions.php file:


add_filter('show_admin_bar', '__return_false');

Another code you can use that will disable the toolbar if added in functions.php is the following one:


function hide_admin_bar(){ return false; }
add_filter( 'show_admin_bar', 'hide_admin_bar' );

But maybe you don’t want to disable the toolbar for everyone. If you want to allow the users with administrative privileges to see the toolbar, you should just add this code instead:


if ( ! current_user_can( 'manage_options' ) ) {
 add_filter('show_admin_bar', '__return_false');

And that’s all. As you can see, you don’t need to be a expert programmer to complete this task.

How to Remove Parts of the WordPress Admin Bar With Code

If you are looking for an easy solution to remove certain elements from the Toolbar you can do this using a code. First of all, you will need to search for the toolbar node ID for the element you want removed. You can find out more about this here.

For example, if you want to remove the WordPress logo from the toolbar use this code:


add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );
function remove_wp_logo( $wp_admin_bar ) {
    $wp_admin_bar->remove_node( 'wp-logo' );
}

Easy enough, right?

Summary

In the end, whether you think the toolbar is affecting your design or you simply find it distracting, you know you can completely remove it whenever you want. We hope this little guide showed you that removing the admin bar is not such a hard job.

Also, keep in mind that you can always:

  • Remove the admin bar from your dashboard
  • Remove the toolbar using CSS
  • Download a plugin that will hide the admin bar
  • Use your coding skills to remove it
  • Or remove certain parts from it
  • Of course, if you have any questions, or know have a unique way of removing the admin bar, let us know in the comment section below.

It’s good to share

How to create a WordPress Shortcode

The shortcode API allows you to create your own shortcodes by adding functions to your theme functions.php template (this can be found; www.your-site.co.uk/wp-content/themes/yourtheme/).

Let’s get straight to the point and start with a basic shortcode function.

Please remember that shortcodes should be created for content and functionality that you use frequently. The whole point of using shortcodes is to save someone time. If you are only going to use something once, there is not much point in creating a shortcode for it.

Let’s create a very simple shortcode that will display today’s date, to do this I would start by adding a function such as this to my theme’s functions.php template:


// Add Shortcode
function shortcode_todays_date() {

// Code
$widget_content  = "Today is " . date("d/m/Y");
return $widget_content;
}
add_shortcode( 'todays_date', 'shortcode_todays_date' );

Those of you who have no coding experience may find the above code a little daunting, however it is easy to understand once you break the code down line by line.

Even if you have no experience you can go to this website to generate the shortcode code for you.

After saving the functions.php template, we can now call our message whenever we want using the shortcode todays_date.


[todays_date]

The above will output Today is DD/MM/YYYY.

It’s as simple as that, I hope this has helped you.

It’s good to share

How to completely remove comments from a WordPress Site

It’s quite simply really, just add the following code to your functions.php file:-


/**
 * Disable Comments
 */
 
 // Disable support for comments and trackbacks in post types
function df_disable_comments_post_types_support() {
	$post_types = get_post_types();
	foreach ($post_types as $post_type) {
		if(post_type_supports($post_type, 'comments')) {
			remove_post_type_support($post_type, 'comments');
			remove_post_type_support($post_type, 'trackbacks');
		}
	}
}
add_action('admin_init', 'df_disable_comments_post_types_support');

// Close comments on the front-end
function df_disable_comments_status() {
	return false;
}
add_filter('comments_open', 'df_disable_comments_status', 20, 2);
add_filter('pings_open', 'df_disable_comments_status', 20, 2);

// Hide existing comments
function df_disable_comments_hide_existing_comments($comments) {
	$comments = array();
	return $comments;
}
add_filter('comments_array', 'df_disable_comments_hide_existing_comments', 10, 2);

// Remove comments page in menu
function df_disable_comments_admin_menu() {
	remove_menu_page('edit-comments.php');
}
add_action('admin_menu', 'df_disable_comments_admin_menu');

// Redirect any user trying to access comments page
function df_disable_comments_admin_menu_redirect() {
	global $pagenow;
	if ($pagenow === 'edit-comments.php') {
		wp_redirect(admin_url()); exit;
	}
}
add_action('admin_init', 'df_disable_comments_admin_menu_redirect');

// Remove comments metabox from dashboard
function df_disable_comments_dashboard() {
	remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
}
add_action('admin_init', 'df_disable_comments_dashboard');

// Remove comments links from admin bar
function df_disable_comments_admin_bar() {
	if (is_admin_bar_showing()) {
		remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
	}
}
add_action('init', 'df_disable_comments_admin_bar');

And there you have it, comments will be removed from all frontend pages and all backend pages in the CMS control panel.

I hope this has helped! 🙂

It’s good to share

How to create a WordPress Widget

A WordPress widget makes it easy for users to simply drag and drop elements into their site. There are many WordPress themes and plugins that use widgets to allow users to create their own layouts. In this article, we will show you how to create your own custom WordPress widget from scratch.

What is a WordPress Widget?

A WordPress widget were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. The great thing about widgets is that you can drag and drop them into your sidebars or any widget ready areas of your website. This allows great flexibility to plugin and theme developers. They can add functionality into their products and let users decide when and where to use that functionality without messing with code. Similarly, as a user you can also create your own widgets in a site-specific plugin, so that you can drag and drop them into any theme you are using.

Creating your first Widget in WordPress

In this demonstration we are going to add the widget through our functions.php file. We are going to create a simple widget that displays the current date and time. Take a look at this code and then paste it in your site-specific plugin to see it in action:-


// Creating the widget 
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget', 

// Widget name will appear in UI
__('WebTricks Time Widget', 'wpb_widget_domain'), 

// Widget description
array( 'description' => __( 'Sample widget based on Web-Tricks Tutorial', 'wpb_widget_domain' ), ) 
);
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output
$widget_content  = "Today is " . date("d/m/Y");

echo __( $widget_content, 'wpb_widget_domain' );
echo $args['after_widget'];
}
		
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( '', 'wpb_widget_domain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php 
}
	
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

// Register and load the widget
function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Now go to Appearance --> Widgets, drag and drop WebTricks Time Widget in your sidebar to see this custom widget in action.

Simple wasn't it? First we created a custom widget. Then we defined what that widget does and how to display the widget back-end. Then we defined how to handle changes made to widget. Lastly, we registered and loaded the widget.

Now there are a few things that you might want to ask. For example, what wpb_text_domain does? WordPress uses gettext to handle translation and localization. This wpb_text_domain and __e tells gettext to make a string available for translation.

We hope this tutorial helped you learn how to create a custom WordPress widget. Let us know what widgets you are creating, by leaving a comment below.

If you have moved the widget into your sidebar, you can go to one of your WordPress pages to see the output code which will display the following:-

Today is DD/MM/YYYY.

I hope this helps!

It’s good to share

How to add Widget Areas to your WordPress Theme

WordPress widgets make it easy for users to simply drag and drop elements into their website. There are many WordPress themes and plugins that use widgets to allow users to create their own layouts. We are going to show you how to create your own custom WordPress widget.

You may for example want to create a footer widget area so that you can drag widgets into your footer. By default, WordPress only comes with a Sidebar Widget area so you may need to extend this for different elements of your website. We are going to show you how to create a footer widget for your WordPress Theme.

There are three main parts to introducing a footer widget area in your theme:

  1. Registering the Sidebar(s) in the WordPress Theme
  2. Inserting the Sidebars In the WordPress Theme
  3. Putting some style into the sidebars

Firstly, you need to open up your functions.php file and add the following code:-


/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function webtricks_area_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'webtricks_area' ),
		'id'            => 'sidebar-1',
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<p class="widget-title xstrong">',
		'after_title'   => '</p>',
	) );
	register_sidebar(array(
		'name' => 'Footer',
		'before_widget' => '<div id="%1$s" class="col-md-3 widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<p class="footer-title">',
		'after_title' => '</p>',
	));
}
add_action( 'widgets_init', 'webtricks_area_widgets_init' );

This will place the Sidebar Widget and add a Footer Widget into your WordPress Theme by going to Appearance –> Widgets:-

widgets-area

The next step is adding your widget area into your theme so for this example you will want to open up your footer.php file and add the following code:-


<div id="sub-footer">
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) ?>
</div>

I have wrapped the code in a sub-footer DIV so I can apply additional styles to my footer. In my example, I am using Bootstrap, as you can see I am using ‘col-md-3’ which will create a 4 block footer. If you are not using Bootstrap you can just add the following styles:- (otherwise Bootstrap will take care of most of the styling for you)


.col-md-3 {
    width: 23%;
    float: left;
    margin: 1%;
}
@media (max-width: 768px) {
    .col-md-3 {
        width: 100%;
        float: none;
        margin: 0;
    }
}

The above CSS will create a 4 block footer which will float each widget you add side by side. And then for lower screen resolutions and mobiles it will stack them on top of each other.

You should now have a new Widget Area called ‘Footer’ you can drag widgets into 🙂

It’s good to share

How to Hide WooCommerce “Free” Price Label

A common WooCommerce problem I find from time to time is removing the “Free” price label in the product / category and shop pages. If you have tried removing these either with CSS or by editing a load of the WooCommerce files, you will realise this can be quite a frustrating task. Well in order to speed things up for you here is an easy solution to quickly hide all those “Free” price labels just by adding the following code to your to your theme’s functions.php in the usual manner (theme-name/functions.php), or perhaps to your custom site plugin and you should be free of this “Free!” label.


add_filter( 'woocommerce_variable_free_price_html',  'hide_free_price_notice' );
 
add_filter( 'woocommerce_free_price_html',           'hide_free_price_notice' );
 
add_filter( 'woocommerce_variation_free_price_html', 'hide_free_price_notice' );
 
 
 
/**
 * Hides the 'Free!' price notice
 */
function hide_free_price_notice( $price ) {
 
  return '';
}

Let us know if this helped you!

It’s good to share