WordPress the_title Filter Hook Generically and Semi-uniquely

WordPress the_title Filter Hook

I ran into a situation where I needed to apply a callback function to the_title filter hook in WordPress. I thought this would be a simple task. After creating my callback function and assigning it to the the_title filter hook, I thought it did exactly what I needed it to do. Except, then I noticed it was also applying the same filter to navigation items as well. Thus, breaking the layout.

How can I target the the_title filter hook while ignoring the filter effect for navigation items?

I was working on a section in a WordPress theme which I wanted to add buttons to the page title within the heading one tag.

It looked similar to this:

I was then “hooking in” like this:

However, the above targets literally everything which calls the_title filter hook, and this includes navigation items.

I changed the filter hook definition like this:

Pretty much every call to the_title filter passes parameter 1 as the $post->post_title and parameter 2 as the $post->ID. Search the WordPress core code for apply_filters( 'the_title'* and you’ll see for yourself.

So I decided to add a third parameter for situations where I want to target specific items which call the_title filter. This way, I can still receive the benefit of all callbacks which apply to the_title filter hook by default, while also having the ability to semi-uniquely target items that use the_title filter hook with the third parameter.

It’s a simple boolean parameter:

Label the variables however you want. This is what worked for me, and it does exactly what I need it to do.

Hope this helps someone in a similar situation.

Credits

Original question asked by @softsdev on stackoverflow: Why the_title() filter is also applied in menu title?
Answer to Question: Why the_title() filter is also applied in menu title? by @Michael Ecklund on stackoverflow.

Related Questions

This article assists in answering all of the following related questions:

  1. [stackoverflow] Apply the_title filter to post titles AND backend auto social-sharing plugin, but not nav menu asked by: @Andre Bulatov
  2. [WordPress Development] Apply the_title filter to post titles AND backend auto social-sharing plugin, but not nav menu asked by: @Andre Bulatov
  3. [WordPress Development] How to append to title via functions.php for auto-posting plugin  asked by: @Andre Bulatov
  4. [WordPress Development] Alter only the page title, not the post titles within asked by: @Mayeenul Islam
  5. [WordPress Development] Changing document title only on a custom page template asked by: @V Neal
  6. [WordPress Development] How to append text to title of Custom Post Type post (without affecting all titles on page)? asked by: @k998
  7. [WordPress Development] filter the_title problem in nav asked by: @greenbandit

Widget Ready WordPress Template Files Displayed Conditionally

Widget Ready WordPress Template Files Displayed Conditionally

As a WordPress developer, part of my concern for my WordPress users is the ability for them to change their WordPress website content as much as possible; Without having to resort to contacting me to do so for them. This makes me think outside of the box on how I can make the WordPress theme have an intended layout, while allowing the flexibility of dynamic content. That’s where widgets come into play!

WordPress Widgets provide a structured way to allow dynamic content in a specific area of your theme without (or at least minimize the chance of) breaking the layout.

I really think widgets are the wave of the future with WordPress theme development. Especially with all the fancy updates to the WordPress theme customizer.

If you’re a WordPress theme developer and you’re theme’s aren’t “widget ready”, you should really change that. You can start by reading the rest of this article. 🙂

The following “How to Conditionally Display Widget Ready WordPress Template Files Tutorial” is very basic and bare-bones, but enough to give you the idea to run with.

Disclaimer: This “how to / tutorial” doesn’t cover WordPress theme options. This assumes you already have your WordPress theme settings managed in some way.

In this “how to / tutorial” I’ll demonstrate how you can give your WordPress users more control over the header section of their WordPress website. Although, don’t stop your creativity there. You could apply this basic idea in many other conventions.

Step 1 – Tell WordPress About the “Widget Areas” Supported by Your WordPress Theme.

The following code should be pasted in your currently active WordPress theme’s functions.php file:

Step 2 – Create the WordPress Template Files for Each Type of Header.

In this example, you’ll want to create 4 new template files in the root directory of your currently active WordPress theme:

  1. header-column-1.php
  2. header-column-2.php
  3. header-column-3.php
  4. header-column-4.php

Step 3 – Make Each New WordPress Header Template File “Widget Ready”.

In this example, I’ll demonstrate a 4 column header template (header-column-4.php):

Step 4 – Edit header.php in Your Currently Active WordPress Theme to Activate Dynamic Header Output.

There you have it! You can now “dynamically” display content in your header template file using widgets. Optionally, you could display static content which could serve as you “default content” or “fallback content” in-case there’s no widgets assigned to that particular widget area.

This small and simple change can really add a lot of flexibility to your WordPress theme.

Credits

Original question asked by @AlonsoF1 on WordPress Stack Exchange: Show/hide widgets in WordPress admin based on current Advanced Custom Fields option.
Answer to Question: Show/hide widgets in WordPress admin based on current Advanced Custom Fields option by @Michael Ecklund on WordPress Stack Exchange.

Related Questions

This article assists in answering all of the following related questions:

  1. [WordPress Development] Show/hide widgets in WordPress admin based on current Advanced Custom Fields option asked by: @AlonsoF1
  2. [WordPress Development] What’s the best way to handle css for multiple header layouts/multiple custom header.php files? asked by: @AlonsoF1
  3. [WordPress Development] How Can I Register Menus and Widgets Conditionally Based on Theme Options/Settings? asked by: @Ryan Dorn
  4. [WordPress Development] Custom Menus, Widgets & Conditional Statements asked by: @Justice Is Cheap

Calculating the padding-top Percentage of Aspect Ratio

Aspect Ratio

This is a mathematical formula which really comes in handy when trying to maintain the proper aspect ratio of let’s say a <div> container as the screen is resized.

Here’s the formula: ( B / ( A / 100 ) ) = C%

Here’s an Example:

  • Aspect Ratio: 16:9
  • Formula: ( 9 / ( 16 / 100 ) = 56.25% )

Here’s an example of pure HTML and CSS code used to maintain the Aspect Ratio of a <div> container.

CSS:

HTML:

Credits: