RSS

Category Archives: Wordpress

Change WordPress dashboard colors

If you ever wanted to be able to change WordPress dashboard colors (as well as font or even display) without having to edit WordPress core files, you’ll like this hack for sure.
The following example features a basic style change (grey header is replaced by a blue one) but you can easily add as many styles as you wish within the <style> and </style> tags.

1.function custom_colors() {
2.echo '<style type="text/css">#wphead{background:#069}</style>';
3.}
4.
5.add_action('admin_head''custom_colors');
 
1 Comment

Posted by on September 13, 2013 in Wordpress

 

Disable the “please upgrade now” message

WordPress constantly release new versions. Although for obvious security concerns you should always upgrade; disabling the “Please upgrade now” message on client sites can be a good idea because the client doesn’t necessarily have to know about this, this is a developer’s job.

One more time, nothing hard: paste the code in your functions.php, save it, and it’s all good.

1.if ( !current_user_can( 'edit_users' ) ) {
2.add_action( 'init', create_function( '$a'"remove_action( 'init', 'wp_version_check' );" ), 2 );
3.add_filter( 'pre_option_update_core', create_function( '$a'"return null;") );
4.}
 
Leave a comment

Posted by on September 13, 2013 in Wordpress

 

How to Build Custom Dashboard Widgets

The WordPress Dashboard is a great place to see updates, or any kind of information related to your activity. In this tutorial, we’ll see how to dispose of default widgets and how to create your own custom widgets.
We are going to create a simple plugin to handle this so it can apply to any theme.
1. Create the Plugin
Create a new folder in the plugins directory (wp-content/plugins) and put a file named dashboard_widgets.php there.

<?php
/*
Plugin Name: Logichacker+ Dashboard Widgets
Plugin URI:
Description: Create custom dashboard widgets
Version: 0.1
Author: Mudasir
Author URI: https://logichacker.wordpress.com
License: GPL2
*/
Save it and it will already be available for activation in the plugins page.
We are now going to create the class that will hold our functions.

class Logichacker_Dashboard_Widgets {

function __construct() {
add_action( ‘wp_dashboard_setup’, array( $this, ‘remove_dashboard_widgets’ ) );
add_action( ‘wp_dashboard_setup’, array( $this, ‘add_dashboard_widgets’ ) );
}

function remove_dashboard_widgets() {

}

function add_dashboard_widgets() {

}

}

$wdw = new Logichacker_Dashboard_Widgets();
We will use the wp_dashboard_setup hook to bind two functions:
remove_dashboard_widgets will be used to remove the default widgets
add_dashboard_widgets will be used to add some of our own
Notice the way we bind the functions array( $this, ‘remove_dashboard_widgets’ ). Because it is a class, you have to tell WordPress the function belongs this class.
2. Define Our Widgets
Let’s create another file named custom_widgets.php. It will contain our widgets definitions (both to remove default and add new ones).
First, let’s add some widgets to be removed. It is basically an array which contains IDs of widgets to remove and information on where to delete them (page and context).
For this purpose, we will use the function remove_meta_box() as dashboard’s widgets are built as metaboxes. The function has three arguments:
ID
Page – Where can we find this widget ( dashboard / post / attachment / … )
Context – In which area is the widget located ( normal / advanced / side )
Now, let’s set those parameters:

$remove_defaults_widgets = array(
‘dashboard_incoming_links’ => array(
‘page’ => ‘dashboard’,
‘context’ => ‘normal’
),
‘dashboard_right_now’ => array(
‘page’ => ‘dashboard’,
‘context’ => ‘normal’
),
‘dashboard_recent_drafts’ => array(
‘page’ => ‘dashboard’,
‘context’ => ‘side’
),
‘dashboard_quick_press’ => array(
‘page’ => ‘dashboard’,
‘context’ => ‘side’
),
‘dashboard_plugins’ => array(
‘page’ => ‘dashboard’,
‘context’ => ‘normal’
),
‘dashboard_primary’ => array(
‘page’ => ‘dashboard’,
‘context’ => ‘side’
),
‘dashboard_secondary’ => array(
‘page’ => ‘dashboard’,
‘context’ => ‘side’
),
‘dashboard_recent_comments’ => array(
‘page’ => ‘dashboard’,
‘context’ => ‘normal’
)
);
Then, we define the custom widgets we want to add. To add WordPress custom widgets, we will use the built-in function wp_add_dashboard_widget(). The function takes several arguments:
ID
Title – Title of our widget
Callback – Function to handle the widget’s content
So let’s define our widget and set those parameters. For this tutorial, we’ll create a very simple dashboard widget that will display the current users’ last published posts.

$custom_dashboard_widgets = array(
‘my-dashboard-widget’ => array(
‘title’ => ‘My Dashboard Widget’,
‘callback’ => ‘dashboardWidgetContent’
)
);
As the callback option required a valid function to handle the widget’s content, let’s add a function for this.

function dashboardWidgetContent() {
$user = wp_get_current_user();
echo “Hello <strong>” . $user->user_login . “</strong>, this is your custom widget. You can, for instance, list all the posts you’ve published:”;

$r = new WP_Query( apply_filters( ‘widget_posts_args’, array(
‘posts_per_page’ => 10,
‘post_status’ => ‘publish’,
‘author’ => $user->ID
) ) );

if ( $r->have_posts() ) :
?>

<?php
endif;
}
Now we’ve defined the widgets we want to remove from the dashboard as well as the ones we want to create, we can focus back to our class.
3. Do the Magic!
Now, all that’s left to do is to actually add and remove those widgets.
So get back to our class and let’s fill in the blanks left in Step 1.
First of all, let’s include our widgets definition so they’ll be available in our class. Add this line at the top of dashboard_widgets.php:

require_once( plugin_dir_path( __FILE__ ) . ‘/custom_widgets.php’ );
Remove Widgets

function remove_dashboard_widgets() {
global $remove_defaults_widgets;

foreach ( $remove_defaults_widgets as $widget_id => $options ) {
remove_meta_box( $widget_id, $options[‘page’], $options[‘context’] );
}
}
To remove our widgets, we just loop through our $remove_defaults_widgets array and apply the remove_meta_box function with the parameters we set for each widget.
Be sure to “globalize” the $remove_defaults_widgets variable, otherwise you won’t be able to use it.
Add Custom Widgets

function add_dashboard_widgets() {
global $custom_dashboard_widgets;

foreach ( $custom_dashboard_widgets as $widget_id => $options ) {
wp_add_dashboard_widget(
$widget_id,
$options[‘title’],
$options[‘callback’]
);
}
}
Exact same process here, except we apply the wp_add_dashboard_widget function.
Now save and go to your dashboard, you should come to something like below:
Dashboard with custom widgets
Conclusion
Now, you can add whatever widget you want to your WordPress’ dashboard, simply by adding options and callbacks to the custom_widgets.php file.
It’s always a good idea to customize the dashboard, especially when it is for a client. You can list their last articles, comments, reminders, etc. So it becomes a convenient place to start from.
Let us know what you think in the comments below, especially if you have more suggestions on customising the WordPress Dashboard for clients.

 
3 Comments

Posted by on September 13, 2013 in Wordpress

 

How To Change “Set Featured Image” Text In WordPress

In some cases, you may wish to change the text “Set Featured Image” inside “Featured Image” admin widget. In my last project, I had to create a custom post type to upload images to a slider. The custom post type contained only title and Featured Image Box. I had to change the “Set Featured Image” text to “Upload Slider Image”. This is how I did it.

 

1
2
3
4
5
6
7
8
9
function custom_admin_post_thumbnail_html( $content ) {
    global $current_screen;
    if( ‘slider_post’ == $current_screen->post_type )
        return $content = str_replace( __( ‘Set featured image’ ), __( ‘Upload Slider Image’ ), $content);
    else
        return $content;
}
add_filter( ‘admin_post_thumbnail_html’, ‘custom_admin_post_thumbnail_html’ );

 

Above code was added to my theme functions.php file. Also slider_post is the name of my custom post type. If the “if” condition was not there, the text change will be applied to all post types including posts, pages etc.

 
Leave a comment

Posted by on September 13, 2013 in Wordpress

 

How To Add Custom Dashboard Widgets to WordPress

After signing in to WordPress admin, you can see various dashboard widgets like Right Now, Quickpress etc. Let us see how can we add our own dashboard widget. If you are developing a theme, you can write the needed code inside functions.php file. If you are developing a plugin, you can write the code anywhere in the plugin file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// Function that outputs the contents of the dashboard widget
function dashboard_widget_function() {
    echo “Welcome to cube3x statistics”;
}
// Function used in the action hook
function add_dashboard_widgets() {
    wp_add_dashboard_widget(‘cube3x_dashboard_widget’, ‘Custom Dashboard Widget’, ‘dashboard_widget_function’);
}
// Register the new dashboard widget with the ‘wp_dashboard_setup’ action
add_action(‘wp_dashboard_setup’, ‘add_dashboard_widgets’ );
?>
 
Leave a comment

Posted by on September 13, 2013 in Wordpress

 

How To Show “Time Ago” Style Dates In WordPress

In most of the themes, date and time are shown along with post title. Dates are shown below post titles. Date and time are shown below post comments. The format of dates may be mm-dd-yyyy, Month Day, Year or any other formats which the web admin likes.

It is more useful sometimes to display date and time in “Time Ago” style. It looks like 14 hours ago, 2 days ago, 3 weeks ago, 3 years ago etc. WordPress supports this style using human_time_diff() function. You can convert dates to this format using the code given below.

1
2
3
4
5
//To print post entry’s time (“2 days ago”):
echo human_time_diff( get_the_time(‘U’), current_time(‘timestamp’) ) . ‘ ago’;
//To print comment’s time:
echo human_time_diff( get_comment_time(‘U’), current_time(‘timestamp’) ) . ‘ ago’;
 
1 Comment

Posted by on September 13, 2013 in Wordpress

 

Customise The WordPress Login Page Once more

In this tutorial we are going to look at the WordPress login page, with WordPress you can customise anything you want and this includes the built in WordPress login page.

We are going to bring all these together and how you can add your own CSS to customise the login page and plugins you can use to customise your login page.

The reason you would want to customise the WordPress built in login page is so you can add a bit more customisation to your clients websites.

You can even add your own branding to this page so your clients will see your logo each time they go to your login page.

Change Login Page URL

To get to the WordPress login page you need to navigate to the http://yourdomain.com/wp-login.php, but if your end user doesn’t do much web work they might forget or get confused when entering wp-login.php.

It’s up to you, the developer to make it as easy as possible for the end user to get to the login page.

You can change the URL they use to get to login page by adding the following into your htaccess file.

RewriteRule ^login$ http://YOUR_SITE.com/wp-login.php [NC,L]

This allows the user to navigate to http://yourdomain.com/login and they will be redirected to your login page.

Remove Lost Password Link

Wordpress reset password
If someone has hacked your email account they will be able to get your WordPress password and shut down your site completely.

Below is a WordPress snippet that allows you to remove the lost your password text from the login screen, just add the following in your functions.php file.

function remove_lostpassword_text ( $text ) {
     if ($text == 'Lost your password?'){$text = '';}
        return $text;
     }
add_filter( 'gettext', 'remove_lostpassword_text' );

Change WordPress Login Logo

Here is the snippet to change the logo on the login screen.

All you have to do is copy this code into your functions.php file and change the image to the image you want to use and it’s done.

function custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('. get_bloginfo( 'template_directory' ) .'/images/logo.jpg) !important; }
    </style>';
}

add_action('login_head', 'custom_login_logo');

Change Login Logo URL

The default logo link will point to the wordpress.org site, you can change this and point it to your own blog site by using the following snippet.

function my_login_logo_url() {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

The above changes the logo link to your blog url and will change the title of the link to anything you want.

Hide Login Error Messages

On the WordPress login page if you type in an incorrect username or password it will return an error message to say that your username or password was incorrect.

The below picture lets me know that the username I am using doesn’t exist and I need to try something else.

But if the username does exist and I just get the password wrong WordPress will display this message.

Now I know that there is a user called admin and I can keep trying this until I get the password right.

Yes, this is a very helpful message for real users of the site as they can see what has gone through. But for hackers this means they get a nice message on they have got wrong, meaning they will also know what they have got right.

There is a login page hook to access to remove any error message from the login page.

Copy the following in your functions.php file.

add_filter('login_errors',create_function('$a', "return null;"));

Remove Login Page Shake

When a remove types in an incorrect username or password WordPress will display a error message on the page. It will alert the user of the incorrect username or password by shaking the screen.

Some people don’t like this feature as it can be quite annoying, to remove the shake from being ran you can use the following function.

Just add this to your functions.php to remove an action from the login head.

function my_login_head() {
	remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

Display A Custom Message

You can display your own custom message on the login form by using the WordPress action register_form. This message can say anything that you want but most people use this to display custom instructions on any requirements when logging in to the WordPress admin.

Use the following snippet to add your message on the login page.

add_action('register_form', 'login_form_message');
function login_form_message() {
    echo '<p>Custom Login Form Message</p>';
}

Set Remember Me To Be Checked

By default the checkbox is always unchecked, so you have to select it each time. I prefer this to checkbox to be selected each time so I don’t have to keep clicking on the login page.

Here is a snippet you can add to your functions.php file which will make sure that the checkbox is always checked when you go to the login page.

function login_checked_remember_me() {
	add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
	echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Create Custom Login Page CSS

Changing the WordPress logo on the login page isn’t the only thing you can do with the CSS on the login page. You can actually overwrite all the CSS on the page by adding your own CSS file to the page.

You can add CSS to the page by using the login action login_enqueue_scripts.

Use the below snippet to add extra CSS to the page.

function my_login_stylesheet() { ?>
    <link rel="stylesheet" id="custom_wp_admin_css"  href="<?php echo get_bloginfo( 'stylesheet_directory' ) . '/style-login.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Login Page CSS Selectors

To be able to change all of the styles on the login page you need to know what CSS selectors you can use. Below are all the selectors you can change on the login page.

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Login Page Hooks

With WordPress you use hooks and filters to add your own functionality to existing WordPress functions. The login page is no different, in the head of the page there are two actions, login_enqueue_scripts and login_head.

The actions at the bottom of the page are login_form, login_footer.

There are filters in the body of the login form which allows you to change the content which is loaded. These filters are: login_headerurl, login_headertitle, login_message, login_errors.

Create Your Own WordPress Login Page

The default WordPress login form is normally used for admin users to login in to enter content, but WordPress can be used for so much more.

You can use it as an ecommerce website and allow customers to login in to your site before being able to buy something. If you are allowing your users to login to manage their account you don’t want them to go to the default WordPress dashboard you want to create your own user dashboard.

As these are two different forms you need to be able to create a new form, if you want to manage the users from your WordPress dashboard then you can use the default WordPress login functionality on your own login form.

To create your own login form you need to use the WordPress function wp_login_form().

Login Form Arguments

There are a number of arguments you can pass to your login form to customise it as you want.

<?php $args = array(
        'echo' => true,         // To echo the form on the page
        'redirect' => site_url( $_SERVER['REQUEST_URI'] ),   // The URL you redirect logged in users
        'form_id' => 'loginform',                            // Id of the form
        'label_username' => __( 'Username' ),                // Label of username
        'label_password' => __( 'Password' ),                // Label of password
        'label_remember' => __( 'Remember Me' ),             // Label for remember me
        'label_log_in' => __( 'Log In' ),                    // Label for log in
        'id_username' => 'user_login',                       // Id on username textbox
        'id_password' => 'user_pass',                        // Id on password textbox
        'id_remember' => 'rememberme',                       // Id on rememberme textbox
        'id_submit' => 'wp-submit',                          // Id on submit button
        'remember' => true,                                  // Display remember me checkbox
        'value_username' => NULL,                            // Default username value
        'value_remember' => false );                         // Default rememberme checkbox

wp_login_form( $args );
?>

Examples Of Login Pages

 
1 Comment

Posted by on September 5, 2013 in Wordpress