Admin Customisations for a 1-Page WordPress Site

Recently I was tasked with creating a fairly straight forward 1 page website in WordPress. It was one of those sites with the different sections and the main navigation scrolls you down to the correct section. The trouble was that for such as a simple website the admin experience was very complicated. Therefore I set about trying to make the admin more like the front end – more simple. Here is how I got on.

I have blogged and spoken about admin customisations before and those people that know and have worked with me know that it is something I both enjoy working with and something I feel is a little underdone at times with many WordPress websites. We spend all our time focussing on the front-end (which is not a bad thing in itself) but little time thinking about the experience for the person or people that have to manage the website.

The site that was in question is shown below and was designed by the team at Pixel Junction.

c-capital

First a little bit about the setup I used with the website. As everything was on 1-page it kind of makes sense to me to make everything editable from within a page in WordPress. Therefore I created a page titled home and then set this as the front page under Settings > Reading.

The first step was then to edit the post edit screen for this page to better reflect the front end of the site.

The page itself was separated in four sections:

  • Header with background image including the navigation
  • Services section,
  • Contact us section
  • Footer area.

Therefore I went about creating these in the backend.

To do this I used the excellent Custom Meta Boxes library/framework/plugin by Human Made (although there are a lot of other alternatives out there!). This allows me to quickly add additional meta boxes on the post edit screen, in order to better reflect the front-end. I could then add fields into these meta boxes which I could pull through to the front end rather than having the traditional content box. Below is what this page’s edit screen looks like:

1 Page Post Edit Screen Customised

Inside each of the meta boxes I could then add the custom fields necessary for the front end. Below shows the header content section expended.

Post meta (Custom Fields) can be displayed inside each meta box.

In this post I won’t go into how these fields are pulled through onto the front end, other than to say that all of the data in these meta boxes is stored as post meta for this page and therefore using the get_post_meta() function allows us to do this.

The next issue to tackle was the menus in the admin. I wanted to end up with the following menu items in the left in the WordPress admin to clean things up and little removing menus that would not be needed:

  • Dashboard – which was actually my custom dashboard using my WP Basis plugin
  • Media
  • Forms – the site would use Gravity Forms for the contact form
  • Content – this would be a link straight to the page edit screen for our front page
  • Menus
  • Users
  • Site Options – I was using the options framework plugin to provide a few additional details such as telephone number etc. although could actually have added them to the page itself on second thoughts!

To do this I needed to do some admin menu modifications. I won’t go into great detail here as I have written before on altering the WordPress admin menus. Using the techniques outlined in that article I was able to add a menu titled content that went straight to my front page edit screen, remove some menus and add some others such as Menus which just went straight to the WordPress menu management page usually found under appearance. I was then left with this:

A new WordPress admin menu for a 1 page site.

The final thing to do was to make it so that when the user logged in, they were taken straight to the page edit screen for the front page as this is where most of the content for the site is. This can be done easily by utilising the login_redirect filter and setting the location of the redirect to the same link as the new content menu.

This all works very well but there is one more thing to do and that resolves around capabilities. Normally next to the “Edit Page” title on the page edit screen there is an “Add New” link. This would allow the user to add new pages. However we don’t want them adding new pages and causing confusion. Therefore we can utilise WordPress’s capabilities and remove the capability of adding new pages.

To do this in my example I used the filters included in my WP Basis plugin, however you can do this using the user_has_cap filter. The capability to remove is the edit_pages capability. This will ensure that the add new link is removed.

So there we have it a better front and back-end experience for not much extra work. I would love to hear your thoughts and comments about how you do something similar.

Using the WordPress Admin for Lead Generation

If you are like me then you spend a lot of your day navigating around the WordPress admin, looking at the admin screens to carry out different tasks. For the right type of client, they probably spend a lot of time in there too. Therefore I thought it was a good idea to try and use the WordPress admin as a little marketing opportunity. Here is how I went about it.

This all started out with me asking the question of how can I get across to current clients the other work and services that I could offer them. My website is not great, it is just a blog (something which I need to work on!) but usually you would list your service and products on your site. However it is probable that current clients don’t really visit your website that often, after all they already have a relationship with you and contact you in other ways.

Therefore I wanted to explore ways in which I could get this information across to clients. I started to think what is the one place that I have access to add content too, which all my clients see on a regular basis. I have clients that spend much of their days in the WordPress admin, managing their sites content to generate them leads and therefore I thought that I could use the admin in some way to engage clients with new content and services from me.

For a while now I have been using a plugin I wrote called WP Basis to make some changes to the WordPress admin screens in order to make the experience easier for clients to use. The plugin takes away some of the unwanted stuff such as menus and meta boxes that are not used and would just confuse the client. However one thing that it did do was to provide a different dashboard screen for clients, rather than the complicated default dashboard.

The default WordPress Dashboard Screen can be a little complicated at first glance.
The default WordPress Dashboard Screen can be a little complicated at first glance.

With this in mind I went about altering this dashboard screen the client sees to include some additional information. The following assumes that you already have a plugin that adds a custom dashboard page for your clients. If you need a little more help with this take a look at how I have done this with the WP Basis plugin on Github.

The approach I decided on was to use tabs. I wanted to make the dashboard feel as native a possible, fitting in with other WordPress admin styles etc. There is already a tabbed section on the WordPress About page. This is the page you are directed to when you have upgraded to the latest version and therefore it seemed logical to use the same approach.

The WordPress About page already contains a series of tabs.
The WordPress About page already contains a series of tabs.

I added the following function to output the content of the new dashboard page.

https://gist.github.com/wpmark/1dba36c8a04160ea7709

The above code adds the welcome tab and I have made this code extensible so that I can add tabs in the future using other plugins to show other things. The tabs work in that you declare a tab and a tab name using a filter and then you do the same declaring the callback function for the tabs content. You then create a function with the same name as your callback in order to show whatever content you like here.

Making it extensible means that I can use the base plugin on all sites (WP Basis) and then add other plugins which add tabs and tab contents to the client dashboard. Below is an example of a tab that was added to one site – this actually advertised services for another agency as it was a site built by me for them! Each linked through to their website with information about the service.

An example of a tab added to provide information about other services.
An example of a tab added to provide information about other services.

This is very much work in progress and I have lots of ideas for other content to appear on the dashboard of clients. Some ideas are below:

  • Use RSS to grab the latest blog posts and display them on the dashboard
  • Show latest offers and promotions. Again this could done using an RSS feed from another WordPress site which would automate this.
  • Videos of how to use the site
  • Contact form for support, which creates a ticket on your support system

What do you think? I would love to get some feedback on the ideas here.

Introducing WP Basis

Back in April I spoke at WordCamp Sheffield about Creating a Better WordPress Admin for Clients. The talk was mainly about customising the dashboard to make the experience better for clients, when editing and adding content. Since then I have managed to put into practice much of what I spoke about in to a new WordPress plugin – WP Basis.

WP Basis is a WordPress utility plugin that makes a number of changes to the WordPress dashboard (for your clients only) as well as providing a number of functions available for you to use when developing themes.

I thought the best way to break down what the plugin does was to put the main functions below and provide a link to the Github repository so that people can take a look at the plugin code itself.

WordPress Admin/Dashboard Modifications

As I have spoken about at WordCamps the WordPress dashboard can be a very complex environment for non-WordPress professionals. The WP Basis plugin attempts to simplify the admin screens for clients only, whilst keep the admin the same for experienced WordPress users.

The plugin adds a checkbox on the users profile page where the user can set themselves as a WP Basis Super User. This means the changes the plugin makes to the dashboard are not applied to these users. None WP Basis Super users get a simplified dashboard in the following ways:

  • Removal of a number of the WordPress menus to prevent clients from clicking or setting things that will effect the site. The Settings, Tools, Dashboard Page (see below), Plugins and Comments menus are removed.
  • Removal of some of the WordPress post meta boxes to clean up the post editing screen and prevent clients from adding meta boxes that could cause problems in the theme/site setup
  • Addition of a Site Options menu at the bottom of the admin menus. This site options page contains social media links, contact email for use on the site, telephone number of a WYSIWYG box to add footer content.

WordPress Custom Meta Boxes Framework

Included in the plugin is the Human Made WordPress Custom Meta Boxes plugin which allows developers to easily add custom meta boxes to the post editing screens in order to make adding custom fields much more user friendly.

Counter Functions

Styling posts can be made much easier with counter functions such as adding a “last class” CSS class to the last post within the WordPress loop. It also adds additional counting classes to widgets as well as WordPress menus.

Customised Dashboard Home Page

When a normal WordPress user logs in the plugin changes the admin landing page to include a more customised one. This is a great place for adding help, and additional adverts for your companies services. This page is split into tabs initially with just a welcome tab but the plugin is built (in many places) to be extensible and therefore you can easily add additional tabs to this screen using the filters and hooks available.

Post Type Descriptions

Having seen and used the excellent Post Type Descriptions Plugin from @stomptheweb I decided that it would be a good idea to include this in the plugin. It adds a description box to each post type which can then be outputted on the post type archive page.

Template Tags to Use in Your Themes

The plugin tries to give you the availability of a number of WordPress template tags which you can use in your sites themes and plugins. A few examples of the options are below:

  • wpbasis_content_nav() – this show the next and previous post links in a numbered format rather than just next/previous.
  • wpbasis_featured_img_url() – gets the post thumbnail or featured image url for a given featured image size.
  • wpbasis_get_blog_permalink() – return the page ID of at the page used for the sites blog posts or false it no page is being used.
  • wpbasis_get_current_url() – return the URL from the address bar of the current page
  • wpbasis_var_dump() – a more formatted version of the php var_dump() function

Amended Updating Capabilities

User which are not WP Basis super users have the capabilities for updating and adding plugins to WordPress removed, even if they are an administrator. This means that your clients cannot update WordPress with the potential to break something.

There are other things in the plugin but above is just a flavour of what the plugin does. Most of all I have tried to make this plugin as extensible as possible, outputting content using apply_filters to allow other plugins to change this content as well as allowing other plugins to add various content in places such as adding tabs to the dashboard screen or removing additional meta boxes using a filter.

The plugin is in the early stages and will no doubt evolve a lot more from here but any feedback is welcome. You can follow the evolution of the WP Basis plugin on Github. I am going to be making a beta release in the next week or so as there are only a few issues to fix. Watch this space!

Update – the plugin is not live on the WordPress plugin repository – http://wordpress.org/plugins/wpbasis/

My First WordPress.org Plugin!

Yesterday I decided it was about time that I tried getting one of my plugins on the WordPress.org plugin directory. Having wondered which the best plugin to submit would be, I made a decision and then submitted it. The good news was that it was accepted by the plugin review team and is now live!

The WP Admin Display Hooks plugin displays the WordPress admin hooks names, that display content to the WordPress admin. It helps developers choose which WordPress admin hook to choose if they want to output content to the WordPress admin pages.

Many thanks to the 50 people that have already downloaded the plugin and I hope it has helped you out in some way!

Download WP Admin Display Hooks from WordPress.org

The Lack of Consistency in WordPress Admin Display Hooks

Recently I have been working extensively on projects that involve working with customising the WordPress admin area to enable a better user experience. Perhaps the most notable example is working on the Edupress project with Rachel McCollin. During the course of working with amending the WordPress admin it has become apparent to me that there are a distinct lack of consistency in the admin hooks. Let me explain.

customized-edupress-admin

With the advent of theme frameworks a good few years ago now, developers have become very familiar with hooks, as well of course as those that exist in core that enable us to build on top of WordPress in the form of plugins. However a lot of the work developers do tends to be with the front end of WordPress in the form of themes. It was not until I started working extensively to convert the backend of WordPress that it became apparent there was a distinct lack of hooks and filters to work with, in terms of adding and removing content from the screen.

You can see from the screenshot above just what can be done in terms of customising the WordPress admin.

After working on the admin screens for Edupress I went ahead and created the Show Admin Display Hooks plugin, going through all the admin files in the wp-admin folder and looking for the available hooks. I was only concerned with the display hooks i.e. the ones that allow you to output content to the screen rather than the ones that enable you to add scripts and styles or functions etc.

The plugin outputs all the names of the hooks to the admin screens in the place where they are run, therefore you can see which hooks are available to work with.

It became apparent that there is a lack of consistency for developers in the hooks that they work with. Lets take a look at an example of what I mean. Below you can see two screenshots:

post-edit-admin-hooks

post-listing-admin-hooks

As you can see there are more hooks to play in the post editor screen. The problem here for me, is that all the admin screens have a page title in a h2 tag. Adding content below the title on the post edit screen can be done with the edit_form_top hook but there is no hook to do the same thing below the title on the post listing screen. Therefore a bit of consistency I believe would be helpful in this case. Therefore I would propose that a after_page_title hook is introduced on all admin screen after the page title is outputted. It seems that a before_page_title is not needed as the admin_notices and all_admin_notices hooks appear on every page.

Another hook that I would like to see added is a hook that fires directly after the “Add New” button on the post listing and post edit screen. This is a great place to add additional action buttons and would benefit from a hook. This could be something like add_new_h2 which is the name of the class given to the buttons in that area.

There is a need in the WordPress admin for plugin authors to be able to display a custom post type and associated taxonomies for that post type whilst only adding one menu item. If they add their post type under a sub menu that already exists such as Appearance, then taxonomies have to go in separately as you cannot have a third level menu. With an add_new_h2 hook, plugin authors could have links to the post types taxonomies in that place instead of an extra menu link.  This problem is outlined by Justin Tadlock with his Whistles plugin here, although Justin is suggesting a tabbed approach to solve the problem.

It is clear then that the WordPress admin does provide a number of action hooks for developer to output their own content in various places, however I think with a little more consistency on the hooks available as well as the addition of one or two additional hooks it would be much easier for developers.

View/Download Show Admin Display Hooks from Github