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
A much neater WordPress page edit screen for a 1 page website.

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.
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.
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 Media Handle Sideload Function

WordPress is equipped with lots of great functions that you probably haven’t heard of and recently I came across a couple of little gems whilst working on a project. He is how I used the media_handle_sideload function in a project.

The project in question was an integration of Broadbean with the WP Job Manager WordPress plugin. In fact the work I have done will soon to be a service offered on their add-ons page along with the LogicMelon add-on service I already have on there.

I needed to be able to take a URL which was being sent to the WordPress site which was a PDF, Word document or an image and have WordPress add this file to the media library so that I could link to it on the WordPress site.

Having done some investigation I came across the media_handle_sideload function which effectively does just that. It will take a URL, and attach it to a post.

Below is the code I have used to grab a file from a URL and attach it to a post. It is well commented in order to help understand what is going on!

It is a really handy function and one I am sure I will use more with plugins and code that require that or a similar functionality.

WP Broadbean Plugin Updates

In early 2014 I launched the first beta version of the WP Broadbean WordPress plugin. This is a plugin to integrate Broadbean Adcourier job postings with a WordPress website. The plugin has evolved and changed since then and therefore lets take a look at some of the plugins features.

Lets outline some of the new features of the plugin which have been introduced after the initial launch:

Extensibility

The plugin has been made as extensible as possible from the start. However as development has progressed it has become more obvious that additional extensible features could be utilised. Many of these have come from developers in the community using the plugin and feeding back to me.

There are now a number of hooks and filters that allow developers to extend upon and alter the functionality of the plugin. For example developers can use a different inbox.php file which processes each job simply by using a template override. Developers can also use filters to add additional job fields and taxonomies to the job postings should they wish to.

It is worth remembering however the more customisations made with the plugin through its extensible features, the more changes Broadbean will need to make to the feed which is used to send jobs to your site.

Below are some of the new filters you can use:

  • wpbb_query_var_value – allows you to change the URL query var to which jobs are posted to. This defaults to broadbean but developers could change this to something else.
  • wpbb_application_form_html – using this filter would allow developers to alter the markup of the application form used to allow candidates to apply for jobs
  • wpbb_application_allowed_file_types – a filter that allows editing of the file types that are allowed by default in the CV upload field on the application form
  • wpbb_apply_url – with this filter you can amend the URL used for applying for jobs. This means you could change the URL completely, maybe to use your own form or you could perhaps add additional query variables to the URL which you may use in your application form.
  • wpbb_admin_sub_menus – allows developers to add a sub menu beneath the main WP Broadbean menu
  • wpbb_registered_settings – add additional settings to the WP Broadbean settings admin page

There are many new action hooks you can utilise too:

  • wpbb_job_term_added – a hook that fires after a term has been added to a job when sent through from Broadbean
  • wpbb_job_field_added – this hooks fires after a field is added (post meta) to a job when sent through from Broadbean
  • wpbb_job_added – after the job is added along with all the fields and the terms this hook is fired. Can be good for actioning things like clearing search caches etc. which need to be re-built when a new job or post is added.

There are many more and I would encourage you to search the code-base for apply_filters and do_action.

Application Form

The application form has changed along the way to, for the better I think. It now no longer uses a shortcode but instead you select which is your apply page in the WP Broadbean settings page. The application form is then appended to any page content you may have on that page.

The form also now includes a field for a message, something which many users requested.

Finally the form now also allows the upload of Word and Pages documents as well as the original PDF document type. Even these can be changed with a filter.

Attachments to Email Notifications

One of the initial issues with the plugin which was reported to me was that the application form was not emailing Broadbean correctly or not attaching the applicants CV to the email. This is something that is important for the tracking of an application from within the Adcourier system.

These issues have now been fixed and all the emails that are sent through to Broadbean will have the applicants CV attached.

Those are the main changes and alterations to the plugin which I hope make it much better for users and developers to take advantage of. Do remember that I offer a Broadbean Assist service where I can integrate Broadbean with your WordPress site for just £599 which takes the hassle out of doing it yourself.

Over the coming months I have some additional plans for the Broadbean plugin with a view to integrating this into some other services – watch this space. Oh and don’t forget that I recently launched a plugin for integrating WordPress with LogicMelon over at wplogicmelon.com – you can read a little more about this here!

A Year into Being a WordPress Freelancer

Just over a year ago now, I quit my full-time, well paid job as a secondary school teacher to become a full-time (well nearly!) WordPress developer. You can read more about the decision I took at the time here. So a year on from that decision how has it all gone?

The story continues pretty much in the few days and weeks after I had resigned. I was looking at another local school’s website, I can’t remember why now but I happened to click on the vacancies page and there was an advertisement for a teacher of Computing for 1 day per week – perfect I thought. I had wanted to go part-time in the first place to ease the transition between careers, but for one reason and another it was not going to happen. Therefore I applied for this job, teaching year 7 and 8 students a bit of ICT and computing such as Scratch and Python. I thoroughly enjoyed this teaching but more about that later.

My biggest worry about quitting my job was simple really. Would I get enough work in order to pay the bills. With a small family to provide for it was alway the biggest concern. I had been chatting to friends and family and colleagues in teaching, all of which encouraged me that I would be fine and I should just go for it – they were right.

I think that is the first lesson to be learned here really. Sometimes there is no right or wrong time to do something like this, you have to just go with your gut, bite the bullet and do what you think is right. I came the conclusion that if I was thinking about this so much, it must be the right decision. Also I must add, having the support of your wife/partner really helped and I thank her for that a lot. She was always very supportive and pushed me to give it a go.

Getting Clients

Having already worked for a number of years freelancing part-time, looking back I perhaps should not have worried about this as much as I did.

I already had a base and now I could offer those clients and other agencies I did work for much more time and a wider range of offerings that I could before.

I did also do some marketing in the form of speaking at conferences, although that was not my sole reason for doing this. I first spoke at WordCamp Sheffield in April 2014 and have spoken at a number of WordCamps and local meet-ups thereafter. Speaking is good to let people know who you are and what you do, but perhaps more importantly it helps you learn. To talk to people about something means you need to know it well and therefore the research and preparation you do around a topic helps your career development too.

Getting clients has not turned out to be as problematic as I thought and I have had work on throughout the last year. There have been leaner times that others but overall I have had a steady stream. Lets hope that continues.

I think something that you learn more and more and remember for each client that you work with is that you want them to continue being your client (most of the time!) and therefore treat them as though you do.

Running a Business

This was nothing new to me really in terms of I was not changing from being a the sole-trader that I already was from being a part-time freelancer. However there are some things that I have learnt.

desk-laptop-book

The running of your business takes much more time than I ever thought it would do. Writing and sending invoices, communicating with clients, attending meet-ups and WordCamps and other marketing related stuff all take time. This is time that you are not earning and therefore you need to consider this carefully.

Think carefully about how many actual billable hours you can work in a day, week, month and year and then you need to adjust how much you charge for actual work in order to accommodate this.

Working Environment

One of the things that I was insistent on when I went full-time was that I wanted to work from home rather than getting an office somewhere or perhaps a shared work-space. However as I have found out working from home does have its difficulties.

My Desk in my Home Office
My Desk in my Home Office

When you first start because you are at home for the first few days it is hard to remove all the distractions of being in the house and get on fully with your work. However I found this easy to overcome after a week or two and now when I am in my office working, focusing is no problem.

For other family members living in the house this has been less easy. My children for example are always popping to ask this and this and still to this day I have not managed to train them well enough to leave me be during work time. My wife, although considerably better than the children does have the tendency to say thinks like “Can you just put the drying in the dryer?” usually when I am knee deep into something complicated!

However all of that is getting better and I have plans this year to do some work on my work space at home to make it easier to work in etc.

So what next?

Who knows I guess… A year on and things have changed again for me. I am no longer teaching at all, as my position of teaching for 1-day was never a permanent thing. In fact I have enough work on to not continue with that which was always the plan anyway.

This past year has absolutely flown by and I look forward to the next year in freelance and the opportunities that it brings – it has been amazing :)

Sort Posts by Term on Custom Post Type Archives

When building sites with WordPress I often make use of custom post types to add custom content types. I also use the custom post type archives in order to display an archive of this content. Recently I came across an issue where I wanted to be able to list posts on the archive grouped by terms from a taxonomy. Having quickly found out this was not so easy, I set about trying to find a solution.

The client site I was working on wanted to have a meet the team page. In fact this is a popular request amongst clients and something I often have to do. Therefore to achieve this I use a custom post type called person (prefixed of course). For the purpose of this post the custom post type is called wpmark_person.

This particular project was very specific in that it needed to have the people in the team split into the different sections they belonged to in the company e.g. Senior Leaders, Teachers etc. To achieve this grouping of posts I used a custom taxonomy which was named wpmark_person_type.

Now came the issue of displaying the team members. The design called for a page which was split into different sections, each section being a type of person (the different person types from my taxonomy). The people belonging to that section where then listed under those headings (as a thumbnail images) and each section was collapsed by default (I used jQuery to expand/contract the section but that is not covered here). Clicking the person type title revealed the actual people, in this case an image linking through to the person single post view.

Below is a wireframe of what the page layout for the meet the team would look like.

The wireframe provided indicated a different sorting of posts.
The wireframe provided indicated a different sorting of posts.

With custom post types you can declare an argument when register the custom post type of whether or not you want it to have an archive. This archive, like posts (your sites blog in a vanilla WordPress install) lists the posts in chronological order with the newest first, paginated according the number of posts per page set in the WordPress settings area for reading.

Essentially this was what I wanted, however I just wanted to order them differently and show them all. Instead of ordering them by date, I wanted to have them ordered by term from the person type taxonomy. Therefore all posts from one term and then all posts from the next etc.

In essence this is straight forward to do, but would require you to add lots of custom loops to the archive using WP_Query. This was something that I didn’t really want to do as it would mean that I am querying things twice. WordPress would query the person posts (as normal for the post type archive) and then I would throw this query away and get the posts again within the different terms. As I already have the posts I want and it was just a matter of re-ordering them, I decided there must be a more efficient way and went about tying to find a solution. First I posted on the WordPress.org support forums after Google searches revealed little.

I posted on the WordPress Support Forums for a Solution
I posted on the WordPress Support Forums for a Solution

After much trial and error and testing I landed on a solution that worked. Using the Query Monitor plugin I could see that it only added one more query to the page, which I thought was reasonable. My solution is as follows.

The first part was to make the archive show all the posts for that post type. I did not want pagination here and therefore wanted every person to be listed, albeit in their respective person types. To do this I used the excellent pre_get_posts action which allows you to change the query parameters WordPress uses before it actually queries the database for posts. Below shows the code to do this:

So now I have a post type archive that queries all the person posts. I can access these by the normal loop, however I needed to do some ordering before that. Therefore I need to get the post objects for these posts and manipulate them. I can access my posts through $wp_query->posts which is what I needed.

The next part was to create a function that would output an array of all the posts, split into the different terms they were assigned to. Essentially the output of my function would be like so:

The function that I used to do this was like so:

Lets talk through what this is doing. First we set some default args, which can of course be changed if passed through to the function as an array of parameters. We then create an empty output array to fill with all the terms and posts.

The first real part in the function is to get all the terms from the taxonomy (in this case are person type taxonomy). This is actually the one additional query that is carried out on the page. When we do this we are going to order them by their ID. The one created first, is shown first although we could order by name etc. We are also going to just return the term names here to keep the query as light as possible as the name is all we need to output on the page.

We then loop through each term, adding the term name as a key to our output array. Next we loop through all the posts (remember these were queried in the normal process of using a post type archive and we passed them to this function using $wp_query->posts). Inside this loop we get all the terms this post has (it should only be one as the UI for this taxonomy only enable one term to be assigned) and then push this post object into an array inside our output array for this term. Finally we return the entire array, which is now sorted into terms and posts.

Back on the post type archive template now we can use this code to output the posts.

Summarising the above code, we loop through the top level elements of the array first outputing the term name as a title. We then do a second loop through to output the posts within that term.

The output of the page looks lie this:

Custom Post Types Archive with Posted Ordered By Term
Custom Post Types Archive with Posted Ordered By Term

So there you have it, if you ever want to sort posts by a specific taxonomy term of a post type archive you can do it with just one additional query.

Introducing WP LogicMelon

Back in late 2013 I started work on a plugin to integrate Broadbean with WordPress. This allows [mainly] recruiters to post jobs more easily from Broadbean to their WordPress site. Another solution for recruiters is LogicMelon, a similar solution to posting jobs to multiple platforms. After a few client requests for a solution which would work similar to WP Broadbean I have built WP LogicMelon, a WordPress plugin to integrate LogicMelon with WordPress.

Job Listing with WP LogicMelon
Jobs are saved as a custom post type with associated taxonomies and meta data.

The LogicMelon software allows recruiters to post jobs once using their software and then the posted job appears on many of the major platforms and jobs sites. As part of this posting, LogicMelon can send the job to your own website.

Obviously when this happens your site needs to accept the data sent, process it and then output it on the front end of your site to allow your candidates to view the information.

The WP LogicMelon plugin solution provides all this functionality. It accepts an XML feed sent (and built) by LogicMelon and saves this data as a custom post type with associated meta data and taxonomies.

The plugin is broadly based on the WP Broadbean Plugin solution with one or two tweaks to make it work for LogicMelon.

To find out more about getting your WordPress site integrated with LogicMelon, head on over to the WP LogicMelon website in order to find out more.

WP Limit Tags

Working on a recent project in collaboration with Keith Devon, we needed a way in which to limit the number of tags which could be applied to a post – one of the clients requirements. Therefore we set about a way to do this and produced the WP Limit Tags WordPress plugin.

The plugin, on the WordPress repository for download from your WordPress admin, creates a small settings screen. Here you can set the number of tags that are allowed and tick the post types you wish the functionality to be active on.

WP Limit Tags Setting Screen
The WP Limit Tags settings screen.

It is worth noting that at the moment the functionality works on any taxonomy which is non-hierarchical, such as post tags. Maybe in the future it would be good to be able to add different settings for the different post types and taxonomies.

Below is a short video which shows what the plugin does:

Download the WP Limit Tags WordPress plugin.

Before & After Photos Using the WordPress Shortcode UI

A while ago I came across the excellent plugin for WordPress, comically named Shortcake. Shortcake is a UI for WordPress shortcodes which makes using shortcodes in your content much easier. Recently I worked on a project that required the client to add before and after photos. The solution was shortcodes and thanks to Shortcake it was a whole lot easier. Here is how I went about it.

If you want to learn more about how Shortcake works and what it does I would check our the plugin on WordPress.org as well as heading over to the Github repo. Essentially it means that when dealing with adding shortcodes a user never needs to actually type out code in the editor, they are presented with a more intuitive UI in the add media popup.

First of all I registered my shortcode in the normal way that I would do with any other shortcode, using the add_shortcode hook built into WordPress core.

The above code adds a shortcode with two attributes. These are the before image and the after image and it expects and attachment ID for each. Therefore without using the Shortcode UI plugin we could now add a shortcode to our content like so:

[before_after_image before_image="100" after_image="101"]

On the front end of the site this would output the two images one above the other. I then needed some styles and some jQuery in order to make the before image show first, and the after image only show when a toggle button was clicked. The following jQuery handled the toggling of before and after images:

Perfect, this now outputs the following on the front end (there are some styles needed here of course!).

Front-end output of a before and after image
Front-end output of a before and after image

The problem of course without using the Shortcode UI plugin is that the user has to know the attachment ID and also type the shortcode into the editor. Well that is what the Shortcode UI plugin handles for you.

In order to get this working make sure you have the Shortcode UI plugin active and then you need to register your shortcode with the Shortcode UI plugin. In the case of this shortcode it was done with the following code:

Just those few lines of code allow us to create a better UI for adding the shortcode. In order to add a before after image, we can now click on the Add Media button, and choose Insert Post Element from the list on the left. On the screen are now all the shortcodes that registered shown with their chosen Dashicon. Clicking that displays a simple UI showing the fields you registered for adding the shortcode.

Adding a Before and After Using the Shortcode UI Plugin
Adding a Before and After Using the Shortcode UI Plugin

As you can see the above interface is much much better than typing out a shortcode in the editor! Not only that, but once you click insert element, the user never even sees the shortcode (as long as they stay in the visual editor) as the plugin handles the TinyMCE view too! You will need some styling in your editor-style.css file.

So there you have it a before and after image shortcode – super charged with a Shortcode UI! I believe that you can also register the javascript to work in the TinyMCE window as well so that it would act the same in there as it does on the front end. This is something I am still investigating.

WordCamp London 2015 Lightning Talk

Right now I am recovering from WordCamp London. I say recovering in a positive way as the event was outstanding. On the Sunday I was privileged to be able to give a lightning talk in the developer track in front of what seemed like 300 people or so.

My talk was about a plugin that I developed which I have called WP Post Type Meta, which essentially enables you to store data associated with a post type, rather than individual posts. I use this data on post type archive pages for titles and opening paragraphs etc.

My slides for this talk are below:

I believe the video for this talk will appear on WordPress.tv in the near future and therefore once it does I will post it here. The video for the development lightning talks is below:

You can view/download the plugin on the WordPress plugin repository here or you can contribute on github here.