Want to build a WordPress theme from scratch? Here’s how we do it…
Take a look at our journey to making our first attempt at building a WordPress theme from scratch…
Where we started with WordPress?
We started off some years ago (2011) taking our first steps into WordPress web design when we started our first iteration of self-employment, as a ‘small business marketing consultant’.
It was a home-based, remote worker, sole-proprietor set-up with zero cost start-up.
With no prior experience of web design (…other than a single beginners HTML/ASP class in the late nineties – with a handbook detailing the basics; plus a recommendation to www.w3schools.com from a friend) we waded in with finding our way around setting-up a basic, self-hosted WordPress site.
When we needed a beginner’s theme…
A quick internet search for a small business WordPress theme led us to a website called, Expand2web. It’s here we discovered the merits of a small business centred WordPress theme aptly entitled, SmallBiz Theme.
It took us a few days to get to grips with the basic controls as we were complete WordPress newbies. Thanks to the intuitive back-end engineering of the theme we were able to design our first self-owned web design without too much hassle.
Plenty of preset page templates and sidebar on/off switches made for a generally rewarding first foray into WordPress design.
As we took on our first few clients, increasingly we across more small business owners wanting to combine good web design with good Google rankings.
As we gathered more understanding in the on-page SEO techniques which are prevalent throughout the internet marketing industry, we sought for a more advanced theme which could accommodate our growth into authentic SEO-based web design.
When we needed an SEO first theme…
Having searched online for a WordPress theme made by developers with an SEO first attitude, we discovered the SEO Desgin Framework (SDF), developed by SEO Design Solutions.
The founding company are also well known for the SEO Ultimate plugin which in the sight of many industry insiders is a like-for-like Yoast SEO alternative, giving you all the help you need in maintaining good search visibility.
With built-in, on-page SEO enhancing internally linked silos and many other search focused functions, the investment of this framework was advantageous in giving us an automated way to achieve thematically reinforced content information architecture.
Simply put, it helped us make websites for customers which had the content arrayed in a way which Google would understand and favour according to many industry SEO experts.
Whilst the Bootstrap based SDF-theme enabled us to progress in the web trade and tackle web re-development projects for businesses with larger content archives and produce slicker front-end – we needed a change.
We needed more.
Our introduction to Genesis Framework…
The robustness and yet leanness of industry leading frameworks, like Genesis, offer built-in best practice coding standards throughout which grant many advantages.
Here are just a few advantages:
- Instant updates beamed direct into the WordPress theme files
- Very lean – no drag from bloated code = very fast!
- Solid SEO integration
- Airtight security
- Excellent developer support
With Genesis Framework, there is one drawback for beginners – customisation.
Genesis Framework is built using a proprietary theme mapping system, know as Genesis hooks. This system is notoriously confusing and very counter intuitive for even many seasoned WordPress developers, which has turned away quite a few potentials.
It’s a steep learning curve to overcome and with us at the time, we decided to avoid the time to crack it, in favour of digging deep into the WordPress Codex itself to learn how to build a theme ourselves.
This was our journey…welcome to this series, where we hope you’ll learn…
How within days with absolutely no coding expertise we achieved building our first WordPress theme from scratch…and so can you!
This blog series summarises our approach used to build custom WordPress themes from scratch – or at least from a completely starter blank theme!
We don’t claim this approach to be definitive (is there such a thing with web design?), but we hope it might just shave off some time fishing around to piece together how to approach this from a stand still. If we saved time at least, this we’re pleased with.
Even if you find this tutorial beneficial – still, don’t fail to continue reading around the subject if you want to improve and develop better practice of this discipline.
Who is this tutorial for?
Typically for beginners and first time theme developers, but would be worth a read for anyone looking for a detailed tutorial explaining how to build WordPress websites.
Why did we make it?
We made this tutorial to help you, should you not know where to get started making themes.
How soon should you be able to follow these steps to make your own effort?
What are the composite parts?
- Information architecture plan
- User experience plan
- Branding, Font & Colour Scheme (inc. Red Green Blue & Hexadecimal )
- How A WordPress Theme Works
- Install HTML5Blank (or other starter theme)
- Install Custom CSS and other libraries
- Plugin Set-up
- Partial Design & Development
- Template Designs
- Custom Navigation
- Loop Design
- Custom Queries
- Comments Design
- Archive Design Author Design
- Custom Graphics, Icons, Photos (inc. CTAs etc.)
- On-Page SEO Management
- Mobile Responsiveness
- Back-End Custom Tips
What if you have questions?
Feel free to ask.
Find this useful?
Feel free to comment and share it.