How to Add CSS in Single Page in WordPress Site?

Though WordPress offers plenty of settings in the admin panel interface, it is not sufficient for all purposes. For example, you can’t add a piece of CSS code to a single page. You will find difficulties when you frequently want to insert page level custom CSS styles. In this article, we will explain various available options to add CSS in single page in WordPress site.

Problems in Adding Site Wide CSS in WordPress

There are three commonly used methods to add CSS in WordPress.

• Go to “Appearance > Customizer > Additional CSS” section and paste your code.
• Otherwise, go to “Appearance > Theme File Editor” and paste the CSS code in theme’s style.css file. You can use child theme for this purpose so that the changes will not be wiped off when you update parent theme.
• There are also many plugins offering the feature to add site wide CSS in the header section.

The problem with these methods is that the added CSS will be loaded on all the pages of your site. This will be a problem when you want to insert hundreds of lines of code. Another problem is that it will affect the behavior site wide instead of impacting only the page where you need the code. Let us say, you see a horizontal scrollbar in your homepage and wanted to disable it. You can use body{overflow-x:hidden;} to easily do that. When you use the above methods, this code will be loaded on all the pages and affect pages where you really wanted to show horizontal scroll bar like pages having large tables with multiple columns.

Adding CSS in Single Page

There are two ways to achieve this in WordPress – you can either use Custom HTML block or use a third-party plugin.

Add CSS with Custom HTML Block

Custom HTML is one of the default blocks that comes with Gutenberg editor. So, if you are using Gutenberg, you do not any additional plugins with this method.

• Edit the page you want to add custom CSS.
• Type /custom and select Custom HTML block from the results. If you are not seeing the block, you might have mistakenly disabled it. Learn more on how to reveal all hidden blocks in Gutenberg editor.
• Paste the CSS code between open and close style tags. For example, below should be the code for hiding horizontal overflow.

<style>
body {
overflow-x: hidden;
}
</style>

• You can insert the Custom HTML block at the start before all other content. you can either preview the page or hit the publish button to apply the changes.

The page will not show the horizontal scroll bar and the inserted CSS will be loaded only on the specific page.

2. WPBakery Page Builder

Some of the commercial themes sold in Themeforest come with bundled WPBakery Page Builder. If you have a theme built on WPBakery or you separately purchased the plugin, then you can use that to insert custom CSS on page level. We recommend using this only on the pages and not on posts and disable the page builder plugin on posts.

• Create or edit your page with WPBakery Page Builder plugin’s frontend or backend editor.
• Click “Page Settings” icon showing on the top toolbar.
• Add your custom CSS that applies to only that page. Make sure to add the code without opening and closing style tags.
• Click “Save changes” button and update or publish your page.

3. Spectra Blocks Plugin

If you are using Astra theme, then Spectra is the must use blocks plugin. Though this plugin works other themes as well, it seamlessly integrates with Astra theme. You can use this Spectra blocks plugin to add page level CSS in your site.

• Edit the page and click “Spectra Page Settings” icon showing in the top right corner of the editor. If you are not seeing the icon, click the three vertical dots and select “Spectra Page Settings” option from the menu.
• Paste or type your custom CSS in the box below “Custom CSS” section.
• The advantage here is that the plugin will highlight the code with syntax highlighting and suggest from the possible values. This will help to avoid mistakes when typing large amount of code directly in the editor.  

Final Words

Though Custom HTML block helps to add CSS in single page in WordPress, you will not have a track of pages where you have added the codes. This is the same problem with both Spectra and WPBakery plugins. Premium version of Code Snippets plugin allows you to create snippets with shortcode and you can track, enable or disable the snippets from the dashboard. If you need to manage hundreds of CSS insertions on page levels then this will be suitable option compared to others.