10 Quick WordPress Tips for Front-end Developers

Reading Time: 8 mins

We don’t always realize how much we’re actively learning in our day to day work. We’ve gotten so used to the daily grind of web development, that perhaps finding answers to “gotchas” or successfully troubleshooting a problem, is something we celebrate with a fist bump in the air before we move on to the next thing. What helps me keep this blog going is taking a few seconds to write those discoveries down in a draft. While small, each new bit of knowledge levels me up. I want to share some of those with you today as quick WordPress tips.

The great thing about these 10 quick tips, are that they can be absorbed in this one read. No in-depth tutorials, no lengthy explanations – just small bits of knowledge that hopefully help you grow the same way they’ve enabled me to grow.

Half of these tips are for HTML or CSS, the other half, WordPress functions that I’ve found handy during¬†front-end development. Let’s start from the quickest tips down to¬†ones that require a little more explaining.

Continue reading 10 Quick WordPress Tips for Front-end Developers

Escaping WordPress Template Functions. To do or not to do?

Reading Time: 7 mins

Sanitization, escaping, and validation have become a regular part of my WordPress theme development within the last year. If those words confuse you, don’t worry, I’ve got another draft in my dashboard waiting to be finished. Eventually. ūüėČ

But for those of you that do have a general idea of what these terms mean, perhaps you’ve faced the same nagging questions I had when it came to escaping WordPress template functions. At first, I was just applying escape functions mechanically, while not truly understanding what it was that I was doing, I knew that it was a best practice. Just like WordPress hooks, over time, my understanding became less fuzzy, but until these nagging questions could be answered, I couldn’t feel confident that I was escaping correctly.

Which WordPress template functions should be escaped? Which functions already have this built into core?

By template functions, I mean functions that are regularly used throughout theme development to call content from the dashboard. Like the_title(), the_permalink(), and the_excerpt() to name a few.

This becomes harder to figure out if, like me,¬† you hadn’t truly dived into WordPress’ mysterious core files for browsing. Or maybe you have, but found it overwhelming to follow the rabbit hole and chain of functions while simultaneously trying to make sense of how WordPress does just one thing. It doesn’t help if your code editor doesn’t make the task any easier. I’m a huge fan of Sublime Text, but have recently been exploring PHP Storm. I won’t lie to you, I still prefer Sublime for my daily development needs, but PHP Storm has a feature that has made learning about WordPress core so much easier.

You can Shift (PC) or Command (Mac) click on any function, WordPress or not, and it will take you to the file and line where that function is written. So for WordPress core, instead of being overwhelmed by all the files in the wp-admin or wp-includes folder, PHP Storm teleports you instantly!

A power ranger teleporting.

And so, via PHP Storm, I narrowed down which core functions actually needed escaping. I threw together a reference until it’s something I commit to memory, and thought it would be useful to share said reference with a blog post. In this post, I’ll also briefly review what escaping does for us, and how we would know if a template function needs escaping. Let’s get to it!

Continue reading Escaping WordPress Template Functions. To do or not to do?

How to get WooCommerce Category Info with an ID

Tutorial Difficulty Level: Advanced

Reading Time: 8 mins

The universe has been telling me to write this post for a very long time. The first time was a year-ish ago, when I¬†googled how to get WooCommerce category data with an ID and couldn’t find a clear answer. “Hey, this is a pain to find an answer for – this should be a blog post!” The second time was after¬†I had posted a question¬†on the WordPress Stack Exchange to find an¬†answer, and then I answered it myself. “Whoa – I figured this out! I should tell people about this!”

Then that question eventually ended up earning me a¬†“most popular question” badge. “Damn it, Rachel, people want to know about this – write a damn blog post!”

Okay, so I didn’t do it. Time passed and it was exactly yesterday ( when I began writing this post ), I was working in WooCommerce again, in the zone, went to google, and this happened:

Yep, that’s right everyone. I ended up googling the same problem I had already once resolved and ended up at the same Stack Exchange question I both asked and answered. All right, universe. You win this round.

To make sure I never ever forget I know how to do this again, I’m going to write it down! How to get the WooCommerce product category name, link, image, all the things with PHP so long as you have an ID to use, step by step, in tutorial form.

Before We Get Started:

  1. This assumes you’re familiar with PHP loops,¬†objects and variables.
  2. This is a WooCommerce tutorial yay!
  3. I am using Advanced Custom Fields for this walkthrough, but you can use other methods like a regular Custom Field and re-work this solution to your purposes.
  4. I am getting category information on a page other than the category¬†archive. If you’re on a category archive, check this WooCommerce documentation first for a head start. I found that the method there and the method I’m writing here¬†are a little different depending on the¬†template you’re working in.
  5. This solution is meant to work inside the loop.

Continue reading How to get WooCommerce Category Info with an ID

10 Ways to Learn WordPress Hooks

Reading Time: 9 mins

WordPress Hooks are hard. We always hear the word “hooks” being thrown around and it’s one of those things that make sense, but then it doesn’t.

I’m sure that there may even people reading this right now, and not entirely sure what I mean by hooks. That’s okay. Before I go on with this post, they look like this. These are two examples I pulled from the Twenty Fifteen Theme in functions.php.

Line 142 of functions.php in Twenty Fifteen.

Line 142 of functions.php in Twenty Fifteen, it’s an action hook.

Line 310 of functions.php in Twenty Fifteen.

Line 310 of functions.php in Twenty Fifteen, it’s a filter hook.

 

Still confused? No worries,¬†it took me a while too. In fact, I can’t say that I completely know all there is to know about WordPress hooks even now, even after writing, “The WordPress Hooks Firing Sequence“. WordPress is the kind of thing that the goal isn’t to learn it all, but to learn it in levels for your purposes. It’s such a deep system, deeper than most people imagine, and¬†I’ve found that once I’ve obtained an understanding of one concept, there is always more to learn.¬†Each concept I learn serves as a foundation for what I learn next.

Hooks¬†didn’t click for me until about a year ago. I too, was copying and pasting various solutions offered by the all knowing Google or Stack Overflow into my WordPress theme. I hadn’t truly understood what was happening when I dropped these snippets of PHP in and the world that would open once that understanding¬†happened.

As much as I’d like to sit here and try to explain what hooks are, if there’s one thing I can say from experience, is that understanding comes in layers. In other words, there is no one mind blowing resource that is suddenly going to make it click. Or maybe it will, depends on the person I guess.¬†For me, however, it took several readings, videos, and diving into WordPress code before the ah hah moment hit.

Knowing that it took a combination of resources and methods for me to learn WordPress hooks, I’d like to pass¬†them onto you. These resources will¬†hopefully bring that fuzzy definition of hooks into focus, even if it’s in layers. In addition to these 10 resources, I’d like to share 2¬†methods that worked for me.¬†Everyone learns differently and at their own pace, but perhaps sharing my experience will help someone along.

Continue reading 10 Ways to Learn WordPress Hooks

How to Add Counter Classes with a Global Variable

Tutorial Difficulty Level: Advanced

A grayscale wall with numbers one, two, three
Reading Time: 4 mins

Ever wonder how to add counter/numbered classes to your posts? Is this the fourth post or the seventh? Well, if you have wished upon a star (or even if you didn’t, but it was more like cursing out your computer, that’s fine too), then your wish is about to come true with this tutorial.

In this tutorial’s example, we want our blog posts to have classes like “article-number”, and we can achieve this using the post_class(); function and a counter that we’ll set as a global variable.

It’s not as hard as you think. Also, keep in mind that this is a technique that can be applied to other scenarios too, and it’s not limited to just adding classes to our blog posts. Well, let’s get started, shall we?

Before we begin:

  1. Some familiarity with loops and general PHP will help.
  2. Might want to¬†review what variables are. I also go over variables with better analogies in an old article of mine on the Pixafy Blog: Understanding WordPress’ $args Variable
  3. Make sure you have a theme that you can edit files in – for my example, I’m using TwentyThirteen. The files I’ll be working in are: functions.php, index.php, and content.php.

What we’re going to achieve:

global-results

Continue reading How to Add Counter Classes with a Global Variable