Hello guys, I’m going to show you how to go under the hood of WordPress and get into the code or at least to know where the code is, whether you are developer, becoming a developer or working with a developer and just kind of want to point them in the right direction. This will give you an inside look at how to really kind of get in the grime of WordPress. So this will be really helpful and follow all the steps below here, So let’s go.
Table of Contents
Step 1 :
So let me show you where we left off, I have a wordpress site running at a domain that I set up with Hostgator. I used one-click install, got it installed, and chose this theme, I have the 2017 theme running.
Now, what if I wanted to take this theme and customize it.
Step 2 :
Well hold on first off there are some real easy customizations, you can just click here and without touching any code you technically can change things like the colors you can see some of the text header images, etc.
So there’s some basic stuff that you might want to check out before you even worry about code that’s even what I would do like if you can do it without touching code. So let’s do easy customization together and whether you have coded or not you’ll be able to do this and follow along and it’ll be a great practice to knowing where the code is.
Step 3 :
So looking at this you’re like where’s the code how do I get in there. It’s fairly easy to find all you want to do is, when you’re in the WordPress back-end, here you click on the editor.
An editor will bring you to this file here if it’s your first time here it may say this is dangerous if you want to proceed and if you as long as you’re just checking it out you should be fine. You can proceed but it is letting you know that I mean if you delete stuff here like that you’re going to break your site. So you do want to know what you’re doing but we’re going to do this one together. So it brings you to the style.css page.
Step 4 :
This is a great place to be if you have any HTML and CSS knowledge because you’ll be able to customize the style. The CSS is a cascading style sheet and change some really basic things and make some nice impact. So that’s what this one is and let me show you an example if we wanted to change the font on this site you can see that the main font here it’s like an Arial right.
It doesn’t have feet that’s what they say and I’ll show you what that means in a second, but it’s kind of as clean Arial font. Let’s say we wanted more of a New York Times kind of style font. You know with like little feet and want to look a little fancier.
Step 5 :
So what you do is in CSS I like to go to the bottom of this file and add my own CSS, so as not to delete anything above. I’m just kind of add it onto it. So again if you know a little CSS, if you’ve taken an HTML course that will make sense but you can just follow. So check this out I’m going to say the body text is font-family: Times New Roman.
If you know some CSS, you can say everything the body with these open and closing curly braces. The font family I want to change that to Times New Roman.
Step 6 :
So if we do this and update the file then we can come to our site and we’re gonna watch this font change when I refresh there you go see.
It’s that kind of like I said New York Times kind of style fancy font, So that’s just a peek at how knowing where the code is can allow you to customize that theme and do some really cool stuff in addition. So this is the style.css file.
You can see these are all the files that make up this WordPress theme. There are a few standard ones that you learn or always in there like the style.css is a hundred percent always in there and it’s always called style.css. which is great because now you know exactly where to go. It’s a convention of wordpress and there’s a bunch of other conventions.
Step 7 :
There’s always going to be a header.php file which is this one here.
There’s always going to function (footer.php). So a lot of these are the same across all themes and that helps you know where to go. I’m not going to go into too much more detail about what all the code means that was what the course would cover. If we were to take the course together but I just kind of want to show you a peek at where that was. So that’s looking at the code and that’s cool okay so one last little kind of view into this whole world.
Step 8:
If you are a developer or you’re becoming a developer you can view this via FTP. FTP allows you to log in to the server and you have to go to public HTML this is all the configuration files for WordPress but I want to get to the theme. So I’ll go to wp-content themes and I can see the three themes that I have installed on my installation of all WordPress. This one we are using is 2017.
So this is the header.php file. So that’s just a peek again into the world of where this is going you get basic functionality with a wordpress site and it’s pretty cool but when you want to customize it when you want to take it to the next level or make it unique that’s when you want to jump onto the hood and learn how to access the theme files and it’s pretty awesome.
Did you learn something from today’s posts? If so comment here.
Thanks for checking in if you have any type of questions then simply contact us. I’ll help you ASAP and don’t forget to comment here.
Good luck and keep learning !!
