How To Add Additional CSS To The WordPress Themes

WordPress themes include the basic styles and, they’re good enough for most bloggers. But sometimes, you’ll want to add your custom CSS stylesheet to an existing theme for better appearance or use an entirely different set of styles to make the website eyecatcher. In this tutorial, I will show you how to add additional CSS to a WordPress theme.

What is CSS?

CSS is a powerful style sheet language for websites. It allows you to control the look and feel of your site, changing fonts, colors, etc. Once you know how it works, you can use CSS to create almost any look that comes into your head.

Understanding the WordPress Theme Structure:

When it comes to WordPress, the theme is what powers the site. Themes are the structure of a website, and they control its design. Each page on your WordPress blog is under the control of a template file that lives inside your theme folder. If you want to change anything about how something works on your site, then that is where you have to look.

All WordPress users need to understand the basics of themes because it helps customize their blog or website more easily.

Your design needs to have an easy structure to have a successful site. Your website design should be clean and clear so that visitors can easily navigate around the website.

Website Design
Website Design

Let’s see the basics parts of any WordPress theme: header, navigation menu, body area, sidebar, and footer.

  • a)Header: The header locates at the very top of each page. It includes things like your logo and site title. It also usually contains a site tagline or slogan.
  • b)Navigation Bar: The navigation bar is the horizontal bar and, it locates at below the header and above the footer. The navigation bar usually links to pages and posts on your website.
  • There are two types of Navigation bars: Fixed and Mobile Top Bar. A fixed Navigation Bar stays in its position while you scroll down the page, whereas a Mobile Top Bar moves up as you scroll down your page. Try both options to see which one works best for your site design.
  • C)Widget Area: A widget is a small piece of software that you can add to the sidebar or footer of your website. It allows users to display information such as recent tweets, latest blog posts, and more. It will update automatically every time there is new content on your site.
  • d)Sidebar: The sidebar is a part of the WordPress template that defines the space you can put widgets to display your content. It locates at the right sidebar of every website using WordPress. Its purpose is to keep specific widgets on the sidebar, such as Recent Posts, Categories, Archives, and more.
  • e)Footer: The footer is useful for displaying information, such as contact information and copyright details. It is also a great place to add a link to a privacy policy or disclaimer for your blog or website.

Adding CSS to your theme and examples:

We have seen above the WordPress basic theme structure. Now let’s see how to add additional CSS to the header, navigation menu, body area, sidebar, and footer.

To add custom CSS to the website, you need to go to appearance and click on customize. After clicking on customize button, you can see the additional CSS widget left side at the bottom. There you can add the CSS code whatever comes into your head.

Additional CSS
Additional CSS

Here is one example of changing the color of the website’s main title. Before writing CSS code, you need to inspect the theme code. Inspect is a tool that helps to show the website code.

Inspect Tool
Inspect Tool

For example, I inspect my website’s main title to know the CSS class name of my website’s main title. If we understand the CSS class name of every container, then it is easy to write the CSS code. The below is the example step by step.

I want to change the header title color on my website. By default theme, the title color was black. According to my logo, there are two different types of shades. I want to make my website appearance according to my logo brand colors.

I inspect my header to know the CSS class name of the title. After looking, I got the default title color and CSS class name of the header. The below image shows the default title color.

Default Color Theme
Default Color Theme

The below image shows after writing and publishing the CSS code on a website. I have chosen two different colors. One color is the default color and, another one is the hover color.

.main-title a {color:#2b0071;} 
.main-title a:hover {color:#00aae6;}
CSS Code Shade One
CSS Code Shade Two

Let’s see another example. In my default website theme, the article container after the expert text contains a Read More text. So, I want to change the Reade More text as a button by adding custom CSS. Again here I inspect the Read More text to know the CSS class name. The read more class name is .read-more. The below is image shows the Read More text as a button.

.read-more {
  float: right;
  border: none;
  background-color: #2b0071;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  border-radius: 25px;
 
 }

.read-more:hover {
  background-color: #00aae6;
  color: white;
}
Read More Text Class
CSS Code Button Example

The CSS class names in WordPress themes vary from theme to theme. This article provides a simple concept for changing the default WordPress theme’s appearance to something eye-catching, according to your tastes and preferences.

If you are looking for CSS code examples to make your website eye-catching, then here is one website that helps you do it. The most popular online web tutorial site is w3schools.com. Through this site, you can practice the code and learn the necessary steps to build the website.

Conclusion:

In this article, I have provided a way to add additional CSS to your WordPress theme without touching the theme editor code. The custom CSS code will allow you to keep your website looking professional and unique!

Leave a Comment