Browsed by
Category: Technology

Creating a WordPress Theme from Scratch: Getting Started

Creating a WordPress Theme from Scratch: Getting Started

There are actually only two files that you need to get a basic theme up and running: index.php and style.css. If you add these to a new theme folder (wp-content/themes/new-theme-dir/) then you can choose your theme from the dashboard (Appearance->Themes):

New blank theme

 

To populate this data with the details of your theme, you need to create an initial comment in the style.css file like so (I called my theme Raul just because…):

/*
Theme Name: Raul
Theme URI: http://www.dezco.co.uk/
Description: A nice clean news looking design.
Author: Robert Desmond
Author URI: http://www.dezco.co.uk/
Version: 1.0
Tags: responsive, white
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Detailed Theme

To add a screenshot of how you want your theme to look you simply need to add a file called screenshot.png to your theme directory (dimensions 600×450). (I took a picture of my drawing on paper until I would finally get a real screenshot!)

Updated Screenshot

There you go! You now have a theme that you can activate although you are probably a fair way from making it look good!

Next steps: Structure of a Theme…

Creating a WordPress Theme from Scratch

Creating a WordPress Theme from Scratch

I recently started creating a WordPress theme from scratch.

WordPress Logo

I did this so I could understand a few things:

  • The back-end of WordPress and how it fits together
  • How plugins, widgets and themes are constructed
  • How to create dynamic web-pages for mobile devices using CSS3 and HTML5

Creating everything from the ground up helps the understanding of how things fit together – but if you just want to get something working then there are plenty of other themes out there that will kickstart your development. (See Child Themes)

Throughout this process I have set myself a goal of creating a theme that is accepted by WordPress so the public can use it easily (although I am not sure I will have the time to maintain it going forward). If that goes well then perhaps I will even create a Premium Theme that I could sell if it’s good enough. That would give me motivation to keep the theme updated!

There are many articles out there that discuss the different CMSs (Content Management Systems) and the benefits of WordPress in comparison. I have a little experience with a few other CMSs – Escenic, a couple of bespoke CMSs, Joomla, Drupal…etc… However, perhaps through familiarity, much prefer the use of WordPress.

WordPress just works. It is well supported with decent community designs and features (although a few plugin’s don’t work the way you want – so create your own as per these tutorials or use recommendations from others).

A few people have commented to me that WordPress is a bit antiquated, however I feel it is continually updated with new features in the back-end and front-end (through themes).

WordPress works extremely well for almost any purpose of a website, not just blogs; but news sites, personal sites, information sites, static sites, commercial sites… and it is really quick and easy to set-up.

Also it is FREE!

Anyway, this page will include more and more links to tutorials over the coming weeks to help people (like the future version of myself that will forget) create and tweak their own website through some of the more technical parts of WordPress using PHP:

Facebook Like Button: Add it to your WordPress or other Website

Facebook Like Button: Add it to your WordPress or other Website

A nice thing to have on each of your blog posts or web pages is a like button from Facebook which will allow users to like individual posts. This will help you gauge how people have received each post in comparison to others.

Facebook Like

With the like button, there is a nice feature to prompt the user to share it to their feed. This will exposure your post to more people (you should be able to try it above – you can always un-like and un-share it too!).

The code is very simple to add, but it is code, so it looks scary!

The latest code at the time of writing is here. It requires that some Javascript be added on the page and also a “div” (read division or section) where the like button will actually go.

There are a few different parameters (and you should play around with them); but for the purpose of getting the current page (and hence post) leave the URL to Like blank. Alternatively if you want people to just like your Facebook page then put that in the top box. Then use the settings you want (you get a nice preview of what it will look like in the top right too):

Like Settings

Hitting “Get Code” gives you potentially a scary looking dialog box. This contains the Javascript I mentioned at the top and the “div” where the like button should go.

Like Code

Next steps:

In WordPress go to Appearance->Editor.

Don’t be scared!

You will now need to find the page on the right hand side which has the template for a post. Usually called “post” or “content” but each theme has it’s nice intricacies. If you are not sure then perhaps add the number “1” to the very beginning of the file and save your changes – refreshing the site will show that “1” and you can check it is the correct page.

For my current theme it is is in “content.php”:

Content Php EditorAt the top of this file (for simplicity), before any other text, add the Javascript section as above.

For me I wanted to put the like at the top of the post below the title (you could put it at the bottom of the post too?!). So I found where title was on the page and simply pasted the “div” code a line below it.

Div Like Below Title

Hitting save changes will automatically add it to the page and will immediately update the site. Check back on the post page to see if and where it has got to and play around with where it is as it isn’t an exact science! You are unlikely to break anything – but if you are playing around a lot then I suggest backing up the file before doing anything you are unsure about (copy it all into notepad or textpad).

Hope this helps those out there! I may even create a widget that does this automatically – but I’ll save that for a rainy day…

p.s. One thing worth mentioning is that if you update your theme then you might lose the button – you can always add it back in because it was simple though – right?!

Startup Funding: TrainE TraidE

Startup Funding: TrainE TraidE

I wanted to raise awareness TrainE TraidE that helps to train young people in job hunting skills, such as CV writing, mentoring and seminars. And recently they have taken advantage of the generous government scheme to give cheap loans to startups.

TrainE TraidE

If you are looking for a place for a loan for a startup business then TrainE TraidE is a great place to go as they can sign off on budgets quickly and efficiently. They can also help connect you to powerful mentors, larger businesses and resources (accountants, lawyers, book keepers, web/app developers etc…) that you will need in your new venture.

So if you are looking to embark on a new startup then get in touch with them! http://www.traine.org.uk/contact-us.php

BPA Free Bottles

BPA Free Bottles

A good friend of mine, who is both a dentist and personal trainer, has already written about the perils of BPA bottles of water.

BPA is short for Bisphenol A which has been proven to cause changes in hormone levels (particularly oestrogen) as well as having carcinogenic effects – particularly in women causing breast cancer.

BPA Free Bottle

I recently ordered some (personalised) bottles from http://www.onegreenbottle.com/ which look great and are a lot better than drinking from regular plastic bottles. This website has also been setup to donate some of the proceeds to Breast Cancer UK.

They are not only very easy to carry around but also encourage regular rehydration because you always have water with you!

Keeping Things Clean: Broken Factory Windows

Keeping Things Clean: Broken Factory Windows

At my Computer Science course at university we were taught about code cleanliness. An anecdote to describe needing to keep everything you do “clean” was to think of a traditional factory with lots of small windows. If one window is broken should you fix it?

It is just one small window and there are many many more windows, so functionally it doesn’t really matter. One window broken isn’t going to destroy the factory.

However it sets a precedence for the rest of the factory: if that window is broken, then if another one gets broken do you bother fixing that? Well no, because it’s just one little window and you didn’t before. You continue this until suddenly there are smashed windows everywhere and the factory workers don’t really care about the quality of their work because they work in an environment where things aren’t looked after.

The analogy to coding here is clear, but it can be added to so many aspects of life and other professions.

Should you refactor something as soon as you can? Well it might only be one tiny aspect of one file of a massive project so it’s not going to make any difference on the project. However if you don’t clean it, then someone else has a horrible time using it, they will spend ages trying to work it out, maybe cleaning it incorrectly, or perhaps just thinking that since this part is a mess it doesn’t matter if their stuff is a mess too. This is particularly true on larger projects. You should always assume your project is going to become massive; similarly it might not be touched by yourself for years if you really do think you will be the only one using it.

The same can be applied to focus. Maintaining focus on a single particular task is crucial to not only ensure you complete a task to the best of your ability without distractions, but it ensures you are a lot more productive with your time as a whole. Too many people I know spend their life with Facebook open in the background, and email alerts coming up on their phone or desktop whilst they are at work. Not only does it distract your train of thought but it makes one task take a lot longer to complete.

If you can’t focus on a task until it is complete then you haven’t broken the task down into chucks that are actually manageable.

I try and keep these points in mind in all aspects of my life:

  • Actual cleanliness of my flat: clothes, bed, dishes, desk, shelves
  • Work: planning out projects, structuring my day, logistics, coding, sending status updates to clients/mentors
  • Fitness: monitoring progress, organising cycle rides in advance together with logistics, partaking in fitness classes
  • Food: writing down shopping lists, marinating food, preparing ingredients, organising cupboards and work surfaces

Spending the extra time on this overhead of making sure everything is clean and set up correctly will save you valuable time in the long run allowing you to get much more done!

I struggle to understand how people can get anything done when they live in such an unorganised environment:

A ridiculously dirty room
A friend’s dirty room

Another good story was a parent asks his kid why he hasn’t made his bed. The kid says: “I’m just going to mess it up and sleep in it tonight”.

The parent responds with “But you are just going to poo again tomorrow after you go to the toilet today…”.

Setting up a WordPress Blog Website (live and staging/testing versions)

Setting up a WordPress Blog Website (live and staging/testing versions)

I wanted to document the “proper” way to setup a WordPress blog on your server with a decent staging/test server.

To start off it is probably worth mentioning why WordPress is a great system to use. It is probably one of the oldest but continually updated pieces of software out there for blogs. Not only does it work well with blogs and dynamic websites but it can be used to create a static set of pages in a very easy way. There are a few pitfalls with some of the plugins that don’t seem to just work – but hey that’s what hacking away at them for hours is for right?!

First of all you can get a free wordpress blog, fully hosted at wordpress.com which is nice and easy to setup.

Alternatively you can download the latest version and upload the directory to your webserver. You will need a mySQL database to connect to with login details which you will have to input when you navigate via a browser to the directory you just uploaded those files to.

I created a live server and a staging/test server so I can play around with themes, plugins and posts without worrying about what my real users are seeing.

If you copy your live database over to your staging server you will need to update the database connection details in config.php and change a couple of rows in your database.

wp_options table: siteurl and home need to point to the correct place

I would also recommend “Discourage search engines from indexing this site” in Settings->Reading.

Perhaps also including a robots.txt file that disallows indexing of your staging site.

I also recommend using a different colour scheme on the back end.

Changing the settings on each version so I can tell by looking at the back end whether I am on the staging or live system
Changing the settings on each version so I can tell by looking at the back end whether I am on the staging or live system

This is if you can be bothered to create a test server – otherwise you would be good to go in a very short amount of time! Happy blogging!

Hacking the Twitter Ultimate-WordPress Plugin

Hacking the Twitter Ultimate-WordPress Plugin

QUICKFIX: replace twitter.js with the contents of this file in the Twitter Ultimate Plugin via the editor in WordPress. Also upload this file‘s contents to a new file called twitter-proxy.php in the directory: wp-content/plugins/twitter_ultimate/ Fill in the details of this last file with the keys from your new app which you set up here.

(This file is my original file with the lines I have changed annotated if you get stuck)

A friend on mine recently had an issue with a Twitter API call since Twitter retired their older API 1 and have moved everything up to 1.1. (In fact it was a WordPress plugin called Twitter Ultimate which makes nice jQuery calls to update the UI should someone have posted something new). I managed to get a temporary fix in place that allows the calls to connect, as shown below, with the help of a great blog post which pretty much solved my solution to this plugin problem by authenticating using oAuth in php. My javascript would now call this authentication (via jQuery.getJSON) before making the actual request for the tweets (search/tweets API call).

Firstly you have to create an app on the Twitter developer site for the authentication – https://dev.twitter.com/apps/new which is quite a quick 2 minute process. Once you have done this you will need to take note of 4 things:

  • Consumer key
  • Consumer secret
  • Access token
  • Access token secret

You need to make sure you don’t call this too often as there is a limit to the number of calls you can make as defined in the documentation. Currently Twitter limit to once every 5 seconds (on average) and if you go over it will block you until 15 minutes from your first call is up. It is actually 180 calls in 15 minutes. For the purposes of this plugin I have edited it to be once every 10 seconds instead of the default 5 seconds – but remember many people accessing the same page count as new connections. You can make a call to rate_limit_status which will tell you (in Unix time) when the limit will be reset for your application.

I had to add a twitter-proxy.php file to the plugin directory firstly and editing the constants at the top of the file of the new app that I created above.

Then a little hacking of the twitter.js file allowed me to call the proxy authentication code first. (Changes in comments)

Now the page works just as it did before – but sometimes I get a rate limit exceeded error (which I have to use a debugger for) which could be handled more nicely.

I also noticed there seemed to be a glitch with new tweets that came in not having their timestamps updated further down the line. Answers on a postcard please!

Please do let me know if this is useful or it doesn’t work: via my Twitter.

External Hard Disk Drive (HDD) Review: Touro MX3 and My Passport by Western Digital

External Hard Disk Drive (HDD) Review: Touro MX3 and My Passport by Western Digital

I recently purchased a new external hard drive to help me consolidate my music/movie/photo library from the various places it is around the world (e.g. my Dad’s computer, Mum’s laptop, my laptop, backed up on a few servers etc…).

Since new hard drives are getting ridiculously cheap (from what I used to remember) I picked up a new one for just about £50 from Amazon
 which has 1TB of storage and is powered by USB (basically a small wallet sized device that powers itself wherever I go!).

Touro
Touro MX3 1TB HDD

There is an issue with all hard drives as to which file format to use.

I run both a Windows desktop (for development) and have a Mac Book Pro laptop too. I also have Linux based servers (as well as Windows) so I need to have something where I can plug my hard drive into everything and it just work and mounts correctly.

I plugged it into my Windows machine first which automatically formats it to NTFS which is READ ONLY on Mac. So I formatted it on the Mac to FAT32. This means the file size is capped at 4GB, but is easily usable on both Windows and Macs. Supposedly you can remove the cap on file size by using exFAT format which you can do by formatting the hard drive on a Windows machine only.

Once this problem with getting it to work between the machines was solved I found the hard drive very quick on USB 3.0 and has been very reliable since.

Note: to format a hard drive on Windows –

  • Go to My Computer
  • Right click on the hard drive and select formatFormatting on Windows1
  • Turn to the file system you want and hit Start – this should be very quick!Formatting on Windows2

Note: to format a hard drive on a Mac –

  • Use the searchlight (the Apple key and the space bar is the shortcut – or just go to the top right hand corner) and search for disc utility
  • Select the drive you want to format and go to the Erase tab
  • Change the name of the drive and the format and hit Erase – this should be quick!

I also have a slightly older My Passport 1TB HDD also made by WD (Amazon).

WD My Passport
WD My Passport 1TB Blue

Similarly the My Passport has been fantastic over the past year or so that I have had it. Again powered by USB so I don’t have to bring a charger with me which is nice and very compact. I recommend both hard drives as good value for money.

 

Comparison between the two external hard drives
A comparison between the two hard drives
Breaking the iPhone (4S) Cover and Back

Breaking the iPhone (4S) Cover and Back

Whilst cycling to Cambridge one day I hit a pot hole so hard that the iPhone case on my handle bars swung open and the phone fell on it’s face breaking the screen. Thinking it was my fault for not securing it correctly I kept the iPhone holder and lo and behold a few weeks later the same thing happened after I replaced the screen.

Smashed Screen

There are several ways to replace an iPhone screen. Supposedly Apple will do it for £90 and I have heard of a few pop up companies that will do it for £50. You can also do it yourself for about £20 with a cover off eBay (like this).

The back will only run you a few pounds though (eBay as well); it is really easy to change too. Two small screws at the bottom of the phone (which are a custom shape that Apple created) followed by a slide of the back gets it off and you can replace the whole back in about 2 minutes.

The front however is a little more complicated! You have to remove quite a lot of the components to even get the screen off (taking about an hour) and then you need to make sure you *don’t* tear the wires that connect the chips that handle the data to and from the screen (which I did the first time requiring me to do it all over again).

Taking the iPhone apart

For anyone who is into their ‘taking stuff apart’ I seriously recommend this experience. I needed to learn some patience with the smaller screws that are a little more fiddly – but actually some tweezers gave me a lot of help.

I used a piece of paper to label the appropriate components and screw sizes for when putting the phone back together. This was after the first time thinking I could remember it all but struggling to find the screws that fit back in their place! I read the iFixit guide on my iPad to take the phone apart – make sure you use the correct model as the 4 and the 4s have some small differences that might cause you to break the headphone jack like I did!

Back of the iPhoneAs with all Apple products, even the interior working of the phone are quite neat too.

Long story short – don’t use this iPhone holder on your bike! I will be getting a new one which I will review soon.

iPhone Bike holder