Follow us on Youtube.  | Follow Website !

Search Suggest

Posts

How to place WordPress Body class using Slug page

how-to-body-class-wordpress-states-how-to-use-slug

How to place WordPress Body class using Slug pageAdding a WordPress Slug page as a class element at CSS provides quite a bit of customization. For example, you can use it to change colors and widget fonts.

What if you want the call to action to stand out when someone visits your landing page? That's when using the WordPress Body class with the Slug page in action.

However, customizing like this requires some knowledge of website development, namely PHP and CSS. Fortunately, these changes are quite simple, really adding a few points to your page.

This article, will introduce how to add Slug page to Body class at WordPress.

What is body class?

This body class gives you the ability to change the theme side style via CSS. Typically, this tag is available in the header.php file next to the topic. This is therefore the first thing to load on every post with the page.

Using the body_group tag in CSS, you can ask the website to change colors, change the font type, and make other visual adjustments.

What is a Slug page?

how-to-set-body-class-wordpress-how-to-use-slug

Slugs are usually easily identifiable, often controlling the way URLs appear on websites. For example, suppose you have a page with a title about us. The URL will look like:

http://www.ggexample.com/about-us/

Please pay attention to the introduction about us. That is usually the actual slug side of the article or page.

However, slug is only used when you use custom permalinks at WordPress. And this is what you want to set up in every way because it helps SEO with visitor engagement.

See more: WordPress maintenance plugin

Access file.php.

For WordPress Body class and slug page code to work, you will need to edit the functions.php file in the theme. This is actually quite easy to find even for most new users.

Before you begin, please note that changing subtopics is often easier. This way, you edit everything you like without affecting the main theme on your website.

Also keep in mind the importance from backup. Using a plugin like UpdraftPlus will help you recover quickly if something goes wrong.

First, go to the interface and make a note of the topic you are using.

how-to-set-body-class-wordpress-how-to-use-slug

You now have several options to access the functions.php function. But for the purposes of this tutorial, simply use the file manager tool from cPanel. It is a quick, easy way to access the website's root directory.

You can also use a program like FileZilla to access your files remotely.

From the directory on the website, open the wp-content directory.

how-to-set-body-class-wordpress-how-to-use-slug

Open topic directory.

how-to-set-body-class-wordpress-how-to-use-slug

Find and then open the subject folder with you. In this case, we are accessing the hitagag side directory because that is the directory we are using.

how-to-set-body-class-wordpress-how-to-use-slug

Select the tests.php file and click edit.

how-to-set-body-class-wordpress-how-to-use-slug

Add the code snippet

Paste this code into the functions.php file.

how-to-set-body-class-wordpress-how-to-use-slug

Click the save button in the upper right corner.

how-to-set-body-class-wordpress-how-to-use-slug

Your website is now ready with custom CSS code.

Use custom Body class

Let's say you want to change the background color on the introductory page in CSS. You would add something like this to your style sheet:

body.page-slug-about-us {

color: # 053f23;

}

In this example, the body of the introductory page will turn dark blue. Of course, you can change this color to any color you want.

Flexible in customizing

The biggest reason WordPress controls a lot of market share on the Internet is because of its flexibility. Whether it's using the WordPress Body class to change customizations or simply change the subject, what you do is almost endless.

Discovering the custom changes you make, your website is allowed to appear only, even if you use a general theme.

See more : Create a free sales website.

Post a Comment