WordPress bundle WP Add Custom CSS

in this video I’m going to show you how you can add CSS to a specific page inside WordPress this me very helpful when you need to Target a certain section or widget or anything like that but only on a specific page now adding the CSS code is very easy as one line of code isn’t this isn’t going to require any sort of plugins or any JavaScript or anything like that it’s one little line of code and you can Target necss class on any page let’s get started in this example I’m going to show you how we can change the background color of the header only on the home page using this technique

this website built using Elementor so this whole top section is a header so I’m going to go in here and assign a CSS class to the whole header

so this can work for anything or page builder using it’s just a different way to do it and this is just using Elementor so this whole section to click the advanced and assign a CSS class to it Jim’s going to call at header BG so now that whole top section in the header is called a derby G for the CSS class

the next step we need to do is grab the page ID number this is going to be how you target your specific page and to do that it’s very simple you just go to your website and the page that you would like to have the CSS class if you click right here we’re just as edit page or if you’re just using Gutenberg or anything it’s going to be the same thing so this in the URL right here I have a highlighted this is your page ID so copy this into your notepad we’re going to use this in the next step and every page has a unique ID so this is going to be different for every page that’s assigned to your website the next step is to add the custom CSS to your whole website that is a lot of different ways that you can do this but in this example I’m just going to use the default way to add custom CSS to a website so I’m going to go into appearance and under customize

and under additional CSS I’m going to add the following code so this is the code that is going to make everything work it’s a CSS class called page ID and this is that number that you just copied that started it to the page that you’re trying to add the CSS class and then this is the CSS class that we added to the header right here in the home page and I just did the example of a background color of like a dark gray now we can test it to make sure that everything is working correctly and in this example I only added that custom CSS to the homepage so now if I start jumping around to any other pages on the website it goes back to the default light color so if I go back to the homepage I should be great and there you go that’s how you can test it and make sure it works like I said this is mainly useful for adding this type of functionality to headers and Footers because those are Global setting and so it’s really hard to Target just us

page using any other technique

if you found this video helpful make sure you go to thumbs-up subscribe to this YouTube channel and hit the Bell to receive notifications when I release the future videos

do you need to add custom CSS to your WordPress website will keep watching in this video I will show you to message you can use to add custom CSS to your WordPress website leave her sniff it will simply add some custom CSS directly in the WordPress admin area to do that head over to the appearance section customized and since WordPress 4.7 all things have this you scroll all the way down and you see additional CSS from here you can add the CSS and when you’re heading the CSS you actually see the items change Princeton sale ad

paste and this bit of CSS code and item put sticky tile just changed for me if you like the changes that you see you can simply click publish and then that will become part of the new theme CSS that you’re adding using this theme customizer it’s only available for that particular thing so if you switch themes and you want to keep that make sure that you copy this so you can add it to the next thing that you use now method to is adding custom CSS using a particular plug-in using a plug-in for CSS is pretty good because it will keep the custom CSS on your site regardless if you change things but we need to do is head back over to our dashboard go down to applicants are you real quick at noon we want to search for a plug-in called Simple custom CSS

go to scroll down because this is the one we’re looking for by these authors

earthquake install now

I want to install us go ahead and activated as well

once activated you can find it under appearance

custom CSS from here you can add all the custom CSS you need to make your theme look how you want it to look any changes you make you want to make sure you click the update CSS and your site is good to go a bonus method you could use if you really want to take a look at your site you can update the CSS from the front end using a plug-in called CSS hero it allows you to make changes from the front end of your sight and you can click on items like this to make the changes we also have a review video that you can watch to see that in action as well and those are some great and easy ways to make CSS changes to your website did you learn something from today’s video is so subscribe to our YouTube channel and will send more helpful tips to help you manage your WordPress website and thanks for watching