wordpress-add-custom-css
CSS Web Development

How to Add Custom CSS/HTML to WordPress Post

In this tutorial, I’m going to show you how to add a custom css effect to any wordpress page or a post easily in just a few minutes! Ready? Let’s check it out!

There are couple ways to add a custom CSS to WordPress.

Theme Editor

The first method is to use a theme editor to add your CSS to the theme directly. But this is a very bad practice since the CSS will be applied to the entire site, not just one page. Plus, your CSS code will be wiped out when updating the theme.

wordpress-add-custom-css-1

Inline CSS

The second method is to add an inline CSS using style tag into the post directly.

wordpress-add-custom-css-2

This works for most cases but you’ll see the CSS will also be counted as content (See figure below) and confuse other plugins like Yoast SEO and ads injection resulted in misplace ads or even break your CSS code.

wordpress-add-custom-css-3

WordPress Customizer

Another method is to use Additional CSS panel in WordPress customizer. This is probably the best way compared to the previous two. But still the CSS will be applied to the entire site and not the post.

wordpress-add-custom-css-4

Using Plugin

So to solve this problem, We’re going to use a WP Add Custom CSS plugin.

wordpress-add-custom-css-5

Once installed, you’ll have additional box at the end of the post that allows to add add any extra CSS to that post only.

wordpress-add-custom-css-6

Let’s Test it!

A flipable 3D Social Media button below is an example of adding custom CSS using this plugin.

Let me show you how I did it. First, I’m going to copy the html into the post. We need to do this in text mode. You’ll see that I also have a JavaScript added too which is perfectly fine.

wordpress-add-custom-css-7

Next I’m going to copy over the CSS into the box.

wordpress-add-custom-css-8

Now we’ll need a little adjustment. The original code was added to body the of the page but here we’re adding to the post section instead. So I’m going to create a wrapper div to wrap our code. And then copy the related CSS on the body to the wrapper.

<div class="social-wrapper">
     <!-- remaining code -->
</div>
.social-wrapper {
    /* related code on the body */
}

And that’s it. you can find the source code and tutorial for the Flipable social media button here.

So that’s all for this tutorial. If you love it, don’t forget to like or subscribe to our Facebook and Youtube Channel to stay connected with us. See you next post!

 

7 comments

  1. Hi,

    Its super helpful, Thank you soo much for showing the CSS tricks.
    Can you show how we can add CSS code in the latest wordpress – Gutenberg editor. I mean which block I can use.

    Thanks
    Vijay

    1. Unfortunately, I’m not really a fan of Gutenberg editor. I turned it off after got multiple issues with plugin compatibility.

    1. Creating custom theme is when you want to apply a custom HTML/CSS to the entire site. This is when we want to apply a custom CSS to a “specific post”

  2. Grt Tutorial Sir
    I learnt many new things today
    i want to add sliding sticky form to wordpress is it possoble like the tutorial u gave us here

  3. Hi
    I tried copying a css code from a website into my page using the custom css plugin that you recommended , but it is not responsive

    the css code is

    Number of words

    Font
    Times New RomanCalibriCambriaGeorgiaArialComic Sans MSVerdanaMyriad ProOpen Sans

    Font size
    12pt14pt16pt18pt

    Spacing
    Single1.5Double

    Kindly assist
    Thanks
    Elias

Leave a Reply

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