WordPress Page Custom Css

This plugin is a simple way to apply CSS stylesheets to your WordPress pages. It allows you to specify multiple CSS files that will be alternately loaded and applied (in order of definition) to each page, allowing you to keep your primary CSS file small and more manageable, while still having all pages styled according to secondary CSS files. The plugin also allows you to disable pagination on individual pages, which can be useful if you want to prevent the sidebar from appearing on certain pages (for example, if these pages are just archive lists of links).

This is a very cool plugin for WordPress. It allows you to easily use a custom style sheet for any page in your site. Simply add an option in the Page Attributes box (under edit page) to apply a custom css file. Now, when you look at your page, all of the css will be applied to that page, not affecting other pages on your blog. This is great because if one of your styles isn’t working correctly in someone else’s browsers, you can simply remove it from your custom css file for that page and it won’t affect the rest of your site. Neat!

Where to add CSS in WordPress

While you can add CSS directly to your WordPress theme’s style sheet, we don’t recommend this method because it’s easy to make mistakes and any changes you make will get overwritten when you update your theme (unless you use a child theme).

Fortunately, there’s an easier solution. To add CSS to WordPress, you just need to:

  • Navigate to Appearance > Customize in your WordPress dashboard to open the WordPress Customizer
  • Select the Additional CSS option from the menu on the left in the WordPress Customizer interface:
The CSS section in the WordPress Customizer.

The (currently) empty editor in this area enables you to type in lines of CSS code, without having to sort through the existing style sheet. You can add as much CSS here as you want – just include each new snippet on its own line. Plus, you can see your changes take effect in the live preview. That way, you’ll know whether they look right before publishing them to your site.

Additionally, this editor will help you “validate” your CSS, which is a fancy way of saying that it will warn you if you make any obvious mistakes.

If you’re getting curious about what kinds of CSS tweaks you can make here, don’t worry. Stay on this page in your dashboard, and we’ll explore a few ways to start customizing your site’s appearance with CSS.

Applying styling using the unique page class

In the video above I showed you how to find the specific page-id class using our WordPress Websites page as an example, which you need to use custom CSS for specific pages on WordPress

In the video it appears that the page-id class for this page is:

.page-id-2211

So how would I apply styles to this particular page?

In the same way that I’d apply styling normally, using the page-id-class as my ‘element’ or ‘target’.

For instance, if I wanted to make the title on that page monstrously large, I would use the below CSS:

.page-id-2211 .vcex-heading-inner.clr{ font-size: 100px; }

Monster title didn’t look great surprisingly.

Adding Custom CSS Using Theme Customizer

Since WordPress 4.7, users can now add custom CSS directly from the WordPress admin area. This is super-easy, and you would be able to see your changes with a live preview instantly.

First, you need to head over to the Themes » Customize page.

Launching the theme customizer

This will launch the WordPress theme customizer interface.

You will see your site’s live preview with a bunch of options on the left pane. Click on the Additional CSS tab from the left pane.

Additional CSS option in WordPress theme customizer

The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane.

Adding custom CSS with live preview

You can continue adding custom CSS code, until you are satisfied with how it looks on your site.

Don’t forget to click on the ‘Save & Publish’ button on the top when you are finished.

Save your custom CSS changes

Note: Any custom CSS that you add using theme customizer is only available with that particular theme. If you would like to use it with other themes, then you will need to copy and paste it to your new theme using the same method.

How to start customizing your WordPress site with CSS

As we mentioned earlier, you can change just about any aspect of your site’s appearance using CSS in WordPress. The sky truly is the limit here. For now, however, we’ll keep things simple, and look at some basic CSS tweaks you can make.

We already mentioned altering text color, so let’s start there. If you really want your WordPress posts to grab your visitors’ attention, you can experiment with changing the color for each post’s title. This is what a basic post looks like in the Twenty Seventeen WordPress theme:

A basic post in WordPress.

Now, add this code to the Additional CSS box in the Customizer:

h1 {
color: purple;
}

As you can see, the post title’s color has changed from black to purple:

Changing a post's title color with CSS in WordPress.

This same tweak will also be applied to every other post on your site. Instead of simply naming a color, you can also use hex codes to get the shade just right. Simply replace purple with #9C33FF (or whatever color you want to use). When you’re happy with the new hue, select Publish at the top of the screen to make your changes live.

Next, what if you want to make some alterations to the body text? Let’s edit its font family and size, by adding this code on a new line:

p {
font-family: Georgia;
font-size: 20px;
}

Again, you can see the results right away in the Customizer:

Changing a post's font type and size

Finally, let’s make the sidebar stand out a little more, by adding a light blue background and a little padding. On a new line, paste in this CSS:

.widget {
background: #B9EBFA;
padding: 25px;
}

This places a simple background behind your sidebar:

Changing a site's sidebar background with CSS

Keep in mind that this code will affect all of your widget areas, including your footer. You can also make changes to specific widgets if you prefer. For example, you could add a background only to the search widget, by replacing .widget in the above code with .widget_search:

Editing the search widget with CSS

At this point, you might be starting to grasp how CSS works under the hood. The first line of a CSS snippet specifies which element you’re altering – such as post titles (h1), text contained in paragraphs (p), or your widget areas (widget). The following lines, enclosed in brackets, contain specific instructions about what should be changed.

Styling multiple pages with the same CSS

Let’s say that you want to style multiple unique WordPress pages with the same CSS. You could write multiple lines of code that would be inefficient and not time effective, like below:

page-id-2741 h1, h2, h3, h4, p, img { margin-top: 20px; }.page-id-2211 h1, h2, h3, h4, p, img { margin-top: 20px; }

Page-id-2741 I found out was the page-id class for my WordPress Pro page.

Writing out the same code or styles for every single page could get time consuming, fear not though, there’s a more efficient way of writing the CSS to target multiple pages, in one line of code.

Using a Custom CSS plugin vs Adding CSS in Theme

Both methods described above are recommended for beginners. Advanced users can also add custom CSS directly to their themes.

However, adding custom CSS snippets into your parent theme is not recommended. Your CSS changes will be lost if you accidentally update the theme without saving your custom changes.

The best approach is to use a child theme instead. However, many beginners don’t want to create a child theme. Apart from adding custom CSS, often beginners really don’t know how they will be using that child theme.

Using a custom CSS plugin allows you to store your custom CSS independently from your theme. This way you can easily switch themes and your custom CSS will still be there.

Another great way to add custom CSS to your WordPress site is by using the CSS Hero plugin. This wonderful plugin allows you to edit almost every CSS style on your WordPress site without writing a single line of code.

Editing custom CSS with CSS Hero plugin for WordPress

We hope this article helped add custom CSS to your WordPress site. You may also want to see how our guide on how to choose the best web design software, and the best WordPress drag & drop page builder plugins.

Where to learn more about CSS

There are plenty of useful guides online that will help you learn more about CSS and the most common elements you can affect. Until then, if you’re struggling to figure out what code you need to make a particular change, a simple Google search will usually lead you to the answer. Resources like the MDN web docs from Mozilla usually rank highly in Google and do a great job explaining various aspects of CSS.

With a little practice, you’ll find yourself adding CSS with ease in no time.

Conclusion

Add some style to your WordPress website with Page Custom CSS. This plugin allows you to adjust the css on any page or post in your site using a simple settings page. You can even add your own custom stylesheet.

0 Comments

No Comment.