Learn proper WordPress theme development

(Grant Smith) #1


I have developed a few WordPress sites, mainly using child themes such as Genesis Dynamik and iThemes builder, and although they are fine, I can not help feel, they are actually quite a slow way of developing sites because you are constantly trying to find the div class to overwrite it the way you wish. Plus, because they have to cater for mass market, there is probably a huge amount of code in there which I personally do not require. Hence this extra code may be detrimental to my sites performance.

So, ideally I want to learn how to take my Bootstrap html / css and turn it into a WordPress theme. Can anyone recommend a course to me please, either class room based or online.


(Yash Chandra) #2

I took this course a while back on Udemy and it was good for bootstrap to WP. No affiliation.

(Leland Fiegel) #3

Not sure I would describe anything Bootstrap-related as “proper” theme development. Here’s an article worth reading: Why Bootstrap is a bad fit for WordPress Themes

(Grant Smith) #4

@leland Thanks, that is a really interesting article. Unfortunately what it doesn’t offer is a viable alternative. Plus I do not agree with there thought process when it comes to design, "using a predefined grid is the wrong approach to achieving a great design”. Using grids within all forms of design has been an established process since the incarnation of the printed word. Grids provide order and hierarchy, the typographical grid forms the very foundations on which responsive design is based.

I also looked at their Theme Tutorial which looks great, however, and I have only scanned through at this point, it doesn’t seem to mention anything about their process being responsive.

When I proper WordPress theme development, I guess what I am look for is a process to take my PSD and turn that design into my own Responsive WordPress theme, without using a child theme of some sort due to the reasons above.

(Leland Fiegel) #5

I totally agree with what you’re saying, but I think they do too. The key word in there is “predefined.” They’re advocating the design dictating the grid, not the other way around.

The theme tutorial is great. But these days you might as well just browse through the Underscores source code.

I think the tutorial, along with Underscores, expects you to “bring your own” CSS, which includes responsiveness.

CSS is the single most important skill any budding WordPress themer needs to learn. You can do a lot with it without touching a single line of PHP or JavaScript.

I’m not sure how well-versed you are at CSS, but if not, you might be better served going through some pure CSS training first, before jumping into the WordPress-specific stuff.

I understand. I’m actually working on some training content that will do just that. It will have a heavy focus on CSS and nothing Bootstrap-related though.

Do you have a PSD that you’ve designed that you were interested in coding specifically? Feel free to PM me.

(Ben) #6

I’d agree with @leland - in my opinion using Bootstrap either creates themes that look the same as everyone elses, or requires a lot of wrangling to make it look different. Plus it’s quite hefty.

Using bootstrap isn’t the only way to make a site responsive - with a bit of practice it’s very easy to do, my responsive stylesheets are generally quite small since I build everything so it scales from the first line of code.

If you start with a good starter theme (like _s) then you can build a unique theme pretty quickly without all the cruft that’s added to bootstrap that you don’t use.

(Grant Smith) #7


I understand. I’m actually working on some training content that will do just that. It will have a heavy focus on CSS and nothing Bootstrap-related though. Do you have a PSD that you’ve designed that you were interested in coding specifically? Feel free to PM me.

I would be very interested in the training course once you’re finished Ieland, please keep me in mind once it’s ready.

I don’t have anything specific in mind when it come to theme developement, but I did think I would rebuild my portfolio site as a way to learn in my spare time. I started doing this with Bootstrap, but now feel this is leading me down the wrong path.

Do either @leland or @BinaryMoon have a suggestion of what I might look at first. I have quite a good grip on CSS, but I’m not sure where I would start now.

Thanks for the great replies

(Jason) #8

Keep in mind that with both Bootstrap and Foundation it’s very possible to take just the grid styles and be on your way, which removes the issue of themes looking the same. My team uses the Foundation grid and a few other bits of the framework, but that’s it; we take little to no design styles.

I know that’s not the overall discussion, but I figured I’d throw that in there for anyone that didn’t know. :slight_smile:

(Ben) #9

Good point. I’ve got nothing against using these frameworks for inspiration or learning (or using elements of them as you are) - my issue is when people make themes that don’t change anything, or sit on top of the frameworks and override styles to personalise them.

(Leo) #10

Have you tried out the following

  • TeamTreeHouse with Zac Gordon
  • TutPlus - Always a great place to learn more WordPress dev stuff
  • Lynda

Also, Zac recently started JavascriptforWP.com, a pretty great place to learn more on JS and WP together.

(Nate Wright) #11

@grantsmith If you’re looking for a one-stop place and don’t want to fumble around with different websites learning piece by piece, you might consider getting a book instead of looking for a tutorial (which are very hit-and-miss). I haven’t used it, but Professional WordPress: Design and Development is generally well respected and looks pretty comprehensive. It’s a few years old now but in terms of learning how to build proper themes, not that much has changed since then.

(Tonya Mork) #12

Hello Grant,

First of all, I applaud you for seeking to level up.

The intent of themes is to provide the presentational HTML markup structure and the styling for a website. In order to develop quality, clean themes, an author needs to be versed in many different disciplines including: PHP, HTML, CSS, and WordPress core.

Remember that themes, like plugins and anything in software, is a matter of understanding the environment, languages, and technologies. There is little magic to writing a theme or plugin or anything really in code. It’s all dependent upon your programming abilities and creativity. You need to first understand the fundamentals and the Why of it.

Ok so where do you start?

Step 1: Assess Your Skills
Assess your skills and knowledge of the disciplines above. Where you have gaps, you want to stop and go fill those.

Step 2: HTML
You need to truly understand what comprises valid, well-structured, and semantically correct HTML structure. To me this is the most important aspect of theming.

Why? Because everything starts and ends with the HTML in the browser. While to a sighted person, you and I may not be that interested or notice what is under the prettiness of a website, to other pieces of software, that structure is critical.

Huh, what the heck am I talking about? Software like screen readers and web crawlers read our HTML structure. It has meaning and drives things like SEO, site discovery, and readability. Maybe you are not as concerned about these things (although you should be as a developer), the HTML drives what you can do with both CSS and JavaScript.

Therefore, for me, a solid understanding of HTML, microdata, and the selection of the right tags for semantic and contextual meaning is a vital role of the theme author.

Step 3: PHP and WordPress
WordPress is built on PHP. You need a solid understanding of PHP and WordPress in order to write clean, quality code for themes and plugins.

Why is that important? You want to produce products in a timely manner and that require as little of your time as possible to support it. Without a solid understanding and that fundamental baseline, you may be inducing problems and buggies into your code. Those can be time consuming and irritating for site owners. You might also be taking the long way around to solve a problem, meaning that you have too much code. That’s problematic because then that’s more stuff for you to maintain.

Ask yourself if you understand the fundamentals, variables and scoping, memory movement, WordPress event-driven system, and more. Take an assessment of your skills and ability to translate that knowledge into actually building quality solutions.

Step 4: Clean, Quality Coding Techniques
Clean, quality code. I am an advocate of learning how to write clean, quality code and embracing software principles. It’s what I teach and do. Learning how to write in a DRY, modular, and readable fashion increases the quality of your code, decreases the bugs and issues, makes your code more maintainable (which means less $$ for service and support), and allows you to spin up solutions faster. Just doing those three principles will make your products so much better!

Some examples are:

These are just a few examples of how to write clean, quality code. Take the time to learn these principles and then roll it into your codebase.

Selecting the Right Source for Your Education
Select courses, programs, and tutorials from teachers who promote fundamentals, know how to break it down into bite-sized morsels, make it relatable, and help you to take a piece of knowledge and adapt it to fit your needs. I see so many programs out there which promote a “copy/paste” or “just do this” approach. The problem with this approach is: it fits one edge case and problem but is not adaptable for you to take it and make it your own in any situation.

Just be mindful of where you spend your valuable time in your continuous learning journey. We all have to do that. And remember that your time is very valuable as there is only so much time you have in a day. Use it wisely.

Styling -> CSS
I’d like to address pre-packaged solutions and the one-sized fits all approach. Bootstrap, Foundation, and others solve a particular problem in the market of giving a quick starting point. But they have a cost to them.

Bootstrap and Foundation, for example, drives the HTML attribute structure to their way to ensure it fits how they are targeting the styles. I like Foundation much better than Bootstrap.

Next, they are bloated as they come with a set of styling libraries to fit a variety of needs. You need to select only that which you need. Why make a device and its browser download the entire library when you are only using a portion of it? It slows down the web page loading and is unnecessary. I advocate that their stylesheets should be very lean and only contain the styles needed and used on the specific website.

In your quest to level up your theming, invest your time into learning Sass and CSS. Then build a starter theme with the modules that you need. Only load that theme’s needed styles and avoid the bloat.

I spend a lot of time in the CSS Reference that Sara put together. It helps me to really know what is possible as well as the proper usage of the CSS properties and attributes. For Sass, I think James Steinbach does an excellent job teaching the essence of Sass as well as the fundamentals. He is my go-to resource (plus I can just ask him in the WP Developers Club too).

JavaScript adds that extra user interactivity and experience to make sites really stand out. My buddy, Zac Gordon, has his JavaScript for WordPress Master Course where he is teaching you the fundamentals and advanced concepts of native JavaScript and some popular frameworks built upon it. I’m teaching jQuery over at Know the Code, as Zac and I partnered up to align what we teach.

Keep Themes Focused on Presentation
Listen to me. Themes have a specific intent. Keep the features and functionality out of the theme and put those into plugins where they belong. Here are some free videos which give you more on the subject:

Wrap it Up
Whew, seems every time I share, I write a book. LOL I want to leave you with this video that I did on Zac’s site: My Secrets to Leveling Up.

Be a More Awesome Developer
I’m writing a book on leveling up in WordPress development. It will provide you with a roadmap for “level up” habits and techniques as well as self-assessment tools you can use throughout your entire career. The habits will be setup for the various stages in your career. Check it out here on LeanPub.

Cheers and Happy coding!

(Gnanasekaran) #13

Started doing this with Bootstrap, but now feel this is leading me down the wrong path.

Bootstrap going wrong. Can you share your experience, what bad it was and what you recommend replacing bootstrap.