Hooks vs Filters: The Dynamic Duo of WordPress Development

Hey there, WordPress enthusiasts! Ready to level up your development skills? Today we’re diving into one of the most important concepts you’ll need to master: hooks and filters. These are the secret sauce that makes WordPress infinitely customizable without touching the core code.

What Are Hooks Anyway?

Think of hooks as little anchors scattered throughout WordPress code. They’re specific spots where WordPress says, “Hey, if anyone wants to add something here, now’s your chance!”

Hooks come in two main flavors:

Action Hooks

Action hooks are like events in WordPress. When WordPress reaches a specific point in its execution, it checks if anyone has “hooked into” that spot to run their custom code.

It’s like WordPress saying: “I’m about to publish a post! Anyone want to do something special when that happens?”

Filter Hooks

Filter hooks are different – they actually let you modify data as it’s being processed. WordPress passes some information through the filter, and you can intercept it, change it, and send it back on its way.

It’s like WordPress saying: “Here’s the post title I’m about to display. Want to tweak it before everyone sees it?”

Real-World Examples

Let’s see these in action with some beginner-friendly code examples:

Action Hook Example

// This code runs whenever WordPress displays the footer
function my_custom_footer_text() {
    echo '<p>This site was crafted with ❤️ by a WordPress learner</p>';
}
add_action('wp_footer', 'my_custom_footer_text');

Filter Hook Example

// This code modifies post titles before they display
function make_titles_exciting($title) {
    return $title . ' ✨';
}
add_filter('the_title', 'make_titles_exciting');

When to Use Actions vs Filters

This is the million-dollar question! Here’s a simple guide:

  • Use Actions when you want to add something or do something at a specific point
    • Example: Send an email when a post is published
    • Example: Add Google Analytics code to the footer
  • Use Filters when you want to change information before WordPress uses it
    • Example: Modify how excerpts are formatted
    • Example: Change what happens during a search

The Anatomy of Hooks and Filters

Let’s break down how they work:

For Actions:

// The basic structure
add_action('hook_name', 'your_function_name', priority, accepted_args);

// A real example
function send_welcome_email($user_id) {
    // Code to send email here
}
add_action('user_register', 'send_welcome_email', 10, 1);

For Filters:

// The basic structure
add_filter('hook_name', 'your_function_name', priority, accepted_args);

// A real example
function censor_bad_words($content) {
    $content = str_replace('bad word', '****', $content);
    return $content;
}
add_filter('the_content', 'censor_bad_words', 10, 1);

Finding Hooks in WordPress

“But where are all these magical hooks?” I hear you ask. Great question!

  1. Browse the WordPress Code Reference
  2. Use a plugin like “Simply Show Hooks” to see them on your site
  3. Search the WordPress codebase for instances of do_action() and apply_filters()

Creating Your Own Hooks

Once you get comfortable using hooks, you can create your own!

// Creating your own action hook
function my_theme_before_header() {
    do_action('my_theme_before_header');
}

// Creating your own filter hook
function my_theme_modify_tagline($tagline) {
    return apply_filters('my_theme_tagline', $tagline);
}

Why Hooks and Filters Matter

Hooks and filters are what make WordPress a true developer’s playground. They let you:

  • Modify WordPress behavior without editing core files
  • Create plugins that others can use
  • Make your themes infinitely customizable
  • Ensure your customizations survive WordPress updates

Your Homework

Time to try this yourself! Pick one of these beginner tasks:

  1. Use an action hook to add a custom message at the bottom of each post
  2. Use a filter hook to add your name to the admin footer text
  3. Find three hooks in the WordPress core that you think would be useful

Wrapping Up

Hooks and filters might seem like developer magic at first, but they’re really just WordPress’s way of making customization accessible. Master these concepts, and you’ll unlock endless possibilities for your WordPress development journey!

Remember: every WordPress developer started exactly where you are now. Keep practicing, stay curious, and before long, you’ll be hooking and filtering with the best of them!

Got questions about hooks and filters? Drop them in the comments! Next time, we’ll explore how to create custom post types to really take your WordPress skills to the next level.

SideQuest Saturday: Adding Bionic Reading to My WordPress Site

You might have spotted something new on my blog recently—a little blue button at the top of each post that says “Turn on Bionic Text.” This was a fun weekend coding project I took on, partly because running an agency means I don’t get my hands dirty with actual code nearly as much as I’d like to anymore. Sometimes you just need to build something for the pure joy of it!

You might have spotted something new on my blog recently—a little blue button at the top of each post that says “Turn on Bionic Text.” This was a fun weekend coding project I took on, partly because running an agency means I don’t get my hands dirty with actual code nearly as much as I’d like to anymore. Sometimes you just need to build something for the pure joy of it!

Continue reading “SideQuest Saturday: Adding Bionic Reading to My WordPress Site”

a11y: The Bare Minimum

Inaccessibility is always a bug. How can you go about changing your mindset about minimum accessibility standards?

While working on a Divi site, I found myself browsing the Elegant Themes community support forum and stumbled upon this awesome comment from a user known only as “Maco.”

There is no situation in which inaccessibility is a desireable characteristic. Themes should always be accessible. It makes no sense to say “well we didn’t SAY it’s accessible.” That’s like buying a house and being told “we didn’t SAY there wasn’t a cougar in the bedroom closet waiting to maul you.” Inaccessible websites have resulted in lawsuit payouts for well over a decade; therefore, inaccessibility is always a bug.

Continue reading “a11y: The Bare Minimum”

How to create a custom shortcode in WordPress

Have you ever wanted a snippet of code to fire in a specific spot on a page or post, but don’t want to create a whole new template file to make it happen? Then you need a custom shortcode!

Have you ever wanted a snippet of code to fire in a specific spot on a page or post, but don’t want to create a whole new template file to make it happen? Then you need a custom shortcode!

A shortcode is a feature within WordPress that allows you to run a function on a page or post, but only when a specific line of text is used in the editor. You’ve likely used shortcodes before without thinking much about it. Popular plugins like GravityForms use shortcodes to allow you to insert a form anywhere on your site. For example, just type [form] and (if that was the correct shortcode for that plugin) a form would appear when the page is published.

So, let’s make one! The basic skeleton of a shortcode looks like this…

Continue reading “How to create a custom shortcode in WordPress”

Using image descriptions to make social media more accessible

Boost engagement! Add an image description policy into your social media workflow.

This blog post has been republished at to https://infoscigeek.com/blog/using-image-descriptions-to-make-social-media-more-accessible/


Screenshot of using Siri to activate the VoiceOver setting on an iPhoneAfter watching a YouTube video from motivational speaker and vlogger Molly Burke about how she uses her iPhone (she is blind), I’ve been browsing the web with VoiceOver activated on my iPhone. It is a great way to learn how best practices actually work on other company’s websites and it’s been a useful tool for me to catch accessibility errors in my clients’ websites before they have a chance to be a barrier to an actual user. (My personal blog, which you are currently reading, is an ongoing work in progress when it comes to accessibility. If you encounter a barrier, please feel free to reach out to me on my contact page and let me know! Or just leave a comment if that is easier.)

I’ve also been using social media in my personal life with my accessibility settings activated. I put my phone under my pillow, put on my headphones, and lay down with my eyes closed while using various social media apps. My primary reason for this is to reduce the strain on my eyes while browsing social media at night (after a long day of staring at my screen all day for work) and secondly, to help me learn more about how these tools work with apps.

This is how I accidentally learned just how boring my social media feed can be if you can’t see anything.

Social media is heavily reliant on visual elements. Memes, GIFs, flyers, photos, and videos make up a huge percentage of the content on Facebook, for example. Twitter can be visual-heavy as well. I found myself often getting bored with those apps and wandering off to find something else to do on my phone like TED Talks on YouTube or listening to podcasts. Do you rely on social media to promote your business and brand to potential customers? Do want to keep your social media fans and followers engaged? Consider implementing a standard image description policy into your social media workflow.

Twitter’s Accessibility Settings

You might already have this setting activated, but if not, it’s quick and available for all Twitter accounts. Go to Settings and Privacy > Accessibility > Image Descriptions.

Screenshot of Twitter's accessibility settings screen with options for activating image descriptions and video autoplay.

 

Check the option box to activate your image descriptions, click “save changes,” and you’re all set! Now whenever you go to upload an image into a Tweet, you’ll see a new option:

Screenshot from Twitter showing the process of uploading an image into a tweet with accessibility settings activated.

Click the section just below your image that reads “Add description” and you’ll be greeted with a shiny new interface where you can write out a full description of whatever fun or important information you are conveying with your image upload.

Screenshot showing the window where users can add a description to their images while uploading them to a tweet.

It’s a well-built and well-supported feature that we all should be using while we are uploading images to our Tweets. Now when users browse your Twitter feed, they will hear a narration of your regular Tweet and then at the end, they will hear “Image: ” followed by whatever you cared enough to include in your description. If you leave out a description, they will simply hear that an image exists and what date it was uploaded. Boring.

Image Descriptions on Facebook

Facebook’s native tool for adding alt tags or descriptions to images isn’t very user-friendly (yet), so the standard practice is to add your own image description declaration to your posts just below your regular social media verbiage. You would use the words “Image Description” followed by a colon, “:” and then an extremely detailed description of what the image is supposed to convey. Some brands like putting this information in between brackets [Image Description:]. Whichever method you decide on, just try to stay consistent.

If you don’t include an image, Facebook will sometimes attempt to create one using the same artificial intelligence they use to find your face in your friend’s photo uploads. You can read more about that slightly creepy but super useful project from Facebook in this article over at the Verge. You should not rely on Facebook to engage and inform your users for you. If you want to control the message and protect your brand, write your own image descriptions manually!

Adding a description is especially important when the image is an announcement for a program, event, or job notice! Otherwise, that essential information will be completely invisible to users with screen readers.

But if you do want to use Facebook’s tool, you can access by going to one of your existing photos, clicking “options” and then selecting “Edit Alt Text” in the window that appears.

Screenshot of the photo options screen on Facebook

From there a window will pop-up where you will enter your actual image alt text.

Screenshot of Facebook's text editor window for adding alt text to your images.

The message in this window will override whatever automatic image description Facebook’s AI may have tried to create. But keep in mind that this text will only be accessible to users who have their screen readers activated. That may seem like an odd comment to make considering this entire blog post has been about screen readers, but using image descriptions in your Facebook captions can also improve the user experience for people who have any one of a wide range of disabilities that makes it hard for them to read an image that has a dense wall of text inside it. Like, for example, an event flyer.

What should I include in my descriptions?

So now that we know how to include image descriptions, what should we actually put inside of them? Here is an excellent example from the American Council of the Blind’s Facebook page where they were promoting a holiday event.

Screenshot showing an example of typing out image descriptions manually on a Facebook post. Example is from the Facebook page for the American Council of the Blind.

The screenshot doesn’t capture the full amount of descriptive text, but you can visit the post here on Facebook to see how a manual image description works in action. But you can see their description doesn’t stop at just information. They also describe the artistic elements of the photo including the color of the background and the placement of the pastel colored eggs. The idea here is to paint a picture while also disseminating important information. If your sighted-users find your images enjoyable, why not try to create that same experience for your blind users?

More Information!

This blog post was just a quick summary of an important topic. If you are interested in digging deeper into the “what why and how” of writing image descriptions, here’s a list of helpful links:

Restore default WordPress search

Need to know how do you restore the default WordPress search? Let’s take a peek under the hood and figure it out together.

A pile of scrabble letters that spell out the word "SEARCH."


March 2018 is finally here and Google Site Search (GSS) is actually going away for good. While owners of larger websites have already happily settled into alternative premium services, some of us smaller guys have decided to retreat back to the comfort and predictability of WordPress’s built-in search engine. But, how do you restore the default WordPress search? Let’s take a peek under the hood and figure it out together.

Continue reading “Restore default WordPress search”

Hey Freelancers! Stop Being a Bully

It usually starts as a Facebook post disguised as a moment of reflection but that is actually just a routine humble-brag. Some common introductions used include, “I just think it’s really funny how…” or “I’m so glad that I’m not…” 

Woman wearing boxing gloves and punch a man in the faceI’ve noticed an annoying habit amongst my fellow freelancers and entrepreneurs: bullying. It usually starts as a Facebook post disguised as a moment of reflection but that is actually just a routine humble-brag. Some common introductions used include, “I just think it’s really funny how…” or “I’m so glad that I’m not…”

Some people will take the bait and reply to the post, opening themselves up to an absolutely bizarre attack in which they are both accused of being lazy while also being aggressively invited to “be their own boss.”

There are a couple things that might be happening here:

Continue reading “Hey Freelancers! Stop Being a Bully”

Scheduling projects with developers based in India

The major hiccup I’ve encountered when working with developers who are based in India is the same one I’ve run into when working with anyone outside of the USA: Holidays.

This post has been republished at: https://infoscigeek.com/blog/scheduling-projects-with-developers-based-in-india/


The India flag waving in the breeze over a sunlit sky
Ready for a not-so-mindblowing revelation? Here it comes. India a really big country. Like, really huge. Lots of people (well over a billion), lots of languages (over 20 official languages and well over 100 native languages), and lots of talented developers. If you are building a website or a mobile app, it is highly likely that all or at least a piece of your project will involve one or more developers based in India.

Lucky for those of us who are monolingual Americans and want to team up with developers in India, English is one of India’s official languages and it is widely used amongst India’s educated population. So language barriers are pretty minimal so long as you both agree to avoid slang. Even if your mutual accents prove to be a hurdle, you can always default to written communication.

However, the major hiccup I’ve encountered when working with developers based in India is the same one I’ve run into when working with anyone outside of the USA: Holidays.

Holidays are one of those glorious parts of human nature that are as delightful as they are confusing. Who can keep track of them all? There are “Hallmark holidays” that exist just to sell more chocolate and “social media holidays” that exist just to generates likes and shares. And then there are the “real” holidays that leave office buildings empty and bank doors’ shuttered. Those are the days that give you a much-needed break from your daily grind so you can relax at home or travel to see family. And the best part is that when those “real” holidays roll around, there is no need to negotiate the time off with your clients. Even the most demanding of clients doesn’t expect a freelancer to keep hammering away on their website project on the 4th of July or Christmas day…. that is, if your clients celebrate the same holidays that you do.

I’ve lived in the USA for my entire life. I’ve never even visited India. And I hadn’t worked on a major project with an Indian development team until 2012. If you had asked me back then which national holidays are celebrated in India, I would have bit my lip, said “umm,” and then said, “Oh, Holi!” If you had pressed me further to ask what day, month, or even season Holi occurs, I would have ducked my head down in a shameful display of utter cluelessness.
A globe of the planet earth that is turned so with Asia towards the front.

My ignorance came to haunt me when a project that was due on December 20th began to suffer from scope creep and looked like it was going to seep into the new year. I tried to relax during Christmas break and then promptly sent out some support requests to the plugin developer’s team once the New Year had passed. My midwestern work ethic said that everyone should be 100% back to work on the first business day of the New Year. What I didn’t know, is that while January is very much business as usual in the U.S.A., that month is FULL of lots of holidays in various states and territories of India. So while I was sitting at home in Miami furious at my unanswered emails, my colleagues in India were blissfully unaware while they went about enjoying that much needed time away with family and friends.

How could this have been avoided?

I’ve found that the source of most problems in the workplace boils down to a breakdown in communication. Things that seem obvious to one party simply may not be the case for everyone else on the team. So now during the planning stage of any project, I ask EVERYONE on the team to give me their crucial “no work” dates.

  • Your birthday
  • Your kid’s first day of school
  • A standard bank holiday in your country
  • A religious holiday in your culture
  • The dates of that big trip you’ve been planning for months with your college buddies

Tell me everything so that I can properly manage our client’s expectations. Yes, we can always make an observation about the national origin and cultural background of our team members’ and then carefully Google about to figure out which days they might need off. But, we can always just ASK. Asking is so much easier than assuming.

Have you ever committed a holiday-related or otherwise cultural faux-pas? How did you resolve it?

 

How to Fix it: “Briefly unavailable for scheduled maintenance. Check back in a minute.”

WordPress Error: “Briefly unavailable for scheduled maintenance. Check back in a minute.” Were you busy updating something on your WordPress or BuddyPress site and suddenly this message appeared on a big blank white screen? Don’t fear. Don’t panic. We can fix this in less than 5 minutes.

WordPress Error: "Briefly unavailable for scheduled maintenance. Check back in a minute."

Were you busy updating something on your WordPress or BuddyPress site and suddenly this message appeared on a big white screen? Don’t fear. Don’t panic. We can fix this in less than 5 minutes. Continue reading “How to Fix it: “Briefly unavailable for scheduled maintenance. Check back in a minute.””

Domain Name vs Hosting: Why Do I Need Both?

This post has been republished at: https://infoscigeek.com/blog/domain-name-vs-hosting-why-do-i-need-both/


I just had a client ask me a very common and perfectly valid question:

Why do I need to pay for a domain name AND for hosting?

It’s an easy question to answer but only if you can manage to properly explain the difference between the two. On the most basic level, this is how we define the two:

Website Hosting = The place where you actually store your stuff.

Domain Name = The easy directions to find the place where you store your stuff.

Technically you don’t NEED to buy a domain name. Your website hosting company does have an address where people can find your “stuff” on their server. It usually looks something like this:
http://123.456.789.123/~mysite/

But that is pretty ugly and a nightmare for branding. So instead you can purchase a Domain Name to easily and elegantly direct people to your website. A domain name looks like this:
http://www.MyBusinessName.com 

Much better, right?

The cool part about domain names is that even if you decide to move your stuff to a new place (change hosting companies, move from Wix to GoDaddy, move from SquareSpace to WordPress, etc), your customers and fans can still easily find you. All you have to do is point your current domain name to your new hosting location.

Think of how it works when you drop your iPhone in a pool and have to replace it. You get a new phone (hosting) but your keep your same phone number (domain name). You just tell your phone company to point your current phone number to your new phone.

How would you explain Domain Name vs Hosting to a non-tech audience? Drop your analogies in the comments box below. I love analogies. Give me your best.


Extra:

The next logical question is, who should I use for my domain name and my hosting? There are a thousand services and a million opinions on this subject but I’ll keep it simple and give you my professional recommendations.

Domain Name
http://www.directnic.com
(I am not an affiliate)

Website Hosting
https://www.siteground.com/go/louise
(This is an affiliate link)

Both are services that I personally and professionally use. I love their prices, support, and overall quality of service. I prefer using separate services for my domain name and website hosting just because i feel safer not having all my eggs in one basket. I’d even go as far as to suggest having your email under a third umbrella to keep things especially neat and tidy.

Check out my other affiliate links and service provider recommendations here: https://louisetreadwell.com/my-affiliate-links/

BuddyPress: How to Redirect Upon Logout

Wouldn’t it be nice if your users could just redirect upon logout to your homepage? They can. Here’s how.

Note from 2022: Take a peek in the comment section before trying this code! 

So, you’ve setup a custom menu in BuddyPress that allows users to logout at the click of a button. But once they’ve logged out, chaos ensues. I know. I’ve been there. Wouldn’t it be nice if your users could just redirect upon logout to your homepage?

They can. Here’s how.

  • Step 1: Back-up your website.
  • Step 2: Make sure you are using a child theme.

(You are using a child theme, right? If not, stop everything and go here to learn how to set one up.)

  • Step 3: Go to your WordPress Dashboard and navigate to:
    • Appearance > Themes > Editor
  • Step 4: Select the file called “functions.php” in your child theme.
  • Step 5: Copy and paste the following code under any other customizations you’ve entered:

//* Redirect WordPress to Homepage Upon Logout
add_action('wp_logout',create_function('','wp_redirect(home_url());exit();'));

  • Step 5: Save your changes and then take it for a test drive.

Viola! Now your users can happily redirect upon logout! This tip works for BuddyPress as well as WordPress.

Did it work? Trying to do something similar but not sure where to start? Let me know in the comments below.


Extra:

Now perhaps you want this feature to stick around even when you change themes. In that case, take this same code snippet and turn it into a “Must Use Plugin.” Never made one before? I’ll cover that in an upcoming blog post. 

Subscribe here and I’ll let you know when I post new tutorials and code snippets:

Opt-In

Enjoy WordPress tinkering? Subscribe for free tips, tricks, and plugin discounts.