How to Apply CSS Only on Home Page in WordPress

Last Updated on September 24, 2021 by Roshan Parihar

In this tutorial, learn how to apply CSS only on home page in WordPress. The short answer is to use the function is_home() or is_front_page() to check if the page is homepage to apply CSS.

You can also use the CSS class that is only available in the <body> tag of the homepage. Let’s find out three different methods below to add CSS only to the homepage of your WordPress website.

Method 1: Using Functions To Check If Home page and Apply CSS in WordPress

To check whether the given page is the homepage or not, you have to use the WordPress function is_home() or is_front_page(). These two functions come in the if condition to finds if the current page is the homepage. After that, use the <style> tag to apply the CSS as given below.

The above example applies to find the homepage and applies the CSS to the button elements. You can add as many CSS as you want to apply to the homepage.

Method 2: Using Only CSS To Apply CSS Only on Home Page in WordPress

If you want to use only the CSS and not the function of WordPress, you can use the class that is present only on the homepage.

When you visit my website TutorialDeep and right click your mouse to inspect elements. You will get a class .home in the <body> element of the homepage as showing in the image below.

How to Apply CSS Only on Home Page in WordPress

After getting the class present in the <body> tag, you have to use the CSS as given below to apply only to the homepage.

For adding more CSS, you have to place the class .home before every class or element name.

Method 3: By Adding CSS to Front-page.php File in WordPress to Add CSS

In addition to above all methods, you can also add CSS by placing the CSS inside the ‘font-page.php’ file in WordPress. It is the file that is considered the most preferred file to become the homepage of a website. If present in WordPress automatically overwrite other pages and become the homepage.

You need to just place the CSS in the ‘font-page.php’ file and it applies to the homepage automatically. In that file, you have to place CSS inside the <style> tag as given below.

You can place as many CSS as you want to apply only to the home page of the WordPress website.

You May Also Like to Read

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.