url rewriting - Simple page with GET variable as a pretty link

I've been trying to solve this for two days now, and I still don't understand what I'm doing wrong.

So, the problem is very simple. I have a simple page with the URL mywebsitedomain/shop-the-look/. I'm using a custom page for it, which gets the variable named "outfit" value and then extracts the specific data from the backend.

Here is an example of how it looks:

mywebsitedomain/shop-the-look/?outfit=blue-suit-1 mywebsitedomain/shop-the-look/?outfit=white-tshirt-2 etc.

I get this value and then show the appropriate outfit; there are no problems here. What I want to achieve is to have the URL like this:

mywebsitedomain/shop-the-look/blue-suit-1/

I dug through some posts on StackExchange and found out that I need to do something like this:

function add_custom_rewrite_rules() {
    add_rewrite_rule('^shop-the-look/([^/]+)/?$', 'index.php?page_id=22394&outfit=$matches[1]', 'top');
    add_rewrite_tag('%outfit%', '([^&]+)');
}
add_action('init','add_custom_rewrite_rules');

But it does not seem to work. Now, when I enter

mywebsitedomain/shop-the-look/blue-suit-1/

it just redirects me to

mywebsitedomain/shop-the-look/

I don't know what I'm doing wrong here. I'm not a professional developer, so I might have missed something, so I would really appreciate someone's help.

I've been trying to solve this for two days now, and I still don't understand what I'm doing wrong.

So, the problem is very simple. I have a simple page with the URL mywebsitedomain/shop-the-look/. I'm using a custom page for it, which gets the variable named "outfit" value and then extracts the specific data from the backend.

Here is an example of how it looks:

mywebsitedomain/shop-the-look/?outfit=blue-suit-1 mywebsitedomain/shop-the-look/?outfit=white-tshirt-2 etc.

I get this value and then show the appropriate outfit; there are no problems here. What I want to achieve is to have the URL like this:

mywebsitedomain/shop-the-look/blue-suit-1/

I dug through some posts on StackExchange and found out that I need to do something like this:

function add_custom_rewrite_rules() {
    add_rewrite_rule('^shop-the-look/([^/]+)/?$', 'index.php?page_id=22394&outfit=$matches[1]', 'top');
    add_rewrite_tag('%outfit%', '([^&]+)');
}
add_action('init','add_custom_rewrite_rules');

But it does not seem to work. Now, when I enter

mywebsitedomain/shop-the-look/blue-suit-1/

it just redirects me to

mywebsitedomain/shop-the-look/

I don't know what I'm doing wrong here. I'm not a professional developer, so I might have missed something, so I would really appreciate someone's help.

• url-rewriting

Share Improve this question edited May 15 at 10:41 bueltge 17.1k77 gold badges6262 silver badges9797 bronze badges asked May 10 at 14:05 The Noble DandyThe Noble Dandy 1 2

• Not sure how to fix it but the redirect will be WP redirecting to the canonical URL for that page to avoid the SEO duplication penalty. A word of advice though, I would change the page_id=22384 to something like ?pagename=shop-the-look otherwise the entire thing breaks if someone accidentally deletes the shop-the-look page, even if it gets recreated due to the ID change. I also question the need for add_rewrite_tag, and I'd be wary that this won't set a $_GET['outfit'] value either, you'll need to use get_query_var and update the query vars to include outfit as a valid parameter – Tom J Nowell ♦ Commented May 10 at 14:28
• I changed to pagename, thanks for the advice. But still scratching my head how to solve that redirect. – The Noble Dandy Commented May 13 at 6:54

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

You're very close! This is a common WordPress hurdle, and the issue is usually due to one or more of the following:

• Not flushing rewrite rules after adding new ones
• Incorrect handling of the custom query variable
• Potential conflicts with page slugs or permalinks

1. Add the Rewrite Rule and Tag

Your code is almost correct, but let's make sure it's robust:

function add_custom_rewrite_rules() {
    add_rewrite_rule(
        '^shop-the-look/([^/]+)/?$',
        'index.php?pagename=shop-the-look&outfit=$matches[1]',
        'top'
    );
    add_rewrite_tag('%outfit%', '([^&]+)');
}
add_action('init', 'add_custom_rewrite_rules');
  

• If your page is created via the WordPress admin and its slug is shop-the-look, use pagename=shop-the-look.
• If you must use the page ID, ensure it's correct and published.

2. Flush Rewrite Rules

Whenever you add or change rewrite rules, you must flush them. The easiest way is to visit Settings → Permalinks in your WordPress dashboard and click "Save Changes" (no need to actually change anything).
Alternatively, you can add flush_rewrite_rules(); temporarily in your code, but remove it after use to avoid performance issues.

3. Access the 'outfit' Variable in Your Template

In your shop-the-look page template, retrieve the variable like this:

$outfit = get_query_var('outfit');
if ($outfit) {
    // Fetch and display the outfit data
    echo 'Outfit: ' . esc_html($outfit);
} else {
    // Show default or error message
    echo 'No outfit selected.';
}
  

4. Troubleshooting Checklist

• Make sure your shop-the-look page exists and is published.
• After adding the rewrite rule, flush permalinks.
• Ensure there are no conflicting plugins or themes with their own rewrite rules for this path.
• If using a caching plugin, clear your cache.

5. Final Working Example

Here's a full snippet for your functions.php:

function add_custom_rewrite_rules() {
    add_rewrite_rule(
        '^shop-the-look/([^/]+)/?$',
        'index.php?pagename=shop-the-look&outfit=$matches[1]',
        'top'
    );
    add_rewrite_tag('%outfit%', '([^&]+)');
}
add_action('init', 'add_custom_rewrite_rules');
  

Flush permalinks after saving this!

6. Recap

• Add the code above to your theme’s functions.php.
• Visit Settings → Permalinks and click Save Changes.
• Use get_query_var('outfit') in your template.

If it still doesn't work:

• Double-check your page slug and that it matches shop-the-look.
• Try using index.php?page_id=22394&outfit=$matches[1] if you prefer using the page ID.
• If you’re using a child theme, ensure the code is in the active theme’s functions.php.

Let me know if you need more help or if you get any errors!