Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add the Page Slug to Body Class in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Are you looking for a way to add a WordPress page slug in the body class of your theme?

Adding a page slug in the WordPress theme lets you do all the customizations you want without any complications. You can easily change the colors, fonts, and other certain items based on specific pages.

In this article, we will show you how to add a page slug in the body class of your WordPress themes.

How to Add the Page Slug to Body Class in WordPress

Why Add a Page Slug in Body Class in Your Theme?

If you’re looking to customize specific pages on your site and want to correctly identify the page, then adding a page slug in the body class of your theme is really useful.

By default, your WordPress site will only show the post ID classes, which can be tricky when it comes to recognizing the correct page. A page slug shows the URL of your blog post, making it easier to customize the page.

Besides that, you can perform different customizations to your pages using a page slug body class. For example, you can change the font and colors of a particular post or highlight a call to action button on a specific landing page.

That being said, let’s look at how you can add the page slug in the body class of your WordPress theme.

Adding a Page Slug in Your WordPress Theme

To help you add the URL of your page in the body class of your WordPress theme, you can enter the following code in your theme’s functions.php file.

function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

You can access your theme’s functions.php files by going to the WordPress Theme Editor (Code Editor). However, directly editing the theme files is very risky.

That is because any mistake while adding the code can break your site and block you from logging into your WordPress dashboard.

A much simpler way to add the code to the body class of your theme is by using a WordPress plugin like WPCode.

WPCode

With WPCode, you can easily add code to your site within minutes and without any errors. Plus, it also ensures that your code doesn’t get removed if you update or change your theme in the future.

It also comes with a library of expert-made code snippets that you can install in 1-click. So, you don’t need any coding skills to make advanced WordPress customizations.

First, you’ll need to install and activate the free WPCode plugin on your site. For step by step instructions, you can refer to our guide on how to install a WordPress plugin.

Once the plugin is activated, a new menu item called ‘Code Snippets’ will be added to your WordPress admin bar. Clicking on it will bring you to the page where you will manage all of your code snippets.

To add your first custom code snippet, click on the ‘Add New’ button.

Go to Code Snippets and click on Add New

This will bring up the ‘Add Snippet’ page, where you can choose a code snippet from the pre-made library or add your custom code.

To add your custom code, navigate to the ‘Add Your Custom Code (New Snippet)’ option and click on the ‘Use snippet’ button.

Add custom code in WPCode with new snippet

Now, give a title for your code snippet and enter the code into the ‘Code Preview’ box. You also need to select ‘PHP Snippet’ as the code type from the dropdown list on the right.

Enter code snippet and choose code type

Next, scroll down to the ‘Insertion’ section. Here, you can choose the ‘Auto Insert’ method to automatically insert and execute the code in a specific WordPress location like the admin, frontend, and more. If you’re unsure, keep the default ‘Run Everywhere’ option.

Edit insertion method for code

Or, you can choose the ‘Shortcode’ method. With this method, the snippet is not automatically inserted. You’ll get a shortcode that you can manually insert anywhere on your site.

When you’re ready, toggle the switch from ‘Inactive’ to ‘Active’ and click the ‘Save Snippet’ button in the top-right corner.

Save and activate code snippet WPCode

For more details, you can refer to our guide on how to add custom code in WordPress.

You will now start seeing a new body class being outputted like this: page-{slug}. Use that class to override your default styles and customize elements for specific pages.

For example, let’s say you wanted to style your sidebar widgets, but only on a page that has the slug “education.” In that case, you could add CSS like this:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

For more details, you can see our guide on how to add custom CSS to WordPress.

We hope this article helped you learn how to add a page slug in the body class of your WordPress theme. You may also want to look at our guide on WordPress body class and how to choose the best design software.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

27 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Alds says

    How about using global $wp_query instead of $post? I’ve noticed that $post gets overwritten if you’ve run a wp_query before the functions.php gets executed.

  3. Daneil says

    Thank you for putting it out there, simple bit of code, but useful and allows you to write more human friendly css files, rather than classes based on ID. Cheers

  4. Austin says

    Thank you so much for this! I found out the hard way that page-id can change given different circumstances. This allows me to style individual pages without as much worry. :)

  5. Kevin says

    Many thanks for this. Had some problems initially due to the position of code in my stylesheet CSS but once moved to the bottom worked great. Just wish this was standard for WP as others have said and that i had known about this a long time ago

  6. Tom McGinnis says

    This code works quite well. I was finding, however, that search results would end up with the body class including the slug from the first item listed. Sometimes the first item would have styles that would override the styles for the search results page. Strange, huh!

    I figured out that if you put !is_search() inside the if statement, then this problem is eliminated. If anybody else runs into this problem, the fix is simple.

  7. Randy Caruso says

    Thanks for this – been stuck hacking myself to bits with the page-id and suffering the consequences.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.