Hey guys! I know a lot of people are using WordPress today to create websites in the snap of a finger. You do not have to know Cascading Style Sheet(CSS), or even HTML. Everything is done in the customize option. This WordPress CSS tutorial will hopefully make things a little easier on you!
The only problem with customizing without knowing CSS is sometimes you will see something you would like to change, but WordPress does not really have that functionality. Maybe you cannot find it or do not know how to change it.
But I am Not A Programmer?
A programmer is someone that writes programs. All you are doing is reverse engineering something that is already created. A programmer created your WordPress theme and you are allowed to modify it. Do not be intimidated by the prospect of coding. It is so simple and there are so many resources out there to help you. I will show you how to customize your WordPress site here with what knowledge I have gained.
The beauty of being efficient is not recreating the wheel. You want to learn to code your CSS, not create an entirely new sheet. Injecting like 1 or 2 lines of code is nothing to be scared of at all. Here is a sample for you:
That is it. Literally that simple. You just changed the color of your text. See how easy it is?
Using WordPress Customization,
Here you see we have the home customization menu for WordPress. It is fairly straightforward and to see what happens, just go down each option and make some changes. You will see a lot of things in this menu are customizable, but a lot is missing. Now when you upgrade your WordPress site, more are unlocked, but still, you need to know some CSS to really get what you want.
The way I do this is I find something I want to edit and then go down the customization menu changing things until I find it. A good rule of thumb to know is if you change a lot of stuff and do not want it, just refresh the page and everything will default. Just do not hit save before you do this. Once you have pinpointed the option you wanted to change, then you can go directly to it and save changes.
Inspect Element, The Ultimate User Tool
Inspect element is insanely powerful. A lot of people do not know how powerful it is. You will need to know how to use this to create successful CSS, as it makes things so easy. Here is how you use this powerful tool:
- Right-click the part of the web page you want to change.
- Here I chose the header because I want my text to be on the left side.
- Click inspect element and the CSS will show up on the bottom.
- Do not be afraid! This is really easy and simple.
- You will be taken directly to the code you click on.
- When you mouse over a line of text in inspect element, you will see it highlighted in blue on the web page. This is the code I was taken to.
- This part is common sense. The text is in the header, so I will look for the <header> tag.
- Here we see the header and it has a class which makes it unique. The class is mh-header.
- Now go to the bottom button on your WordPress customization menu called “Additional CSS”.
- Here we place code that will instantly be applied. Your code is wrong if nothing happens.
- I want to change my header to align left and then change my background color.
- Notice I put header at the beginning since it’s in the header. Then I put .mh-header because that is the class.
- Use brackets to open and close your code.
- Place a semicolon after each line of code, kind of like periods at the end of sentences.
Now my text is aligned left and I am happy! Just mess around with coding your CSS until you see something change and then look for ways to mold that into what you need.
Now You Are a CSS Pro!
I just used a few simple lines of code to change my header. Sure the customize tool is useful for WordPress, but knowing how to go in there and do it on my own saves me time and headaches. Sometimes you have to dig around the customize menu and do not find what you are looking for or forgot where it was. Hopefully, this will help and save you some time. If you have the programmer bug now that you have had a taste, you should definitely look into the best programming languages to learn.
Still Having Trouble After the WordPress CSS tutorial?
If you are having problems injecting your code, please feel free to comment below! I love to use CSS and beautify designs. The four design principles are a funny acronym known as CRAP. Contrast, Repetition, Alignment, and Proximity. Keep these in mind when designing your website and CSS. Thank you for reading and I hope this helps!