Lynda Damiata

What’s new in CSS3 Values and Units?

Oct 272011
 

by David Storey |
about.me/dstorey ::

css3In CSS3 the values and units we can use in CSS properties are defined in the appropriately named CSS Values and Units specification, with the exception those relating to colour and images, and the pre-defined keywords specific to individual properties.

This spec gives us one new CSS wide keyword to play with (the initial keyword), five new relative units for lengths, five new functional notations, and various new types and units to support new CSS3 modules such as Grid and Flexbox layout, Transitions, and Transforms.

CSS-wide initial keyword

CSS2.1 added the first CSS-wide keyword to every property with the inherit keyword. CSS3 adds to this with the initial keyword. When you set a property’s value to initial it will set the value to what is defined as the initial value in the CSS specification for that property. Note that this is sometimes, but not always the same as the default value set in the user-agent style sheet. For example the initial value for various margin and padding properties is 0, but the default value given by the user-agent depends on the element to which it applies.

The initial keyword can be useful if an element is inheriting unwanted styles and the original styling is desired. It is probably not something you will need to use often, but it is a useful tool to have on occasions. This is currently only supported by WebKit and Firefox (with moz prefix: -moz-intitial).

Take a look at the initial keyword demo I prepared to see this in action. This currently requires a Gecko or WebKit browser at the time of writing.

Font relative length units

The rem unit

The rem unit is perhaps my favourite new part of CSS3 Values. It stands for root em, and if you already understand how ems work (I assume that is most of you?) then you’ll be right at home. They are only subtly different, but it makes them easier to work with.

The root part of the name refers to the root element, or the html element in HTML and the initial svg element in SVG. With regular ems the size of 1em is set to value of the font-size property of the current element, or the size of the parent element’s text size when used with the font-size property itself. The font size varies from element to element, so the size of an em is not consistent across the document. This requires a lot of calculation when you are tying to line elements up or are tying to compose text to a vertical rhythm.

The rem value however stays consistent across the document, as 1rem is always the same size as the font-size of the html element (or root of which ever language you are using). If you want a margin to be a certain length, you just need to calculate it once for any element. If you want to make the maths as easy as possible you can set the html element to have a font-size of 10px (or another multiple of 10), then set the desired body copy size on the body element, such as font-size: 1.2rem for 12px. Now you get the scalability benefits of ems along with the ease of use and predictability of pxs.

The only downside is the browser support. Its supported in IE9, Firefox 3.6+, Safari 5+ and Chrome. It is also coming to Opera 12, which should hopefully be released soon. As Opera users generally upgrade fast, and Firefox <3.6 is only around 1% market share, your only real issue in the near feature will be those users stuck on IE6–8. Using a fallback is easy if you set the root font size to 10px, as you can set every size you set in rems to the equivalent px size. For example 2rem is 20px, 1.7rem is 17px, and so on. It adds a lot more page weight however.

I’ve prepared a rem unit demo which shows how you can follow a vertical rhythm using this unit.

The ch unit

The ch unit is equal to the width of the 0 (zero) glyph in the font used by the current element. This is mostly useful when using monospace fonts, where all glyphs are the same width. For example, if you have a pre element where you want it to wrap after a 55 of characters, you can use width: 55ch; unit.

This unit is currently only supported by Internet Explorer 9 and Firefox.

Viewport relative lengths

There are three viewport relative lengths: vh, vw, and vm. These are relative to the size of the initial containing block, or in other words the viewport. If you resize the viewport, such as changing the size of the browser window, then the size of elements specified in these units will change.

The vw unit

This is relative to the width of the viewport. One vw unit is 100th of the width of the viewport. If the viewport is 1000 pixels wide then 10vw would map to 100px.

The vh unit

The vh unit works the same way as vw, but is relative to the height of the viewport instead.

The vm unit

The vm unit maps to whichever of the viewport width or hight is the smallest. There is some talk of dropping this as the same can be achieved using the min() functional notation.

These new units can be very useful if you don’t want something to end up larger than the viewport. One use case I’ve had for these is while using multi-column layout. You often don’t want text using multi-column to be taller than the screen size as the user will have to scroll up and down for each column. With vh you could use for example height: 95vh which would make it 95% of the height of the viewport, no matter how tall the viewport is. You could also imagine them being useful for things like slide shows, video players, and mobile.

You might think these units sound great, but unfortunately they currently only work in IE9 and above, so it will be some time before we can used them.

The rest

There are new units for angles (deg, grad, rad, and turn units) and times (s, ms units. These are used in CSS3 2D/3D Transforms, and CSS Transitions respectively. There are also new units for frequencies (Hz, kHz units). These are used in the CSS3 Speech module.

There are new layout specific units: fractions using the fr unit, and grid units using the gr unit.

It doesn’t make too much sense covering these, without coving the full spec for which they are used, so I will leave them for a later date. There are also five functional notations, which require in-depth explanation, so they deserve their own post. I will cover these in the near future. These are mathematical expressions (calc(), min() and max()), cycling values (cycle()), and attribute references (attr()).

I hope you find some useful ways to use these new values and units that we now have to play with.

How to Design a Mobile Responsive Website

Oct 272011
 

Elaine Simpson | October 25th, 2011 |

responsive web designTo build a mobile site or not to build a mobile site; this is a question at the forefront of many a discussion. There is, however, another option: responsive web design. When, why, and how should you go about designing a responsive website?

With mobile internet users set to surpass desktop internet users in the US by 2015, with tablets becoming more popular, and even with TV internet usage increasing, it’s important for companies to provide a great user experience for all their visitors no matter what device they’re on. How does responsive design help us do this? Well, by allowing us to create one website solution that is flexible for different screen widths. It uses flexible grids and clever styles to present the same content to a user, but displays that content in a format that suits the width of the device. Check out this beginner’s guide to responsive web design for a more detailed introduction.

Why should you design a responsive site?

There are many options to consider when a client asks for a mobile solution for their website, and the suitability of these options depend on the business requirements and budget; it’s also important to consider any existing solutions or sites they already have. Creating a responsive website isn’t a complete mobile strategy, and won’t answer every brief, but, especially if you are starting a website from scratch, you should consider it as a very serious option.

So why would you decide to create a website this way?

You’re starting from scratch

Developing a whole new website or web application is a challenging process. You won’t know if the site will be successful until it’s live and in the world, so creating a separate mobile site or a mobile app in tandem with a website project could be a big waste time and money. It’s more efficient to get your new site performing well before you create an additional mobile site or application.

You want to keep costs low

Solid responsive solutions require additional design and front-end development time, but doesn’t too heavily impact application development. It could take around 20-30 per cent longer to develop a responsive site, but it’s still faster than creating an additional mobile site or app. Developing a site this way also means that you only need to develop, manage, and maintain the one site, so it can reduce these costs too.

You want it to work even when new devices are released

A mobile site needs to be able to recognize the user’s device; when new devices are released, the site needs to be updated. As the responsive solution only recognizes the browser’s width, no new updates would need to be made. This means it’s much more future-proof and scalable.

The process

Let’s talk through the process of creating a responsive website using a hotel website example. This last September, Equator released the new Macdonald Hotels website. Macdonald Hotels are a UK hotel chain with 47 hotels and resorts across the UK and Spain. We created the new site for them that included a new site structure, extensive hotel content, and a new booking engine. Here are the steps we went through and also some considerations you should think about when designing a responsive website.

These are the key steps:

  • Research/scoping: Understanding the additional requirements for a responsive site
  • Wireframing: Grid structures and layouts for the site considering different screen widths
  • Look and feel: Style considerations
  • Building the site: HTML & CSS issues

Research and scoping

Research is always a very important stage in the design process so it’s worth putting a little extra consideration into the people who will be using different devices. Understanding how these different users may want to use the website on a variety of devices will help you to decide what the priorities are on the project.

  • What different goals will a user have on different devices? Questions like this are starting to become more redundant. In the past we’ve assumed that mobile users have been task-driven, e.g. I want to get the hotel’s address; I want to book something quickly. But now people on any device are just as likely to leisurely browse the Internet as they are to need to complete a task quickly. It is worth considering though, as thinking about users’ goals in this way could help you prioritize content for the site, irrelevant of what device the visitor is using.

image responsive

  • What technical considerations do we need to make for functionality and content? Think about how any complicated functionality may work on different devices. Although a responsive site will only change the CSS depending on the width if there are complicated elements that rely heavily on JavaScript, they may not translate well on a smaller device and it could be worth hiding these.

Wireframing

The logic behind how the styles should change can be a bit hard to define and the magic of it will really come out in the build of the site, but we need a way to start defining the different width stages of the layout. We choose to look at 3 screen widths, a desktop, iPad and iPhone. We felt these covered what our requirements were, but for your project you should consider what widths are important for you to think about—you may even need to look at bigger screen widths for TV internet usage.

At this point of the project you should already the key templates that you’ll need to wireframe, but you shouldn’t need wireframes for all these templates in the different widths. The main goal here is to help define the logic behind how the CSS will change the look of the page, so focus on pages that have very different layouts. For us we looked at the home page, all the booking process pages, the hotel pages, offer pages as well as some generic layouts. Each of these covered our different column layouts, content types and key functionality.

Getting started

First, define the grid structure for each key width. We created 3 pages for the screen widths 1024px (Desktop), 768px (iPad portrait), 320px (iPhone portrait), then we needed to define a grid structure for each of these widths.

image2 responsive

  • A very simple grid structure with equal column widths on each layout made it easier for us to plan for components wrapping as the width changed.
  • Creating the master template As you create each wireframe you’ll need to think about the columns and how the components within these will adapt as the page width shrinks&mdashe.g. what happens When you have less space? If you have four columns of content? When you change to a three-column width? There should always be ongoing communication between the designer and the front end developer to answer any issues about what you can do with components visually and in the CSS.
  • Starting on the home page You may feel like there is another page that has a higher importance than the home page, but this was where we started. Here is our finished original wireframe. You can see the mobile page length is quite a bit larger due to the content wrapping over one column.

image3 responsive

Main navigation

We created a simple horizontal top navigation that would have a fluid width to change with the screen size. As the screen reduced the menu items would get closer together, then wrap on to the next line when necessary. This works for desktop, laptop and tablet widths, but going further down we wanted to create a menu that would suit the devices better. This gave us the menu split over two columns for the mobile device.

image4 responsive

  • Other header components are aligned right and would just shift along as the page width reduced.Remember when you are styling the navigation to think how it will work as the screen sizes changes. Certain styles, such as using tabs, may be difficult to get to work and look good as the screen width reduces.
  • Footer Our footer is pretty simple, just think about what content you want and how it will change as the width changes and the columns reduce—this could be as simple as components wrapping underneath each other.

image5 responsive

  • Other components Our simple grid structure made it easier to plan out our components. On the home page we used a horizontal scroller that had four components that would scroll across on a click. Our tablet layout let us keep this component but just amend it to only show three items, then on our phone width we removed the scrolling functionality completely and instead displayed each item vertically. Each component you design may require different behaviours, so think about how the visitor will want to use the component on different screen sizes. Phone users are more comfortable scrolling down a page than using small buttons to interact with the page.

image6 responsive

  • Test it straight away As soon as you have created your first wireframe test it on the relevant device straight away. It’s easy to get the image on a simple web page and take a look at how it looks and feels to scroll down. This will let you know early on if your wireframe is working. Testing in this way gave us clues really early on what was and wasn’t working. If you look at this wireframe you should quickly see our first issue.As the user navigated through the site they would only see these first two page elements&mdashthe navigation and the search panel. This means that the user may be unsure if the page has changed, as well as where they actually are on the site. This was solved simply by putting these items in show/hide panels—letting the user get into the content much faster.Adding the tablet and mobile versions to your user testing process will give you a lot of useful feedback too. Now that your wireframes are created, tested, amended and approved it’s time to make them look good for all your screen widths.

Look and feel visuals

It isn’t necessary to create visuals for every wireframe. The main objective is to cover all the styles that will be required to create the HTML and CSS. There will be a little bit of a crossover for wireframes and visuals, some styles that will be required for the mobile where there wasn’t a need for an initial wireframe.

  • Styling the page: Think about keeping your styles simpler for your mobile version—what’s great about CSS3 is that you don’t need lots of images to get great styled effects, but these still take a bit of time to load.
  • Thinking about font: Make sure your font sizes are going to be readable on each device. They’ll have to be much larger on the mobile device to ensure readability.

Also, be prepared for your visuals to change when it gets translated into the build of the site. There always should still be balance between what looks good on a flat visual and what will work when the site is being developed. The final site isn’t too far away from our look and feel visuals, take a look here and you can compare with the live site.

image9 responsive

Building the site

Building the HTML and CSS is a challenge all of its own, so I won’t discuss this is much detail, but here are a few things to think about.

  • The impact of image sizes: The site will need to load in the full size images even if the CSS scales them down, so try to keep image sizes as low as possible. There can be some nifty JavaScript tricks though to make the site run smoother. On this site we initially loaded in the smallest image size, and then used JavaScript to decide if a larger image was then needed.
  • Use advanced CSS:
    It’s important to get the client behind the idea of using advanced CSS styles, allowing the site styles to degrade as the browser capability does. This lets you keep site loading times low.
  • Constant communication is required: The project will always go smoother if the team speak to each other, so from both designer and developer it’s good to discuss problems and solutions as soon as they turn up.

It’s worth taking a look at our front end developer Jamie Boyd’s take on the front end development of the Macdonald Hotels website for responsive design.

So what does all this mean?

If you are thinking about convincing your client to have their new site designed and developed in a responsive way, firstly you should consider if it really is the right solution for them, then you’ll need to be able to persuade them of the benefits and communicate that it will add more time to the project. But, I do believe that this is how more sites will be developed in the future.

We’ve all learned so much on this project about developing a responsive website. We were lucky to have a client who was as keen as us to create something new and innovative and from that we’ve created a site we’re all proud of.


Customizing the WordPress Dashboard For Your Clients

Oct 212011
 

Harish Chouhan on Sep 16th 2011 |
wp.tutsplus.com ::

wordpress box image

Have you recently started using WordPress for your client’s project and want to further impress your client with better packaging? This article will focus on packaging WordPress so that, in just few minutes after completion of a project, it will feel more unique to the client and not have the generic feel.

 

A great product comes with great packaging. When you develop a website for your client, packing it well adds the additional feel good factor. Most clients don’t understand the efforts that you have put into creating a dynamic website, or the 1000 lines of code that you have written to create a custom plugin. All they care about is what they see.

WordPress out of the box is well designed & looks as good as any commercial product. Few extra touches would further make it more personal to the client instead of looking general. This article will focus on packaging WordPress better in just few minutes after completion of a project to make it feel more unique to the client and not have the generic feel. Without going into the detailed explanation of WordPress core functions, we will only focus on quick customization.

3 ways to perfectly end a WordPress project before handing over to your client

“All they care about is what they see.”

  1. Remove and replace generic elements like WordPress Logo, Footer signature
  2. Remove unwanted sections from WordPress Dashboard
  3. Install plugins to optimize website & make it more fast & secure

 

Step 1.1 Customize Login Page Logo

wordpress login panel

When a client wants to access the WordPress admin, the first thing they will notice is the login page with a WordPress logo. Wouldn’t it be better if this page had the logo of your client’s company or maybe yours? There are many simpler ways to do this using plugins that allow other customization options too. But I personally prefer setting this using the powerful WordPress functions.php file.

If you have a functions.php in your custom theme, open it and if not, create a file named funtions.php and place it inside the theme folder.

Add below lines in the functions.php file:

// CUSTOM ADMIN LOGIN HEADER LOGO

function my_custom_login_logo()
 {
     echo '<style  type="text/css"> h1 a {  background-image:url('.get_bloginfo('template_directory').'/images/logo_admin.png)  !important; } </style>';
 }
 add_action('login_head',  'my_custom_login_logo');

Note

The path “images/logo_admin.png” is relative to the main theme folder and needs to be changed based on the location of your logo image. Make sure to have additional white space in the image below the logo, otherwise the warning message might touch the logo. Now as you can see with just a few lines, we are able to customize the logo of the login page without the need of a plugin. WordPress is very modular software with thousands of functions if not more. We can hook into any function and modify the default settings through the use if a functions.php file or through plugins. Using the above code we have simply used the hook login_head() and added our own function to it. Similarly you can even further and add your own stylesheet to the login page.

wordpress login with logo

Step 1.2 Customize Login Page Logo link & ALT text.

If you click on the logo on the login page, it will take you to www.wordpress.org. The alt text of this link is “Powered by WordPress”. Using the same functions.php file we can now modify the link and the alt text to anything we want.

// CUSTOM ADMIN LOGIN LOGO LINK

function change_wp_login_url()
{
echo bloginfo('url');  // OR ECHO YOUR OWN URL
}add_filter('login_headerurl', 'change_wp_login_url');

// CUSTOM ADMIN LOGIN LOGO & ALT TEXT

function change_wp_login_title()
{
echo get_option('blogname'); // OR ECHO YOUR OWN ALT TEXT
}add_filter('login_headertitle', 'change_wp_login_title');

In earlier example, we used add_action and in above example we used add_filter. What’s the difference? Well both are WordPress hooks, only difference is that we used add_action for large functions and add_filter to modify text before its sent to the database or the browser.

 

Step 1.3 Customize Dashboard Logo

custom wordpress login
Once we login and are in the backend of WordPress, there is another small logo of WordPress displayed on top. It’s small but if you wish to change it, then add below code to the same functions.php file we created in above step.

// CUSTOM ADMIN DASHBOARD HEADER LOGO

function custom_admin_logo() {
echo '<style type="text/css">#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/logo_admin_dashboard.png) !important; }</style>';
}
add_action('admin_head', 'custom_admin_logo');

As you can see, the format is almost same as we used to change login page logo. Only thing that changes is the hook. In this case we are adding our function in the admin_head() hook.

 

Step 1.4 Customize WordPress footer

In the footer of WordPress backend, you would notice this link “Thank you for creating with WordPress. • Documentation  • Freedoms • Feedback • Credits”. WordPress deserves all the credit we can ever give for making such a wonderful piece of application. However for those of you who want to one step further and modify this we have another WordPress hook to our rescue.

// Admin footer modification

function remove_footer_admin ()
{
echo '<span id="footer-thankyou">Developed by <a href="http://www.designerswebsite.com" target="_blank">Your Name</a></span>';
}
add_filter('admin_footer_text', 'remove_footer_admin');

You can add your own website link and name and also any other links you wish such as link to support website, or your email address.

 

Step 2 Removing the sections from dashboard which your client’s do not require

In the WordPress dashboard, you will notice many sections such as, Plugins, WordPress news, etc.

wordpress dashboard
Do your clients really need to see details of new plugins, WordPress News & Blog Updates? Am sure hey are better off without seeing all these things.
The sections are added using the wp_dashboard_setup() hook and same can be used to remove them. Simply copy paste the below code in your functions.php file to get rid everything except the most required sections.

// REMOVE META BOXES FROM WORDPRESS DASHBOARD FOR ALL USERS

function example_remove_dashboard_widgets() {    // Globalize the metaboxes array, this holds all the widgets for wp-admin    global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);    unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);    unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);} add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

This function can also be extended to add new boxes or to remove the boxes such as “Incoming Links”, “Quick Press” and others.

 

Step 3 Further optimizing & securing using plugins.

WordPress has more than 15,000 plugins. Now if you wish to experiment, you would be better off doing it on your own website and not that of your clients. Below are list of plugins organized in different categories that I have used for almost every single project I have made in last 12 months.

General Security & Backup

  1. Login LockDown - A decent plugin that improves the security of your WordPress site by limiting the number of failed login attempts from a given IP range.
  2. WP-DBManager - Useful for Database optimization and backup. It also can email a copy of database after each backups.
  3. IDrive - The best & cheapest backup plugin. This plugin is offered for free by the folks of IDrive. The plugin backs up your WordPress core files, uploads & database daily to IDrive servers.

General Purpose

  1. Delete-Revision - Very useful and allows easy deletion of multiple revisions.
  2. 404 Notifier  - Easy way to get a list of 404 errors from your WordPress admin. You probably would not need this plugin forever, but its useful to install it when launching a new project.
  3. WordPress Import - Always better to install and activate this plugin. This is a required plugin when you want to import WordPress data.
  4. Velvet Blues Update URLs - A really handy plugin useful when we move WordPress site to different server. Without using PHP MyAdmin, users can change reference of all URL’s in the database to the new URL.

Optimization & Caching

  1. WP Super Cache - Simplest Cache plugin. Has more options for advanced user, but the plugin requires no custom setup and can be used by even beginners to optimize the speed of their website
  2. WP Minify - This plugin in combination with above plugin can have a huge impact on your website. If you use tools like Google’s PageSpeed and Yahoo’s YSlow, you will see considerable impact on the performance of your website
  3. WordPress Gzip Compression - This also helps in compressing your website, but make sure your server is compatible as the plugin causes issues on some hosting accounts.

Analytics & SEO

  1. All in one SEO - This is the most used SEO plugins. If you do not wish to develop your own SEO features for your client, this plugin can be very helpful to add Meta tags to your website dynamically.
  2. Simple Google Sitemap - Basic plugin that creates XML sitemap and submits to Yahoo, Google & Bing search engines.
  3. Google Analyticator - Allows us to see Google Analytics data directly in the WordPress admin. Very useful for client projects, as Analytics does help & inspire anyone to make their websites better.
  4. PostRank - Free plugin from the company “PostRank” which was recently bought by Google. The plugin allows you to see a rating for your post based on how its shared over social sites like Twitter, Facebook, etc.

Other Advanced plugins to further customize WordPress

  1. Adminimize - Allows us to remove unwanted links & content from the dashboard. Perfect for websites developed for clients.
  2. Admin Menu Editor - Same as above but focused on Menus. I have developed websites using WordPress that does not have a blog, and this plugin has come in handy to hide the “Posts” menu.

Conclusion

At the end, if the project cost permits, try generating a report of your clients website using http://gtmetrix.com/. This website allows us to generate report using Google PageSpeed & Yahoo’s YSlow tools. Hard to get a score of 100, but if your website is properly developed and does not use lot of external scripts such as 3rd party live chat plugins, then getting a score about 80, would not be difficult.

In this article we just briefly covered the customization options. Just like any other software the more you dig in, you would love WordPress.

 

 

12 Useful Customization and Branding Tweaks for the WordPress Dashboard

Oct 212011
 

Connor Turnbull on Sep 27th 2011 |
wp.tutsplus.com ::

wordpress dashboard

The dashboard is somewhat the heart of a blog. It controls all the content and the options of your blog. But, as we know, WordPress is not a custom product specific to one type of blog, but rather something that has been created to accommodate a wide variety of bloggers. Therefore, the contents of the dashboard can be pretty generic and might need a bit of customizing to be optimized for your website’s type. This is where plugins and tweaks come in. Today, we’ll take a look at some methods of customizing parts of your dashboard.

1. Branding The Login Screen

The login screen is your first contact with the WordPress dashboard, and it’s branding is all controlled through some CSS that’s pretty simple to manipulate. By adding custom styles, we can brand our copy of WordPress which can be especially favorable for client work or just those that don’t want the WordPress logo hanging everywhere. The code below adds our custom logo (max. 326px wide) to the login screen.

function login_styles() {
echo '<style type="text/css">h1 a { background: url('. get_bloginfo("template_directory") .'/images/wdt_logo.png) no-repeat center top; }</style>';
}
add_action('login_head', 'login_styles');

The code above simply changes the style that sets WordPress’s default logo to the one you specify, whether it uses the bloginfo function to locate it within your themes’ directory, or not.

Modifying the background is also very simple, and is all handled by just styling the html tag with a background style, image or solid color. By using a combination of both the style we defined above, and the one below, we can create a result similar to the image below which is significantly different to what WordPress provides us by default.

function login_styles() {
echo '<style type="text/css">html { background: #f0f0f0 url('. get_bloginfo("template_directory") .'/images/wdt_bg.png) !important; }</style>';
}
add_action('login_head', 'login_styles');

wordpress login screen


2. Removing Dashboard Menus

I don’t know about you, but there’s some parts of the Dashboard I never use, meaning they’re just left to bulk up the menu. This is unnecessary, and can easily be fixed by removing them with a function. It’s a very common tweak that I use in almost most cases with my own blogs.

In the example below, we’ve removed the Links item, but you simply have to add in another item to the array to remove another.

function remove_menus () {
global $menu;
$restricted = array(__('Links'));
end ($menu);
while (prev($menu)){
$value = explode(' ',$menu[key($menu)][0]);
if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
}
}
add_action('admin_menu', 'remove_menus');

If, however, we wanted to remove both the Links and Media items, we’d swap out the thrid line of the code above for the one below. From there, it’s simple to pick up on the pattern and choose your own ones to remove.

$restricted = array(__('Links'), __('Media'));
wordpress menu tiems

 

3. Customising the Admin Bar (Plugin)

WordPress introduced the admin bar in 3.1 (extending it in 3.2) to provide some quick links throughout the blog, that can be turned on and off on a user-by-user basis. This plugin customizes that bar, even going as far as to disable it entirely.

With the plugin, you get a few extra options such as a site-wide disabling of the admin bar and/or the content bump (the 28px margin that pushes your site down to accommodate the admin bar, that can cause problems with some layouts). Additionally, you can choose who sees the admin bar, so, for example, you can disable the bar for specific groups like Subscriber or Contributor.

Additionally, and potentially more interestingly, you can define custom CSS for the admin bar within the plugin’s dashboard page. Conveniently, the plugin pre-fills the input field with all the available CSS styles you can use.

4. Adding Custom Dashboard Widgets

The WordPress dashboard is a canvas for widgets, but some of them are, quiet frankly, useless. I certainly remove quite a lot of them from my dashboard, such as the WordPress news and under-featured QuickPress.

With the code below, we can add our own widgets to the dashboard. This can be useful to add custom stats, or maybe to provide contextual help. It’s pretty simple to do so, simply place whatever you want to appear within the second function. Make sure you replace your name with the third parameter of the function on line 3 too.

function my_custom_dashboard_widgets() {
global $wp_meta_boxes;

wp_add_dashboard_widget('custom_help_widget', 'My Widget Title', 'custom_dashboard_help');
}

function custom_dashboard_help() {
echo 'My widget content';
}

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

wordpress custom widget

5. Removing Dashboard Widgets

Just as we can add our own custom dashboard widgets, we can remove specific dashboard widgets with ease.

function 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_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');
}
add_action('admin_menu', 'disable_default_dashboard_widgets');

The code is pretty self-explanatory, with each line inside the function removing a different widget. We can add or remove these lines at will for each of the different default widgets.

6. Removing Dashboard Widgets According to User Role

It’s also relatively simple to disable dashboard widgets depending on user role, just by introducing an if statement (where 3 is the user level).

function customize_meta_boxes() {
global $current_user;
get_currentuserinfo();

if ($current_user->user_level < 3)
remove_meta_box('postcustom','post','normal');
}

add_action('admin_init','customize_meta_boxes');

You can substitute any of the meta box removal lines from item #5 with the conditional one inside the if statement here.

7. Customising Footer Text

The WordPress footer can be edited easily, which can be used for branding. If you’ve, for example, designed a site for a client, the footer text gives you an opportunity to credit yourself.

function modify_footer_admin () {
echo 'Created by <a href="http://www.envato.com">Envato</a>. Powered by <a href="http://www.wordpress.org">WordPress</a>';
}

add_filter('admin_footer_text', 'modify_footer_admin');

footer

8. Hiding Upgrade Notices

When researching this post, this specific tweak kept appearing. It my opinion, it’s not advisable since most (if not all) WordPress versions contain important security updates. However, one could also argue that some versions have the potential to break your theme and hiding this message might delay clients, allowing you to test for compatibility.

Seriously, though, try to avoid this if you can; it could lead to a client missing all future updates which might end up making their blog vulnerable to attack.

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

9. Hover-Over Dashboard Menus (Plugin)

This plugin – one I use on my own blog – collapses all your menu items, making all the sub-menu items available when you hover over an icon, rather than by dropping down. This saves precious space, moving obtrusive menus aside until you need them.

pop menu

10. Display Google Analytics Data in the Dashboard (Plugin)

A lot of blogs use Google Analytics to power their statistic keeping, and this plugin allows you to display the results right in your dashboard. This is mainly a convenience thing, but can also fill up your dashboard that was cleaned up with some of the previous code snippets.

If your Google Analytics is, say, tied to your personal account, you can still share the statistics using WordPress as a proxy by allowing other users to view the data.

analytics dashboard

11. Logout in One Click (Plugin)

This is a very minor tweak to the dashboard (although apparently difficult to achieve), but might be helpful if you happen to need to logout a lot. Instead of requiring you to open the drop down menu to access the logout link, this plugin puts it right in the header so all you need is a single click.

12. Change Contents of Dashboard Help Tab

WordPress has a little tab in the top-right corner that, when clicked, drops down some contextual help. With the assistance of this self-explanatory function, you can hook different help text to different pages.

//hook loading of new page and edit page screens
add_action('load-page-new.php','add_custom_help_page');
add_action('load-page.php','add_custom_help_page');

function add_custom_help_page() {
//the contextual help filter
add_filter('contextual_help','custom_page_help');
}

function custom_page_help($help) {
//keep the existing help copy
echo $help;
//add some new copy
echo "<h5>Custom Features</h5>";
echo "<p>Content placed above the more divider will appear in column 1. Content placed below the divider will appear in column 2.</p>";
}

Wrap-up

There we go! All the tweaks and plugins we’ve mentioned today go some way in tweaking the dashboard to customize it specific to the blog and the users, from Google Analytics in the dashboard to changing the color of the admin bar. Hopefully they’ve been of use, and any that I’ve missed are welcome to be shared in the comments below.

 

 

Page 5 of 15« First...34567...10...Last »