RSS

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

 

25 Ways to Learn SEO for Free

Search engine optimisation, albeit often rumoured to be dead or about to die, is getting more and more popular as a career path. It’s hardly taught anywhere formally, one of the reasons being its ever-changing nature (by the time you get a University course prepared and approved it’s already largely outdated). The bars to entry into the industry are ridiculously low – or insanely high, depending on how you look at it. There is no formal certification but there are plenty sources of information and too many of them are either outdated or complete garbage. There is no lack of SEO conferences and workshops – but many of them are quite expensive, speakers sometimes pitch their services rather than provide useful information, and travel costs do add up as well. So how do you learn SEO without making costly mistakes and spending a fortune?

Believe it or not, there are ways to do it completely free or almost free. The ways listed below range from easily doable by anyone to ones requiring certain skills/knowledge, but it all depends on your character and how willing you are to learn. Majority of these ways also require serious social skills – so while our industry is known for stories about making millions from home in your pyjamas never having to meet other people, you probably cannot afford not having social skills at all.

So let’s see how SEO education costs can be cut down to 0 or close.

ONLINE

1. Start by reading a good introductory guide – SEOMoz’s Beginner’s Guide to SEO would do. However, this is just the very beginning – don’t stop there. This is just an introduction to help you learn the lingo and be able to understand what it’s all about further on. I find it bewildering with the increasing complexity of our trade how an increasing number of people claim they know SEO after sitting in a two-week course or attending a basic conference. Don’t be like that, keep learning.

2. Read worthy industry blogs. Right, this begs the question which ones are worthy. Use the same judgement you would use evaluating any other information online – what do experienced people in the industry consider reliable sources of information?

3. Follow reputable SEOs on Twitter and read what they share. Look at lists of Twitter users by topic some people are putting together – whoever is included in most of the lists is typically the SEOPs most worth following.

4. Follow reputable SEOs on Facebook and read what they share there.

5. Follow reputable SEOs on Google+ and read what they share there.

6. Read what comes from the search engines – update announcements, interviews with engineers, help articles. But don’t just take their word for it.

7. Get a site. Some hobby site you wouldn’t be afraid to lose. Experiment with it. Track your results. Read the server logs. They make the best read once you’ve got the hang of it and provide plenty of insight.

8. Read SEO forums. Not the kind that are built around promoting a product/series of products but neutral ones where advertising is limited. Take what you read with a pinch of salt. A couple of forums to get you started: http://www.webmasterworld.com/, http://www.cre8asiteforums.com/forums/index.php and http://forums.seochat.com/ (as you get more experienced and better connected in the community you might even end up getting invited to “secret” forums, too – but unfortunately I cannot share those)

9. Participate in Google+ Hangouts, including those run by Google reps. Ask questions – not just fluffy ones but uncomfortable ones too. You may never get a reply but it doesn’t hurt to ask.

10. Regularly check SEO-related Quora discussions. Ask questions yourself.

11. LinkedIn groups and questions – many of them are spammed to death but sometimes interesting things can be spotted as well.

12. Places like AnyAsq – people including those from the search engines run “ask me anything” sessions there sometimes. Read what they say and ask questions.

13. Whenever there is a conference going on anywhere, read the tweets with the conference hashtag – you’ll be amazed how well some conferences are covered by live tweeting. However, be careful so as not to take things out of context.

14. Conference speakers usually share their slide decks – watch those. Combined with live tweets, they are almost as good as sitting in at the session.

15. Some blogs, State of Search included, publish conference recaps – read these.

OFFLINE

16. Not all conferences are paid – there are a few free ones. There is BrightonSEO in the UK and I’m pretty sure there are some in the US as well. The tickets are limited so you have to be really quick to get them when they go on offer but if you go to one of these conferences, you are sure to learn quite a bit.

17. Apart from major conferences, there are also less formal events out there that are also free. These tend to be more local (such as Search London or OMN London) but will typically have quality speakers, often even the same people that speak at the big expensive events. Make sure you go to these events.

18. There are even less informal meetups organised spontaneously with no regular schedule or place by SEOs here and there – listen closely on Twitter and Facebook when people you follow start talking about such meetups and try to get in.

19. They don’t say for no reason that the most value of any conference is in the networking – a lot of good stuff is getting shared and discussed not at the formal conference sessions but over a beer afterwards. If you hang out in the “official” conference bar/restaurant/hotel and know a few faces you may just as well end up catching these juicy bits.

20. If you are social enough or have been around long enough to be friends with somebody speaking at a conference, many conferences let speakers bring somebody with them (known as +1). If you are cheeky enough to ask a speaker for a +1 and they happen to have it available, you can make it to a conference for free.

21. Exhibitors/sponsors at conferences often get n free tickets. Many companies would just distribute them between people they know and some will run all sorts of competitions where you can win a free pass to the conference.

22. Apply to be a speaker at a conference! Speakers usually get a free pass and can attend other sessions, and who’s to say if you’re qualified enough to speak on one topic there is nothing you can learn about other topics from other speakers?

23. Some conferences will give you a discount (if not a free ticket) if you are a blogger and going to cover the conference. In some cases, you have to refer x people to buy conference tickets to get a free ticket for yourself.

24. Offer some industry blog/news site to blog/live tweet an event for them if they cover the cost of your ticket.

25. Persuade your employer the conference is good for your professional development and will help you achieve better results for the company so that the employer covers the ticket cost for you.

As you see, nothing is impossible for those who want to learn. In an industry as intensive as SEO, it is vital to stay abreast of all current developments so we all learn something new every day. Both newcomers and seasoned professionals should never stop learning, and hopefully using these tips you can make learning SEO a fun and pleasant experience and not that much of a burden on your pocket.

 
13 Comments

Posted by on September 13, 2013 in SEO

 

How to Make Mobile Friendly Websites. Responsive Web Design for Beginners

Responsive Web Design is a web design process which ensures optimal viewing experience in all displays available. The display can be of desktops, tablets, mobiles and now the increasingly popular big screens of smart televisions.
This article helps you to make your website mobile friendly or tablet friendly. This article suits for those developers who wish to convert their existing website to responsive layout or for those who wish to develop a responsive website from scratch.

Here I have listed few techniques which help you to make your website responsive. For better understanding, I have created 2 demo pages. One is not responsive and other one is responsive. I will be using these pages to illustrate each points. Here is the html which I have used for both responsive and non responsive pages.

Demo 1: Non Responsive Web Page
Demo 2: Responsive Web Page

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class=”container”><!– Main Container –>
    <div class=”header”><!– Top Header –>
        <div class=”logo-wrapper”><!– Top left for logo –>
            <img class=”logo”/>
        </div>
        <div class=”search-wrapper”><!– Top right for search –>
            <input type=”text” class=”search”/>
        </div>
    </div>
    <div class=”main”><!– Main content holder –>
        <div class=”content-wrapper”><!– Main window for content –>
            <h1 class=”title”></h1>
            <div class=”content”></div>
        </div>
        <div class=”sidebar-wrapper”><!– Right sidebar –>
            <ul class=”widget-wrapper”>
                <li class=”widget”><!– First widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
                <li class=”widget”><!– Second widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
                <li class=”widget”><!– Third widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
            </ul>
        </div>
    </div>
    <div class=”footer”></div>
</div>

 

Fluid Grids

While implementing your design from Photoshop files using html, try to avoid tables for layouts. Using tables give a less flexible layout. Use tables only for its real purpose, i.e. to display tabular data. For layout design, use div tags instead. div tags are by default block level elements. They can be floated based on our layout and will stack smoothly in small display sizes. As the term suggests, fluid grids means the grid is self adjustable. A fixed grid is defined using pixels or points, where as the width of fluid grid is defined using percentages or Ems. When we use say 90% width for the main page container div tag, the div itself will shrink when we reduce the size of screen or browser.

In the non-responsive page design demo, we have created a main parent div of 960px width and all inner sections are clearly defined using pixels. While in responsive page, we gave 68% width to main content area and 32% width for sidebar.

CSS3 Media Queries

CSS3 media queries allow a developer to set css style rules based on different display properties. The size of a mobile device may be different from that of a tablet. We use media queries to show a web page comfortably in each devices.

In our demo, we have used media queries to display all major blocks, one below the other. This layout is more comfortable for mobile users to read an article. Some websites hide some elements in smaller display devices. This helps to avoid distractions like ads or less important content.

Fluid Image size

This part is simple, yet really powerful for responsive web design. Usually we design needed image with a size which is predefined for the layout. Only thing we need to add is a width measurement in percentage. This will increase or decrease image size based on screen width.

 
6 Comments

Posted by on September 13, 2013 in CSS, HTML

 

Flexisel – Responsive Carousel jQuery Plugin

Flexisel is a responsive carousel jQuery plugin. The plugin is specifically designed with mobiles and tablets in mind.

Flexisel - Responsive Carousel jQuery Plugin

Flexisel – Responsive Carousel jQuery Plugin

Flexisel Usage

One can adjust the number of items shown based on screen width. Using the plugin is very simple. Add the images to an unordered list. Call the plugin on window.load. This allows the plugin to accurately calculate the image dimensions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(window).load(function() {
  $(“#myCarousel”).flexisel(
    visibleItems: 4,
    animationSpeed: 200,
    autoPlay: false,
    autoPlaySpeed: 3000,
    pauseOnHover: true,
    enableResponsiveBreakpoints: true,
    responsiveBreakpoints: {
      portrait: {
        changePoint:480,
        visibleItems: 1
      },
      landscape: {
        changePoint:640,
        visibleItems: 2
      },
      tablet: {
        changePoint:768,
        visibleItems: 3
      }
    }
  );
});

There is an interesting part in the set of options. One can give the responsive break point while calling the plugin. That is, we can tell the plugin to display only 3 images in tablet format and so on.

Here is how the carousel looks in a Samsung Galaxy Note 2:

Flexisel - On Samsung Galaxy Note 2

 

 
20 Comments

Posted by on September 13, 2013 in Jquery

 

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