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.
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:
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.
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:
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.
Leave a Reply