The community of WordPress is simply incredible. You’d find a vast range of work that is available on the platform. From web developers to designers and bloggers, you’d find almost every expert there.
All these expert players from different industries sometimes need to change or edit the themes of their existing WordPress blog. Also, the entry level for ‘hacking’ is pretty low and that is good news for us.
It wouldn’t be wrong to say that all beginners in the hacking industry start off with WordPress. We also started it when someone we knew needed some help with his WordPress themes. We were not aware of anything regarding the WordPress itself but we had a fair bit of knowledge about PHP.
So, we jumped in and started our mission regarding the edit of themes. If we recall that day, we probably would have done things differently. However, our main focus is to tell you guys and let you know how you can do it in the ‘WordPress style’.
5 methods to edit WordPress themes
To make changes or edit your WordPress themes, there are five most commonly used tricks and they’re perhaps easier than each other.
- You can do the CSS editing through the WP Customizer. It will bring changes to the style of themes without modifying the theme files at all.
- You can also edit the theme files directly.
- You can also begin a child theme while preserving the parent theme at the same time.
- You can also fork a theme; it means you can always make a copy of the theme as well.
- You can also write a new plug-in by using hooks and filters to change functionality.
As we explore how to edit WordPress themes and cover the theme editing slightly, we will concentrate on CSS as we start a child theme. Title of this article does not involve the forking and writing of plug-in topics. You will need some stuff, and a few tips however.
- Be ready with a backup
- SFTP access to the site should be in your pocket
- Don’t look at the WordPress editor
- Don’t indulge yourself into Cowboy coding
Make sure you have a backup
It is extremely important to have a backup ready before you start editing your WordPress themes. Get a proper backup from offshore web hosting company and there are many options for that. You can get the help of ManageWP as a secondary backup for your site.
“If you don’t use ManageWP at this time, register. It offers a free backup option for once a month. Switch on and run this tutorial until your start your work.”
Get SFTP access (or just FTP)
You need a way to connect to the server if you want to change theme files. You can use Filezilla while you’re on Windows, Mac or Linux. It’s open and safe. To associate it to your web server, install it and then activate it.
Avoid the WordPress editor
This step is perhaps the most important one to keep in your mind. Don’t go for the direct way of choosing the WordPress editor for your theme editing. At the start, you will find it easy but you never know, if a single semicolon or a comma gets misplaced here and there, you might end up taking the whole website down. So avoid the WordPress editor at any cost.
What is Cowboy coding? (It should be avoided as well)
We’re not here to deliver lectures on coding ethics and standards because there is no gain from it. What we do know is that a proper and a full-time dedicated developer will surely take his time to set up the website locally with MAMP, WAMP and Vagrant as well.
We’ll do what is called ‘cowboy coding’ by missing this step and it is not the best practice at all. That is exactly why we’re saying that avoid it if you can. You won’t edit code on a live website, so please do not hesitate to go to the next level for local Google development.
“When you want to become a developer, local development should be your primary objective.”
We’re going to use MAMP for local creation for my examples. But it’s possible that you must download, edit, upload and refresh the page to see the amendments. This is a simple way to start finding out how to edit WordPress themes, but if you want to become a developer, local development should be your target.
Let’s dive in
We shall use a local site for this article at http:/dev.dev. And don’t try to open it because it won’t as it is built on our machine locally. I shall use it on this post. These three types of WordPress modification need different levels of ability. We will begin with the simplest method and will spent most of the time there.
CSS edits
We’re saying this again that the easiest and simpler method of bringing changes to your WordPress website is by making the CSS editing. The 4.7 version is already released and there is a built-in way to edit the CSS. Also, there is no need of editing the CSS theme directly.
Only sign in to WordPress and pick Customize from Appearance:
Once the customizer opens, you will have to choose the Additional CSS. This takes you into a vacant field in which you can begin to drop in CSS. We have slightly scrolled it down for you to see the content directly, not just the header picture.
You can now start to make adjustments. You must know how to target CSS components, so let is begin. I’ll pick Chrome for a CSS component, but the same feature is available to other browsers as well. Start by right-clicking on an item, for instance, the blog title Hi! Or whatever you like. The inspector will pop up when you right click on it.
You can see what the title item is called once you press Inspect. The title of the article in this case is an H3 tag with the entry title of the class. Any CSS you like can be added here. In this case, we’re simply looking to add a red border by adding the following code.
When you know how to edit WordPress themes, you can add CSS to any feature. As you are aware, the theme files are not changed, and the CSS is saved in the database.
Make sure you look at the classes of the body when you seek to locate an object however it should only be on a certain page or post kind. The WordPress is a freaking genius. E.g. we get a lot of handy and important information about it if you click and load the first blog post.
We know the default template is loaded, there is only a single page and the post ID is 1. You can also try something like that.
You’d only witness the border on the web page with the post ID 1. However, if you’re looking to remove the title from the pages but you want to keep them on your posts then, you can simply visit the page and check the classes in the inspector. Now, the next step is to add this CSS to the customizer.
A lot of CSS tools are available there. CSSplay offers clear examples of what to do. Only note that by looking at the User, you can get a lot of knowledge on lessons incorporated with WordPress.
Theme edits
“If you want to create a permanent mark, theme edits should be made. Change only the theme files if you are 100% certain that another update is not needed at all. You’re going to lose all the files that were once edited by you if you are using Genesis, Elegant Themes, Divi, Avada etc once another update strikes in. In that case, you will have to jump to the next step.”
Alright, now you have your theme that is not going to be updated ever, the next step from here on is that you just FTP it. After that, you’d need a file to be selected for modification.
We will just check and investigate that in your themes directory but, most of the time it will look something like this public_html/wp-content/themes/_name_of_theme.
The CSS can be modified and the same code from the above section can be entered. Delete the customizer’s code, edit the.css style at the theme’s directory root, and then apply it to the file end. You can edit any file when you’re ftped in. You have this backup and you made it easy. Be cautious, anyway.
Child theming
When it comes to child theming, it is more of developer’s cup of tea. However, you can also visit the WordPress codex in order to learn about creating a new child theme. With the help of this article, you can also learn as to how you can create your first WordPress child theme. It will also help you understand and learn creating a child theme based on the Twenty Fifteen theme.
We also encourage you to learn how really WordPress operates through this manual process. But if you are unable to build a child’s theme from the start then plug-in is always there to help you out.
The Child Theme Builder is a free plug-in for generating the child theme. Simply install the plug-in, trigger it, and fill out the form to start its creation process. You should also understand that many conceptual businesses are there to help you with child themes and they also provide them ready made.
For instance, you can get a child theme easily from the Beaver Builder’s theme so that you can make changes without having to scratch out a child’s theme.
“Also note, a child’s theme can have any theme — if it’s not already a child’s theme.”
The good thing about the child’s theme is that WordPress will first scan the child’s directory for a file, then load the parent theme file if not found. For instance, if you want to change the footer of a theme, and only the footer, by following WordPress.org instructions, you can construct a child’s theme. Just copy footer.php and insert it in the directory of the child theme while simply taking it from the parent theme.
If you’re taking help from the FTP to change and modify themes on WordPress, this is perhaps the only best possible way to do so. The WordPress will first bring up the footer.php that is found in the child theme whereas if it isn’t found, it will automatically load the parent theme.
Wrapping it up
In this never ending sea of knowledge regarding the WordPress, you will also learn a few new things that we missed in the article. However, we will surely try and provide you with intricate details as to how you can fork a theme and how you can write a plug-in to change the theme. All of that will come in a separate piece soon.