WordPress template introduces CSS

WordPress template imports CSS

When creating or modifying a WordPress theme, style design and beautification are usually involved. To give your theme a more unique and aesthetically pleasing appearance, you’ll need to include a custom CSS stylesheet. This article will detail how to include a CSS stylesheet in your WordPress theme.

Create a New CSS File

First, create a new CSS file. You can name it “style.css,” or you can name it something else to suit your needs. In this CSS file, you can write custom style rules, such as changing the background color, adjusting the font size, and setting border styles.

Here’s a simple example: We’ll write the following style rules in style.css:

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}

h1 {
color: blue;
}

p {
font-size: 16px;
line-height: 1.5;
}

Importing the CSS Stylesheet

Next, we need to import the newly created CSS file into the WordPress theme. Generally speaking, there are two ways to import a CSS stylesheet: using the <link> tag and using the wp_enqueue_style() function provided by WordPress.

Use the <link> tags to include CSS

We can use the <link> tags to include CSS files directly in the theme’s header.php file. Add the following code to the head tag:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

This line of code will automatically import the style.css file in your theme’s directory when the page loads.

Use the wp_enqueue_style() function to import CSS

WordPress provides the wp_enqueue_style() function for more flexible importing of CSS stylesheets. We can place the import operation in the functions.php file. Add the following code to functions.php:

function enqueue_custom_styles() {
wp_enqueue_style('custom-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

Verifying Style Import

To verify that the stylesheet has been successfully imported into the WordPress theme, we can open the WordPress backend and view the imported stylesheet file in Appearance -> Edit Theme.

Alternatively, we can also use the browser developer tools to view the elements and styles of the page to ensure that the customized style rules have taken effect.

Summary

Through the above steps, we’ve successfully introduced a custom CSS stylesheet into our WordPress theme. By writing custom style rules, we can give our WordPress website a personalized and unique look, enhancing both the user experience and visual quality.