It’s been half a year since I joined the 10up team and I’ve been learning so much about the CMS I love so far. Working with a company where I can continue my WordPress adventures full time has been a rewarding experience. I’ve met new people, dived into open source, and made new discoveries in WordPress. Since it’s long past due for a new post here on RachieVee, I’d love to share 10 WordPress things I’ve learned working with 10up – a mixture of newly discovered tools, techniques and functions!
Spoiler alert, I’ve written more than ten and there are front-end related things too. Confession, I just wanted to use the whole 10 things with 10up title.
I’m still here on my ongoing mission of coding accessibly. There is one HTML element that has become a huge stepping stone for me once I learned how to properly use it. That stepping stone was the button element. What? The button element? Why the heck do we need that? Well, if you’ve ever seen code like below, or have written code like this ( points to herself ), then this post is for you:
<!-- Have you written this for modal integration? -->
<a href="#">I trigger a modal</a>
<!-- Or how about for carousel navigation? -->
<a href="#">Previous Slide</a>
<a href="#">Next Slide</a>
<!-- Or how about a show/reveal effect -->
<div class="container">
<img src="images/some-image.jpg" alt=""/>
<a href="#">Click for more!</a>
<div class="more-content">
<p>Some more info is here!</p>
</div>
</div>
<!-- There's something wrong with the above methods. -->
<!-- We're going to go over what they are. :-) -->
To be honest, I’d been writing code like the above for years until I realized I was missing opportunities. I know other developers that also write code like the above. Why is this the case? Well, there have been some theories of ignorance and fear being the source. In my case, “semantics” was just one of those words that I didn’t come across in the beginning. I just wanted to build things that I could see. It was like trying to build a cabinet with a box full of tools without truly understanding the tools. Sure I can hammer in all the nails and call it a day. Or I can take the time to see what’s in the toolbox. Maybe I’ll find that a screwdriver might be a better tool for some areas of the end product then a hammer. In the end, using the right tools for the job will result in a higher quality product… or cabinet?
PS: Rachel is no good with analogies…
And semantics – what does that even mean? Take it from a gal who was thrown head first into web development from a fine arts degree and had to google words like “repository” during her first week. There’s so much lingo out there! Even now, as a more experienced dev, it makes my head spin. So let’s go over it all, shall we? How to use the button element and when it’s the right tool for the job.
WordCamp NYC came to town this past weekend on Halloween! There was candy, costumes, cupcakes, and of course – awesome speakers! It was a great way to gather a new list of influential people to follow on Twitter and a new reason to hoard all the free swag. If there’s anything I learned from last year’s WCNYC, it’s that WordCamp is only getting better. I’ve learned a lot and a lot has changed since the last time I attended a WordCamp. I’d like to share that experience along with a late Halloween treat for those who may have missed the event.
Obvious, not so obvious hint – speaker slides list! Grab your leftover candy and let’s get to it.
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:
Today's fail: Google how to do something in #WordPress. End up at the Stack Exchange question that you answered yourself. *face palm*
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:
This assumes you’re familiar with PHP loops, objects and variables.
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.
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.
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, it’s an action hook.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.
