newo.me

Category: WordPress

  • Custom Query Variables in WordPress

    WordPress has a built-in system for passing data through URLs using query variables. Here’s how to register custom query vars and use them in your templates — the WordPress way.

    Register Custom Query Variables

    WordPress maintains a whitelist of public query variables. To add your own, hook into the query_vars filter in your theme’s functions.php or a plugin:

    add_filter( 'query_vars', function( $vars ) {
    $vars[] = 'color';
    $vars[] = 'size';
    return $vars;
} );

    Your custom variables are now recognized by WP_Query and won’t be stripped from URLs.

    Build URLs with Query Args

    Use add_query_arg() to build clean URLs with your custom variables:

    $url = add_query_arg(
    [
        'color' => 'blue',
        'size'  => 'large',
    ],
    home_url( '/shop/' )
);

// Result: https://example.com/shop/?color=blue&size=large

    In a template:

    <a href="<?php echo esc_url( add_query_arg( [ 'color' => 'blue' ], '/shop/' ) ); ?>">
    Blue items
</a>

    Retrieve the Values

    On the destination page, use get_query_var() to read the values:

    $color = get_query_var( 'color' );
$size  = get_query_var( 'size' );

if ( $color ) {
    echo 'Filtering by color: ' . esc_html( $color );
}

    Things to Keep in Mind

    • Always sanitize. Values from get_query_var() come from user input — escape and validate before using them.
    • Avoid reserved names. Don’t use names that conflict with WordPress built-in query vars like name, p, page, s, etc. Check the WP_Query docs for the full list.
    • Works with pretty permalinks. You can combine this with add_rewrite_rule() to turn ?color=blue into /shop/color/blue/ — but that’s a topic for another post.

  • Add Custom CSS Classes to WordPress Nav Menu Items

    WordPress generates CSS classes on each nav menu item automatically, but sometimes you need to add your own — for custom styling, JavaScript hooks, or conditional logic. The nav_menu_css_class filter makes this straightforward.

    The Filter

    Add this to your functions.php. The filter receives the array of CSS classes and the menu item object for each item in the menu:

    add_filter( 'nav_menu_css_class', function( $classes, $item ) {
    // Add a class to a specific menu item by title.
    if ( 'Contact' === $item->title ) {
        $classes[] = 'menu-cta';
    }

    return $classes;
}, 10, 2 );

    This adds the menu-cta class to the Contact menu item, which you can then style differently — as a button, a highlighted link, or whatever the design calls for.

    Other Matching Options

    You’re not limited to matching by title. The $item object gives you access to:

    // Match by menu item ID.
if ( $item->ID === 42 ) { ... }

// Match by URL.
if ( str_contains( $item->url, '/portfolio/' ) ) { ... }

// Match by object type (page, post, category, custom).
if ( 'page' === $item->object ) { ... }

// Add a class to all top-level items.
if ( 0 === (int) $item->menu_item_parent ) {
    $classes[] = 'top-level';
}

    Quick Note

    WordPress already adds useful classes to menu items: current-menu-item, current-menu-ancestor, menu-item-type-post_type, etc. Check the generated HTML before adding custom classes — what you need might already be there.