Speaking at WordCamp Sheffield

Yesterday I was confirmed as a speaker at WordPress Sheffield taking place on the 26th April 2014. My talk is titled A Simpler WordPress Admin for Clients and I will aim to talk through how the admin can be made simpler and more effective to prevent clients becoming confused.

WC-Header-logo

This is my first speaking appearance talking about WordPress and I must say I am slightly nervous, although I hoping my teaching background will help. Lots of planning and slides to produce now for my talk!

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

A WordPress Development Setup – Part 2

This is second post in a three part blog post series on setting up a WordPress development environment. The first part can be read here. Having got your local machine setup ready with your hosts etc. the next part is to actually create your WordPress site on the local machine under version control. The steps below you need to complete for each WordPress site you build.

I have done development differently quite a lot in the past. There is the debate of whether to have the entire site in version control or just the themes and plugins. Having tried both I prefer to keep the whole site under version control and therefore this is the method that I shall be outlining here.

The first part of getting a WordPress site setup is to create your repository to keep your code in version control. I use Git alongside Github and therefore I shall show this method here. To create your repository login to your Github account and click the Create button in the upper right corner of the screen.

create-github-rep

Give your repository a suitable name (no spaces here is best) along with a description.Note that the name will give will form part of the local url of your site, although it could be changed if necessary. I always add a read me file to which indicate basic information about the repository.

Making sure you have Github app installed on your machine (either Windows or Mac ) on the repository page you are taken to on creation, click the “Clone in Desktop” button. This will open Github on your machine and ask you where you want to place the repository. Depending on which local “domain” you want to place it in, add it to the correct folder we setup in part 1.

The next stage in the process is to edit your wp-config.php file. We want to keep this under version control, however the connection to our database will be different whether we are working locally or working on the server of the live site. For these reasons we need to make some changes to the wp-config.php file. I follow the steps outlined by Mark Jaquith, which allows you to use a local-config.php file.

Once we have this setup we need to make sure that our local-config.php file is not under version control. For this we can use Gitignore, which happily the Github app allows you to control. From the Github App screen for the repository we created previously click on the “Settings” tab from the menu in the left.

gitignore-settings

In the ignored file box add local-config.php as well as the wp-content/uploads folder. We don’t want to have all of our media library under version control as this could be huge eventually. Once you have added these click Save Changes and these files will not be under version control.

Now you can install WordPress in the normal way locally (using MAMP) and work away developing your site. I would commit regularly using the Github app.

The final part of this tutorial will focus on getting your site using a staging server and a live server.

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

Whistles Utilities Plugin

Having starting using the fantastic Whistles plugin from Justin Tadlock over the last few weeks I realised there was one or two things that I would have loved to change, or add to the plugin. Therefore I went about doing this and created Whistles Utilities Plugin.

The plugin has two main features which are outlined below.

Whistles Content Widget

The widget provided with the plugin allow you to show a Whistles Group in a sidebar either as tabs or toggles etc. However I wanted not only this functionality but to allow users to show the contents of one Whistles in a sidebar. This would be very much like a text widget but users would be able to use the power of the post editor when writing them.

whistles-widget

Relocate the Whistles Group Sub Menu

By default the Whistles plugin adds both its post type and taxonomy as a sub menu of Appearance in the dashboard. Justin himself has indicated that this is not ideal and I agree and wanted to find a way to have everything covered with 1 menu item.

Therefore the Whistles Utilities changes things so that the Whistles Groups menu disappears and the link to manage the taxonomy terms is placed above the page title on the edit whistles screen.

whistle-groups-link

One of the other things that I wanted to change was to was the Post Type labels, so that rather than being labelled “Whistles” it would be called Snippets. I think that it would make more sense to my clients. I achieved this after a little help from Justin by using the post_type_labels_{post_type} filter.

However I abandoned this idea due to the fact that I could not find a way to change the name of the Whistles Group taxonomy in the same manner. Leaving this label the same would have left users a little confused I would think.

So there you have it, the Whistles Utility plugin. Download it from Github below and I would love to hear your comments/feedback.

View/Download Whistles Utilities from Github

List Child Pages Shortcode

Have you ever wanted to add something simple to a page that will allow you to list the child pages of the current page? Well if so, meet the List Child Pages Shortocde.

Today I have been working on adding some information on this site about my WordPress plugins. During the process it became clear that I wanted to list the child pages of my main plugins page on the plugins page to introduce each plugin before being able to click to view more information about each plugin. I also wanted to show an associated image with each.

To do this I developed a really simple little plugin in order to create a shortcode to do just that. Below is what I have come up with:

In your page you simply enter the following shortcode in order to output the child pages list. You can change the images parameter to either true or false to show or hide the child pages featured image.

Obviously you will need to style the resulting HTML in your themes stylesheet.

A WordPress Development Setup – Part 1

Having worked with WordPress for the best part of 8 years now I have gone through a number of different setups in order to develop a WordPress site. However I think I have finally found one that works the best of the lot and therefore here is my WordPress development setup.

This article will come in three parts as the setup is a two step process. There is the setup for every site and then the steps that need to be taken for each site I develop. So here goes with part 1.

macbook-air

Local Development Using MAMP

You should start off developing a website on your local machine. It has a number of advantages such as speed of page load and the fact that you can play and mess around without anyone having access to your site other than you. There area a number of options in order to get your sites setup locally on your own machine however the option that I have been using for a while now is MAMP.

MAMP is Mac, Apache, MySQL and PHP all bundled together in one easy install, which is all the tools you need to run a WordPress site. Therefore download and install MAMP the usual way according to the setup instructions on the MAMP website.

Changing the Local Hosts File

Being a freelance WordPress developer I tend to work not only for myself but with a number of agencies and therefore I like to keep my work separate in different “sites” on my local machine. To do this I have used virtual hosts. This enables a more custom local domain to work on for different clients. So work I do for myself will be done locally at local.dev, whereas work I do for Pixel Junction is done at pixel.dev and finally work for Compass Design is done at compass.dev.

To set this up you need to get familiar with your computers local hosts file and virtual hosts. I covered this when talking through using MAMP with WordPress Multisite, so I am going to assume that you have created a host for any of the “domains” you want to host your sites on. In my local hosts file I have something like the following:

127.0.0.1       local.dev
127.0.0.1       pixel.dev
127.0.0.1       compass.dev

This allows me to use those ‘domains’. However we have yet to let Apache know where the files for those sites are. Therefore to do this we need to create these virtual hosts in Apache. This points the request for that host to the correct folder on your computer where you are hosting the files so they can be served to your browser.

Setting Up Virtual Hosts

Again allow MAMP’s Apache to use the Virtual Hosts file is covered in the article above, therefore I am going to assume that you have done that and you are editing the Virtual Hosts config file in apache. You would need to add to that file the following block, for each of the hosts:

<VirtualHost *:80>
    ServerAdmin webmaster@local.dev
    DocumentRoot "/Applications/MAMP/htdocs/local/"
    ServerName local.dev
    ServerAlias local.dev *.local.dev
</VirtualHost>

You would obviously change the document root to wherever you are storing your files for that site. You would also need to change the ServerName to the host your are using. In ServerAlias I add a starred entry so that I can use sub domains, for example in a multisite install, although any additional sub domains would need adding to your local hosts file too.

Using the example above, I can now create sub folders inside the /Applications/MAMP/htdocs/local/ folder and access them at URLs such as local.dev/subfolder.

That covers the first part of this tutorial on getting the environment setup and ready to start working with. The second part (coming soon) covers the steps to take for working with each site that you create, including getting the site under version control with Git and Github.

Read Part 2 of 3 about creating A WordPress Development Setup here.

A New Career Chapter

Today I quit my job working as a Secondary School teacher in a Lancashire high school. The job was well paid, with a good pension and a good salary. I am leaving to work as a freelance WordPress developer and consultant with no guaranteed salary or benefits. Why am I doing this I wondered?

I have been teaching for over a decade now. I have taught a number of different subjects but finally settled into teaching ICT and in fact was Subject Leader (Head of Department in old money!) for over 4 years. It was during my teaching career that I developed a passion for working with the web and particularly WordPress, making blogs for students to access as well as websites for students to use in distance learning.

Why Leave the Teaching Profession?

For the majority of the last 10 years I have enjoyed teaching. It is such a varied job with different things happening every day that, on the whole it has been fun. However over the last 12 months I have seen a sharp rise in the work that I have been getting in terms of freelance WordPress jobs and I have had the privilege of working with a number of top WordPress agencies and people during this time. It has become more and more obvious to me that my future did not lie in teaching.

It was at this point I then spoke to the management of my school with the view of dropping down to part-time, perhaps 3 or 4 days work before winding down completely perhaps a year later. However I became apparent that circumstances at the school meant this was not an option and therefore I was left with a decision to make.

Working Two Jobs for Over 5 Years

I have been a freelance WordPress developer for over 5 years, starting out working on small business sites and now working on larger sites including eCommerce sites. Throughout this time I have been working two jobs, teaching full time which as been getting harder and harder. Having two young children means I can no longer do this and be successful at both. Therefore I had to make a decision as to which path to go down. The decision was quite easy really when I thought of it like this.

I have really got to the point whereby I cannot get any better and progress in either job as one was pulling back the other.

Hire Me

With all that I am now available for hire as a full-time WordPress developer. I am taking on work now, but I will be fully available come the end of April.

This post reads very similar to Kimb Jones post after he did very much the same thing previously, helping me make the same decision. Inspiration for this post came from Kimbs post.