Taking the WSWG WordPress Theme Development Course — a live journal

Introduction

The situation

My name is Bobbi. I am the designer for Wanderoak—the website design and development studio responsible for We Start With Good. Aurooba is the developer at Wanderoak, and together we are creating a WordPress Theme Development course here on We Start With Good.

Of course, being the developer, Aurooba is writing the course. My role, on the other hand, is to edit the course, create design materials, and help with organization, marketing, and overall presentation.

But there’s one more thing.

I happen to be the exact type of person this course is being created for: I have a working knowledge of HTML/CSS; I’m interested in code and development; knowing the information will help me do by job better; I have a personal website to maintain; and I’m all about learning new things.

So I’ll cut to the chase — I’ll be taking the course, following the lessons as I edit them, and documenting the whole thing along the way.

I’ll be regularly updating this article with the journey, as well as sharing on social media.

Let’s do this! 🙂

March 28, 2018

Getting set up

I was just working through the set-up lesson and opened Brackets (a code editor) to make sure I had the latest version installed. It was a mess!

I’ve dabbled in theme development before (mostly by copying and pasting elements I didn’t fully understand and crossing my fingers that it would work), so I had some files there. They were a mess, and felt super unfamiliar and jumbled (not really surprising, if I’m being honest). I closed Brackets super quick, then installed the update.

I am definitely looking forward to a clean slate and starting fresh with this course.

The explanations I want, when I want them

There is a little part about the way this course is formatted that I absolutely love.

A prerequisite for the course is basic working knowledge of HTML/CSS. This is all good. However, there is another coding language required for WordPress theme development: PHP.

Instead of just giving us the PHP and saying what it does, we get timely and detailed explanations—called Mini PHP Lessons—that include the how and why, when appropriate. 

You guys! I cannot begin to explain how satisfying this is. I’ve always had trouble with explanations that consist of “because I said so,” and these Mini PHP Lessons are the complete opposite of that.

(Also, the designer part of me is super excited to design them…)

March 29, 2018

And we have liftoff! 

Who has a working theme and understands exactly how everything is happening? This gal.

(I don’t think I’ve called myself a gal before… feels funny. But gal is the female equivalent of guy, right?)

It’s beeeaaaauuuutiful!  This is exactly the website everyone dreams about, right? Just kidding, but it is really fun to have something brought to life so quickly, even if it is super basic. 

I’m excited for lesson 2!

April 24, 2018

Back from vacation and back at it

I went to Mexico for a wedding! Apart from being absolutely awesome (the weather! the ocean! the beach!) it meant I took a bit of a break from the course. Good news—jumping back in wasn’t too bad. I’d read through lesson 2 before I left, but actually worked through it today. It was definitely obvious that it had been a while since going through lesson 1, but I didn’t have to go through everything completely again and I found most of it had stuck.

I won’t share a screenshot of my site again, since it’s not too much different at this point. I did however change the name of my website from the generic and boring “WordPress Theme Development Course” to the less generic and more awesome “Bobbi’s Awesome Theme.” Creativity was going strong here, friends. 😉

Instead, below is a picture from my trip. How could I not share something? (And how could it not be the snorkelling picture where everyone always looks hilarious?)

May 3, 2018

It’s magic! (Or, at the very least, super satisfying)

There’s something to be said about adding a simple piece of code, saving your document, and an entire section of your website showing up. And knowing that you made it happen

I feel powerful. 

But (slightly) funny story: In this case, I was working through the first lesson on functions, and one of the functions registers a widget area. After completing the lesson, I quickly saved my file and viewed my dev site. Nothing had changed. I had no widgets section in the backend at all. Cue slight panic. 

Until I realized I hadn’t actually saved my functions file. I actually saved it this time, then went back and refreshed my dev site. 

And it appeared! Just like that! Seeing it not there, and then seeing it there mere seconds later… that’s a sweet feeling. Similar to the feeling you get when you try something new and it just works, on the first try. 

I don’t think this will ever get old. 

June 7, 2018

The Loop

My past WordPress theme development experience has consisted of me copying and pasting versions of the loop, making some basic changes, and hoping to the best. It would usually work, but I’d be left mystified at how, exactly, everything was happening. 

And not feeling mystified in a good way, like a decent magic trick leaves you.

While doing client work, I sometimes suggest things or ask Aurooba about things, not knowing if it’s really easy to accomplish in the code, or near impossible. Most often, she’ll look at me (because we’ll be on Skype) and say something like ‘Yeah, dude. Not a problem.” 

My hesitancy likely came from the fact that, while I mostly knew how powerful the loop was, my general lack of knowledge about how it really works made me doubt that knowledge a little bit. 

But now that I’ve gone through this lesson, I feel like I have ALL THE POWER. So many gaps in my knowledge have been filled in, I’m excited to test what I’ve learned in the rest of the lessons, and see if understanding the loops makes everything else that much more clear.

January 21, 2019

Page Templates Galore

We’re back at the course with determination. It’s taking longer than we originally hoped to finish (our Wanderoak clients have been our number one priority), but we’re getting there!

After reading through all the previous lessons again to refresh all the info, I jumped into the next one—Page Templates Part One—with both feet.

(As opposed to with one foot, which I guess would theoretically be less high or long of a jump if we are talking jumping into a pool. Though if it was a running one-footed jump it might be father than a standing two-footed jump…) 

I made the exact same mistake here as in one of the previous lessons—I did all the work, worked through the code (being super pleased at understanding it), hit save, and refreshed my local site with anticipation of the magic of code… but nothing. Blank white screen, no errors to help. Then I realized why—I’d added all the empty new template files first, added in the code one by one, but forgot to save one of them. So WordPress was trying to use the template file I’d added, but the last saved version was blank, so of course my screen was blank. 

Panic averted fairly quickly, I’m proud to say. 

Bobbi’s Awesome Theme is coming along quite nicely. Still no formatting, but I now present to you a working search bar on a category archive page with no posts! Ta-da! 

Working category archive page with a search bar

January 31, 2019

A widget area! comments! and a useful 404 page!

Things feel like they’re moving along excellently. I feel like I have the makings of a full on website here, and I’m excited about that. Not just because it’s there, but because it’s there and I know exactly why it’s there, and how. I can understand the code and find things if and when I want to edit them. 

I can’t wait to add CSS! (That’s the designer in me coming out, and being quite giddy…)

Working comments!

February 6, 2019

Real practice

This is how our process works: 

  1. Me as the editor of the lesson: I read through a lesson, making comments, asking questions if something is unclear, and making editing suggestions for clarity, tone, grammar (and so on).
  2. Aurooba goes through and answers my questions, accepting my suggestions (or not!), and making a few changes if required.
  3. Me as the tester of the lesson: I go through a second time, as if I’m a student of the course. Code open, learning and creating. I ask more questions and make more comments if they pop up. 

For this particular lesson, as I was doing the initial editing run-through, I made the following comment in our Google Doc: 

A comment Bobbi made in Google Docs while editing the lesson

Why did I make this comment? Well, it’s part excitement and part real nervous anticipation. You see, Aurooba had just finished explaining a bit of code and how something was done. Then she writes this: 

“This is also just ONE way to output this information. There’s potential for improvement here, for example, you could… [here she briefly explains the other option]. Try modifying the code to make that happen.”

Try modifying the code to make that happen. Theoretically I knew how, because we’d learned about it earlier, but the anticipation of actually having to do it on my testing run through of the lesson was definitely present. It felt like an upcoming test! 

I won’t keep you in suspense. I’m proud to say I believe I passed and honestly, I had so much fun. I’m voting to include more of these types of exercises into the course. It was a little push to step outside my comfort zone and do something entirely on my own, and I found it incredibly helpful. 

On to the next lesson! 

P.S. I added a bit of CSS to my theme yesterday (not much, and definitely not covering everything), and now it looks like this: 

Added CSS to the theme

Follow along with the course!

Pop in your email address and we’ll send you course related updates, including when new entries are added to this journal. 

Success! Thanks for following along with the adventure. 🙂 

It looks like you're already subscribed. Yay!