A Review of 2013

Wow, 2013 has been a memorable year for me in terms of my freelance career. I really feel that I have been able to take a step forward in terms of my knowledge and the sites that I have be privileged to work on. As is always the case I take the time to review the year and how things have gone. The highlights below are split up in no particular order, other than how they happened through the year.

Using Github

Although on my Github Profile (wpmark) it states I joined Github in July 2012 which is of course true, I did not really start to use it an awful lot until the start of this year. At the start of the year I put some of my Open Source code on there such as my User Switching from the Admin Bar addition to John Blackbourn’s User Switching plugin, which allows you to switch to a user from the Admin Bar and my WP CSS Widget Classes Plugin, which allows you to add a class to widgets.

Adding these smaller projects to Github got me used to the real basics of Github in terms of committing etc. It was not until the summer however that I started to use Github in a much better way.

Having worked with the fantastic team of WordPress developers at Code For The People for a few weeks over the summer, I was able to see how they used Github for projects. It worked really well when collaborating with members of a team when code was being edited and added to by a number of developers.

Having taken all this on board it was later in the year that I started to use Github with some other members of the Pixel Junction and Compass Design teams on some of the shared projects we worked on. This really changed things for me in terms of the development process of a site and made things a whole lot easier.

Less ‘Cowboy” Coding!

Having watched Mark Jaquith’s WordCamp San Francisco 2011 talk titled Coding, Scaling and Deploys – Oh My! I started to think this year long and hard about the process of development I went through for working on sites.

Mark’s key message in this presentation is to stop “Cowboy Coding” e.g. editing and uploading code on a live site and making sure that your code is in version control and also that you use deployment procedures to push your code live (no more FTP!).

After some bad experiences previously this message finally hit home. There is a difference however between the types of sites Mark is talking about in his talk and some of the sites I work on. I am not sure that the local Garage down the road would want to pay a premium of more than 50% the cost of their site just to have their code under version control and use a deployment service. It is a risk they are willing to take that their site is edited live with a maintenance page. Larger sites of course benefit from the methods that Mark discusses and it is these sites on which I have implemented these principles.

I have started to use Deploy HQ along with Github as Deploy HQ works well with code hosted on Github. Setting up both a Local, Staging and a Production (or live) environment as meant a much more professional approach the sites that need this. It has allowed clients to check concepts before pushing them live and means the process of running a site and evolving the code base is much more smooth. Combined with the fact that I had multiple contributors to the code this has completely changed the way I work, for the better and made me a much better WordPress developer.

WordPress for Building Web Apps

As part of working 2 days a week for a school building websites I was asked to construct a number of systems to help the senior management with tracking data, mainly for staff but also for students. I have seen a number of blog posts recently about using WordPress as the basis for building web apps rather than traditional websites and therefore I started researching. In the end I guess what I have created is a mix between a website and a web app but they do the job very well.

The first project was to build a system to store all the teaching staff’s Appraisals. This involved some backend changes to the WordPress admin in terms of a custom post type and some amends to make the dashboard easier to work around for line managers. The system allowed all line managers to appraise their appraiser’s logging their objectives and the actions to take in order to achieve them. It also allowed them to review and evaluate against these objectives at the end of the cycle when the set new objectives for the next cycle. Alongside this I build a number of query points for senior managers to use in order to be able to check if staff had similar objectives so that appropriate professional development could be arranged. I also integrated graphs to graph some of the data queried through WordPress.

The other large web application system I built using WordPress was a system to allow staff to log lesson observations of teachers. In the past this had all been done on paper and therefore tracking observations across department to see if trends occurred between teachers and departments was very tricky. Again much backend customisation was done in order to make adding Observations very easy for teachers. I am still working on the querying side of the project to allow managers to get an accurate picture on the level of teaching across the school but it is going well.

I always thought WordPress was a great system for building web apps and I now I know this is the case. With a built in user management system that is easily extendible combined with an easily customisable content management system in custom posts types WordPress makes a very good web application platform.

Responsive WordPress Sites

Responsive websites are the buzzword at the moment, and to a large extent that has to be accurate because of the massive increase in the amount of mobile traffic that websites across the world are receiving. Therefore it is essential that I grasped the concepts and skills needed to create responsive websites.

Although I understood the concepts for a while it was not really until this year that I actually got to grips with them on sites and produced some websites that were fully responsive.

Don’t get me wrong it can be a pain in the neck, but persevere and getting it right can be very rewarding. One site that I think went well in terms of responsive design was the work that I did for Pixel Junction on the Equal Adventure site.

WordPress for eCommerce

There are lots of plugin out there that enable you to turn your WordPress site into an eCommerce store, however I believe the really get a good eCommerce site, it should not just be an add-on but something that is designed and thought about from the start.

This year I started using WooCommerce and in fact I have built 3 or 4 sites using WooCommerce to power the shop part of the site. WooCommerce from Woo Themes is a very powerful and flexible tool that although I would not say is simple to get working as you want, it certainly is doable to any good developer.

With an eCommerce site it is a matter of experience in that the more you work with the site the more you learn this has a knock-on effect in that the more you learn the more you can learn.

These type of sites can be very frustrating but the more you work with them the better you are and more importably the more confident you will get with them. Therefore my advice for starting an eCommerce site would be to be brave, have a go and dive in with it. Perhaps not starting with a site for a client so that you can learn, but get a a plugin installed and practice with different scenarios.

So, to sum up 2013 has been a fantastic year for me personally. It has been a year of expansion, learning and producing a lot more sites and types of sites that I imagined at the start of the year. In fact is 2014 continues in the same way I am looking forward to the projects and sites that I will be able to tell you I have built this time next year.

Thanks to anyone that has helped me on Twitter or anywhere else for that matter. The WordPress community is what sets us apart from many others and roll on 2014…

New Site for Me!

After a long time with no site at all really I have finally got round to putting something together to put up here in on the web. The content is much the same (at the moment) as the old site, however I plan to develop this over the coming weeks, with new posts and a portfolio section.

I have come to the conclusion that it is really hard to maintain your own site when you are so busy working on other projects. In fact I wonder if a sign of a good developer (I don’t think I am that bad!) is that they have a less than great site? I am therefore going to be using this site as a testing ground for trying out new things.

The first of these is to try and use a Commercial theme and therefore I have opted for the Minimalizine theme. This is a child theme as I have made 1 or 2 modifications to the display of content, particularly for the different post formats.

So the experiment begins, I hope to have regular posts about the stuff I am working on at the moment in the near future.

Re-Installing Mac OS X Mountain Lion for Resale

I have recently sold my iMac on eBay. I have a MacBook Air and was not fully convinced when I purchased it that it would be good enough for a main machine. How wrong was I, which left me not really needing my iMac hence the reason for the sale. Therefore I needed to wipe it and then re-install the OS ready for sale. Here is how I went about this.

Previous to Mac OS X Lion all Macs shipped with Install discs containing the Operating System and any additional software that was installed on the machine. However starting with Lion and afterwards the Mac App store meant that Mac OS X was all done with digital downloads and therefore Apple stopped providing install discs with Macs. What Apple failed to announce in a prominent place was that all Macs then included a Mac OS X Recovery partition which could be used in order to restore your machine to a vanilla install.

With this in mind I took the steps below in order to wipe my Mac and re-install the OS ready to set the item after a sale.

  1. Backup all data from the Mac. I use Time Machine with a Time Capsule and therefore I just checked to make sure that the latest backup had run correctly (which it had) and therefore I knew all my stuff was safe.
  2. Deactivate the computer in iTunes (should you use this for your music etc. of course). Purchases from iTunes are only allowed to be played back on 5 computers and therefore you should remove this one as you will no longer need it again.
  3. Deactivate any other software that you may have installed that is only authorised for one machine. I was running Adobe CS5 and therefore I needed to deactivate this so that I could then activate this on another machine.
  4. Sign out of iCloud services and then turn them all off.
  5. Next you need to restart your Mac, holding down the Command + R keys which will restart your Mac into Mac OS X Recovery Mode. From the screen that appears you should select Disk Utility.
  6. Here select the main disc in your Mac with all your stuff on it (probably called Macintosh HD). On the right panel click on the Erase tab and then select security options below. I would not choose anything lower than to zero out the data but would recommend higher. The higher you choose the longer the erase will take (it could be anything from a couple of hours to 15 hours depending on the security level you choose and the size on your Mac’s hard disc).
  7. Once the disc has erased close Disk Utility and then click on the “Re-Install Mac OS X” option from the window. Follow the instructions here. One thing to note here is that it will ask you for your Apple ID at this point. I was worried that this would ’embed’ my Apple ID into the install – something I did not want as I was selling the Mac. However this is not the case as your Apple ID is only used to verify that the OS is legal.
  8. Once this is done your Mac will restart and then arrive at a screen for your to start setting up your Mac with a language and user etc. At this point press Command + Q in order to quite the installer as you want the person that has bought the machine to go through this.

Hopefully the purchaser will have no problems with setting the machine up from here as it will be as new for them when they turn it on. The one that I did wonder about was what happens if the disc fails? This would mean there is no recovery partition. Perhaps there is the option to build a bootable recovery thumb drive? More research needed!

DVD Editing Tool – myDVDEdit

For a while now I have used a DVD recorder to record things off the TV, mainly before the invention of Sky+ and the like. However one problem that I noticed was that the DVD recorders (and I did try more than one) would never save the aspect ratio of the recording correctly. Playback on the DVD recorder was always fine but another play and it looked either stretched or squashed. Then I found the solution, a little Mac App called myDVDEdit.

Once you have a copy of the DVD from the recorder (I just copy and paste the two folders from the DVD to my local machine), this App allows you to modify the DVD info file which contains all of the information about the DVD including the aspect ratio. The App allows you to change the aspect ratio of the menus and the main video which when I checked was always incorrectly set to 4:3 rather than 16:9 which was the native aspect ratio of the program as it was transmitted.

You can download myDVDEdit and read more about it here.

Reinstalling Mac OX 10.7 Lion

My 27″ iMac upon which I work on for all my development work is an amazing computer. I purchased my in spring 2011 and it was just over a year old. Most computers, particularly PCs based on the Windows operating system, need a rebuild from now and again to remove any ‘rubbish’ and clutter that every day use can add to the system. Therefore here is how I set about reinstalling the operative system and starting again.

Step 1 – Back Up

This sounds obvious but the first stage to rebuilding your machine is to backup all of your content and data that you want to keep. I am not really talking here about applications as you will want to install these from fresh, either through the Mac App store or the original downloads or install CD/DVDs provided. What I am talking about is the documents, presentation, images, video and all the other stuff that you will of course want to keep.

Although I use Time Machine to backup my Mac, which is an excellent fail safe, Time Machine backs up the whole system, including that ‘rubbish’ that builds up over time. Therefore it would be pointless to rebuild it using this backup. Therefore the night before I scoured my hard drive on the iMac for all the stuff that I wanted to keep and then copied this to an external hard drive.

Step 2 – Boot Your iMac in Lion Recovery Mode

In order to be able to delete all the files on the hard disc of your Mac you will need to restart your Mac. On restart (when you here the restart noise) hold down Command + R on the keyboard. A window will then pop-up with some options.

As we want to start from fresh I choose to use Disk Utility in order to delete the main hard drive in the Mac. Then I went through the steps of reinstalling Mac OS X, which is another options in the pop-up window.

This takes a while but puts a clean copy of OS X Lion onto your computer. Your computer will then restart and it will act as if it was the first time you turned on the computer.

Step 3 – Setup OS X

OS X now boots and it will take you through the setup process in the same way as when you first purchased the computer. You will have to connect it to your Apple ID, enter a username and password etc. and choose some Keyboard and time settings to use for the system.

Step 4 – Copy Over Your Documents and Applications

Now you can use the external hard drive you copied your files onto in order to copy them back to your Mac with its brand new installation of OS X. The approach I take here with applications is to only install an App, when you actually need it. This will speed up your system and you will be surprised at home many of them you never actually re-install.

So there you have it  a quick guide on reinstalling Mac OS X Lion to give yourself and clean factory settings install to freshen and speed up your Mac.

New Design for 2012

Its been a while since I last had a redesign on this site. In fact is was early in 2010 and the old design did come off the back of a previous web design I did which I liked rather than one that was designed for purpose. Design is not my strong point and therefore this time I have decided to get a little help from the experts – the guys over at themify.me.

I have previously purchased the Sidepane theme for a project a while ago (purchasing premium themes teaches you lots when you delve into the code) and very much liked the theme. However there were some things that I wanted to change. Like many premium themes these days there are endless theme options and settings and it needed stripping down to the minimum. Therefore I thought I would try my hand at a child theme.

Child theme are used so that you do not alter core theme code. This means when you come to update the theme, as most themes release updates on a regular basis, you won’t lose any of the customisations that you have made. The theory behind this is very true. However in order to get the desired functionality that I wanted, I have ended up with lots of template files and folders, all of which will not get updated and contain important functionality.

The other main thing that I needed to do was to add some more template files for my custom post types of bookmarks and code snippets. These, I suppose where inevitable.

All in all I am happy with the outcome – what do you think?

Transferring a Domain Away from namecheap.com

Recently I had the task of moving a .com domain away from NameCheap (a domain registrar) over to a 123-reg account that I was much more familiar with and would be able to help out the client. The process, although not particularly difficult, does involve quite a few steps and therefore I thought I would share how I managed to transfer a .com domain away from NameCheap.

To make this easier to follow I am going to outline the steps in a numbered list.

  1. Login to your NameCheap account and you need to request the EPP code. This is an authorisation code which allows the transfer to take place. The EPP code will be emailed to your account email address.
  2. In your NameCheap account make sure that the administrative contact email address for the domain you are transferring is correct as emails will be sent to this address about the transfer.
  3. Login to your 123-reg account and then search for the domain you want to transfer as though you are buying it. When 123-reg returns the list of domains available you should see a transfer link next to the domain. Click this and then add to basket. Follow the instructions to purchase the transfer. It is actually free because although you pay a transfer fee, 123-reg extend your domain by another year
  4. Once this is done, check your email account that is the admin contact for NameCheap. This email can take some time to come so do not worry if it doesn’t come straight away.
  5. Follow the instructions in this email. At some point there will be a link that asks you to enter the EPP code that was sent over. Do this and confirm.

That should now be all that is needed to make the transfer happen. It can take around 10 days in total for the transfer to work and therefore patience is the key!

iMac Replacement at Last!

Having bought my 27″ iMac in early May it developed a fault whereby the screen froze every now and then and filled with mosaic dots. During this time the mouse moved but all other functionality ceased. As the iMac was under warranty I booked an appointment at the Genius bar at an Apple store and returned it to explain the problem.

It was clear that the ‘Genius’ didn’t know what was wrong but recommended a video card replacement. During the consultation it was also clear that the screen had a dead pixel and therefore a new LCD screen was required as well as a replacement to fix this screen flaw. What surprised me was the cost of replacing the video card and LCD display which is outlined in the image below. I would have thought that at this price (plus extra repairs – see below) it would have been more economical to replace the computer and fix this machine in their own time.

A week went by without hearing from Apple regarding the problem. Today I received a call from the Apple store indicating that they had noticed further problems every time they had added a part to the machine including a new logic board. Due to the increasing amount of problems with the computer the ‘genius’ on the phone indicated that they would be replacing the computer under warranty for the equivalent current model. I am pretty sure that this is much better than the model that failed so I am quite pleased actually. Hopefully I should be able to pick the computer up tomorrow and they even said they would migrate the data from the old machine.

Photoblogging with WordPress

For a while now I have used Flickr to host all my photographs and I like the service that they provide with their relatively good value ‘Pro’ package. However for a while I have wanted to own my own data and therefore I wanted to move to a solution where I could host my own images which were more under my control. Therefore I decided to go about constructing a PhotoBlog theme using WordPress whilst maintaining some of the Flickr features we have come to know and love. Here is how I went about building my WordPress PhotoBlog theme.

The first thing to do was to think of a domain name that could be used in order to house the blog. I thought for a while about this as it is an important stage as it will be with you for a while. Looking at what I wanted and what was available meant I was limited although I finally settled on photomark.me. I quite like the .me top level domain (as you can tell from this blog) as it works well for anything relevant to a person in my opinion. Once I have purchased the domain I added it to my cPanel account and then installed the latest version of WordPress.

The next major decision which I faced was to decide on the different sizes of photos that I wanted to create for each photograph that I uploaded. This was something that I have always liked with Flickr in that when you upload a photo it creates a range of different sized photographs which you can use. I wanted to use this in this blog too. With WordPress already producing a Thumbnail, Medium and Large image alongside the image you upload it does a lot of this for you but I wanted to add a few more image sizes. Thankfully you can declare extra image sixes using the add_image_size() function in your themes functions.php file.

The next thing was that I wanted a way to display links to all the available image sizes next to each of the photos. A quick search around and I found Justin Tadlock’s solution of Linking to All Image Sizes in WordPress. This was great as it includes the images sizes you have added as well as the standard WordPress image sizes.

The next part was the design. I wanted to use a similar design to this blog to keep the same feel, but I wanted it a little more ‘arty’ Therefore I used some paint splurges here and there on the page titles and added an extra column to display detailed meta information about each post. I also wanted to make use of the WordPress attachment pages to display individual images on. The idea being that a featured image would display on the archive pages, then on the single post page the WordPress gallery feature would display a list of thumbnails and clicking on these would take you to a page which displayed that images larger with the links to the other sized images.

Lets take a look at the different page templates that where designed and how they were produced etc. We will start with the index.php template.

Index.php Template File

The image below show what the template looks like when displayed on screen. As you can see I wanted to include quite a bit of information about the post from this page including a sample image from the gallery.

By including both photos and video in the blog it allowed me to take advantage of the new WordPress 3.1 post formats feature. By adding the appropriate post format to a post, whether it be gallery, image or video this allowed me to use the template tag has_post_format() to check which post format a specific post had and then style the post accordingly. WordPress also assigns a class including the post format when using the post_class() tag.

The WordPress featured image function [the_post_thumbnail()] was used in order to display a selected image from the images uploaded to the post. This image can be called at any size by passing a specific WordPress size to the_post_thumbnail() or by passing one of the sizes defined when we used add_image_size() to declare our custom image sizes.

Single.php Template File

The purpose of this file was fairly straight forward. It needed to display the gallery, which just used the normal WordPress built in gallery functions and display the content of the post as well as providing standard commenting functionality.

Image.php Template File

This was the first time that I have really utilized the use of the this WordPress template file. It is used to display the individual image in your posts gallery. Therefore when clicking on an image thumbnail in the post gallery you are taken to a page template to display the image. The great thing is that you can style and design this as you wish. The design I have chosen is below:

The final thing that I wanted to do was to create shortlinks for each post using the new domain that I bought. I did this using Yourls as well as the associated plugin that goes with it. Find out how I did this in this earlier post that I wrote about setting up and integrating Yourls with your WordPress website.

Most other stuff on the site is standard WordPress theme stuff which is pretty straight forward. I am pleased with the outcome although I just wish I was more of a designer to make it look really cool. Still I suppose we all have our skills! I would love to know your thoughts so please leave a comment below.

Vist the new site at http://photomark.me

Why I’m Not Keen on WordPress Theme Frameworks

WordPress theme frameworks are a relatively new thing. In fact they seem to kick off when WordPress introduced the use of child themes back when WordPress 2.7. was released. However they have really caught on over the last couple of years, with many different frameworks now available for use. Here I want to talk about how theme frameworks are built to be used and my thoughts on their success.

As mentioned most theme frameworks rely on the parent and child themes process. You create a child theme based on the parents theme framework and therefore when the framework is update you changes are not lost. Most of the frameworks that I have seen out their including one I have used extensively, Thematic are essentially a parent theme. That is they are a WordPress theme that you add to your wp-content/themes/ folder. You then build a theme using this parent theme framework as your parent theme. This means you have access to all the frameworks functions and code.

So that all sounds great, but why therefore am I not that keen on using theme frameworks. Well I think it comes down to the fact that I believe that theme frameworks at the moment are going about this the wrong way. They way they are at the moment is more restrictive when they are supposed to add functionality rather than preventing theme authors from doing things in certain ways.

I created a number of child themes for a client recently using the Thematic theme framework. The idea of these child themes was that the parent theme (the framework) could be updated and this would not affect the child themes display at all. However in order to get the design and functionality elements that I wanted I ended up with child theme functions.php files that we a couple of 100kb each and about 5 or 6 theme template files that would overwrite the template files in the parent framework theme. Surely this cannot be right as child themes are supposed to be lightweight and really on contain a styles.css file and a functions.php file so that all the bulk is used from the parent theme.

To me a better way of doing things would be to make it so that the framework was not a theme at all. In fact is was simple a folder that could be added to your own parent theme and then activated with a line of code (like a PHP include) in your themes functions.php file. This seems to be the approach that themify.me have taken with their theme framework which works well.

I realise that this may well cause a great deal of debate. Maybe I am doing something wrong with the use of parent theme based frameworks. I would love to hear peoples thoughts on this.