How to Edit a WordPress Theme

How to Edit a WordPress Theme

Do you browse through thousands of themes all over again, looking for that one perfect fit for you? Are you going to spend all those hours sifting through design after design just for that one feature? 

Worry not, because there is a way to make these minor tweaks on your theme yourself to avoid that hassle. All you need to do is learn how to edit your WordPress theme files.  

Once you know how to edit your WordPress theme files, you can add those little details that your otherwise unique theme didn’t exceptionally provide. Whether it’s a custom banner or a font previously unavailable in the theme, you can easily edit it into your WordPress theme.

Things to Do Before You Edit Your WordPress Theme:

Here is a list of a few things you need to do before you start editing your WordPress theme.

1. Backing Up Your Website: 

It’s best to back up your files frequently. Working on backup files ensures that you don’t mess up your original website and can revert to them if need be. You can duplicate your theme and store this backup copy in your Google Drive or Dropbox when you need them. When it comes to editing your theme, it is better to be safe than sorry. 

The easiest way to backup your files is to use WordPress plugins. You can find a list of plugins like BlogVault and Jetpack specifically designed to back up your files reliably. To learn more about the different ways of backing up, follow our guide and learn how to backup WordPress websites

2. Setting Up File Permissions: 

WordPress files and directories have specific permissions that determine your access to reading, writing, and modifying them. Naturally, to edit and save your files, you will have to set the file permissions accordingly.

You can use an FTP client or cPanel file manager to set up your file permissions. 

3. Selecting an Appropriate Program: 

It’s best to use a text editor instead of a word processing program like Microsoft Word or Google Docs while editing your theme. This is to avoid the risk of a word processor adding extra formatting to your text files. These programs can change or convert specific characters, causing your files to break. 

Instead, a text editor like Notepad++ will edit files in plain text format and not insert extra codes. You can use other text editors, like Atom, BBEdit, Coda, EditPad, EditPlus, TextPad, pico, and many others. 

4. Avoiding Cowboy Coding:

Cowboy coding is generally considered a software development malpractice where a programmer has complete autonomy over the development process. This can mean that you might end up editing your theme on a live site. Whatever mistake you make, the public will see. 

Instead, you will want to set up your website locally, i.e., on your local hard drive. You can set up your local development environment with tools like DesktopServer, XAMPP, MAMP, and Vagrant. WordPress also lets you create a staging site and edit on it before making the changes live. Such features allow you to edit safely and test changes before applying them to the live site. 

Four Ways to Edit your WordPress Theme:

There is more than one way to edit a WordPress Theme. Some of the more popular ones include:

  1. CSS editing
  2. Theme editor
  3. Create a child theme
  4. Page Builders 

Let’s get right into it. 

1. CSS Editing 

CSS (Cascading Style Sheets) is among the most popular web languages. It acts as a partner to HTML. HTML determines the appearance of the website, and CSS is used to style the appearance. This means that if you know how to make tweaks to your CSS, you can play around with layouts, colors, fonts, and more, which is to say you can customize your theme the way you want.

Now, to make these edits, you will have to access your website’s stylesheet. One of the ways you can edit your CSS is through the WordPress Customizer. What you will have to do: 

Step 1:  Go to Appearance > Customize. This should take you to the theme customization screen with a live preview of your website.

Customize setting

Step 2: Click on Additional CSS. You can find this at the bottom of the menu. 

Additional CSS option

This will take you to a screen with a code input box. Here, any code you write will appear in the preview area unless it has an error.

Step 3: Now, you can start working on your CSS elements. But you need to know how to target CSS elements. For selecting a CSS element you need to right-click the element. Then select the ‘Inspect’ option. You can also hit the “Ctrl + Shift + I” to enter the inspect mode. 

inspect the CSS elements

For example, you can paste the following code to change the font size of the body: 

  • body {
  • font-size: 1.25rem;
  • }
changing font size using custom CSS

You can make whatever changes you want on the site. For that, you need to select the element and add a code to edit it. 

Here is an example of adding a red border: 

  • Select the element where you want to add the border. Here we will select the “15 Best Fashion Bloggers You Need to Follow.” 
  • Then right-click on it. Select the “Inspect” option. 

In this case, the title is an H1 tag, with the class “entry-title.”

inspecting title
  • Now, you can place a red border over the title by adding this code:
h1.entry-title {
  border: 1px solid red;
}
code to add border

Take note that the CSS you add is saved in the database to avoid your theme files from getting modified. However, if you switch themes, you will lose your CSS. So, to not lose your progress, you might want to back up your CSS just in case. 

2. Theme Editor and Plugin Editor 

The Theme Editor is a simple text editor in WordPress that lets you edit your theme files and plugins from the admin area. You can find this at Appearance > Theme Editor.

Theme editor option in dashboard

There are a few things you have to consider right off the bat. This is one of the more risky methods of editing your theme that even WordPress warns you against before you get started. If you enter the wrong code, you might end up being locked out of your website. Any changes you make will also be lost if your theme provides future updates. So before you edit your theme files this way, make sure you know the risks, and ensure that you will not be getting updates. It is also crucial that you have prior coding knowledge for this method. 

If you are confident in your skills to use this method, there is a list of currently active files in the theme on the editor’s right side. You can choose the file you want to edit and code away. 

Theme files option

A second built-in editor that WordPress provides is the Plugin Editor. Like the Theme Editor, it is a simple text editor that lets you precisely edit plugin PHP codes. 

You can access this through Administration Screens > Plugins > Plugin Editor. 

Just like the Theme Editor, this is also a risky method of editing your theme. At your discretion, be sure to click on the Update File button to save your changes after you’re done editing.

update plugin editor file

3. Create a Child theme 

This is a method that will let you edit your theme safely. A child theme is a theme that inherits your parent theme’s appearance and functionality. This means that you will be editing the child theme while preserving your theme’s look and functionality. While you can mess up your website with one faulty line of code in the parent theme, the child theme allows you to fall back on your original theme in case you mess it up. 

You will also not lose your customizations during updates. 

How this works is that when you load your website, WordPress first looks for files in the child theme’s directory, and only if not found will it load files from the parent theme. 

One thing to note is to make sure you call your parent theme’s CSS files within the child theme’s style.css file. This WordPress will not render any CSS styling if it doesn’t find one while looking through your default child theme files. 

Now that we know this, here’s more on what a child theme is and how you can create it. You can also use the Child Theme Wizard- a free plugin that creates it for you. 

When you’re done, you can start CSS editing your child theme.

4. Page Builders/ Frameworks 

Using page builder is the easiest way to edit your existing WordPress. This method is suited for any level user (with or without coding experience) who wants to edit their theme without any hassle. Using page builders, you can create, edit, and adjust your theme elements with a few clicks. Moreover, the page builders now come with the drag-and-drop interface, making it super easy and fun to make your tweaks.

Some of the popular page builders on the market are Elementor, Beaver Builder, Divi, and Visual Composer. Besides these, there are several other page builders you can find and use. 

Here is an example of editing the WordPress theme using the Elementor page builder: 

You first need to install the Elementor plugin.  

  • Go to your dashboard and click on the ‘Plugins’ option on the side panel to your left. 
  • Click on the ‘Add new’ option. 
add new plugin from dashboard
  • Search for ‘Elementor’ plugin. Install and activate the plugin. 
install and activate the Elementor plugin
  • Now add a new page. 
add new page
  • You will see a new option that says ‘Edit with Elementor.’ Click on it.
editing with the Elementor
  • A new page opens with tons of editing options. 
editing options in the Elementor

You can edit the theme using from here. Simply drag the widget and drop in the section middle section that says ‘Drag widget here.’ Here is an example of adding a sidebar:

example of editing Elementor
  • You can now edit the sidebar by right-clicking on the edit icon. 
editing the sidebar using Elementor
  • It opens various options to edit the sidebar. Do as it fits you.

Like so, you can edit various other elements of your theme to give it a fresh and unique look. Try it out yourself.

Conclusion 

All in all, it is possible to add some custom features to your otherwise up-to-the-mark WordPress theme. Given above are some of the ways to edit your WordPress theme. A word of caution though- it can get risky altering your files, so please tweak away with appropriate precautions! Most importantly, you will want to back up your information before getting your hands dirty with your theme file codes. As the saying goes, better safe than sorry!

You might also want to check article on How to delete a WordPress Theme.

FAQs (Frequently Asked Questions)

1. How to edit an existing WordPress theme?

You can edit your existing theme in different ways: 

• CSS editing
• Theme editor, and 
• Creating child theme to edit your theme

We have explained these ways step-by-step above. You can edit your theme with the way you find suitable.

2. How to customize WordPress theme for free?

The easiest way to customize your theme is: 

  • Go to Appearance > Themes.
  • You will see the active theme on your WordPress. Click on the “Customize” option below it. 
go to theme customizer
  • You can edit your theme from here. 
edit the theme

3. Can I edit free WordPress themes?

Yes, you can edit free WordPress themes. We have explained three ways to edit a WordPress theme. You can easily adjust your theme the way you want.  

4. How to change a WordPress theme?

You can easily change your WordPress theme as follows: 

  • Go to your dashboard. 
  • Go to the ‘Appearances’ and click on the ‘Themes’ option.
themes option
  • Here you will see a list of currency-installed. To add a new theme, click on the “Add New” tab. 
add new theme tab
  • Search for the theme you want in the theme library. After finding the theme, hover over it and click the “Install” button. 
installing new theme
  • If you have purchased a premium theme, click on the “Upload theme” button at the top of the page.
upload theme option
  • You need to choose and upload the zip file of the theme you purchased.
choose the theme file to upload
  • After installing the theme, you need to activate it. Hover over the theme you installed and click on the “Activate” button.

5. What do you need before editing a WordPress theme?

Before editing a WordPress theme, there are some things you must have in place: 

  • Creating a backup in case anything goes wrong with the editing.
  • List of colors, fonts, and sidebars you want to use across your site. 
  • Images and graphics you plan to add on your site. 
  • A general idea of how your theme is going to look like.

After figuring out these points, you are ready to edit your WordPress theme.

Also, check out our articles on How to delete a WordPress Theme.

About the Author

Nabin Jaiswal

Nabin Jaiswal is the co-founder of CoachPodium, WP Delicious, and other WordPress products. With over six years of experience in WordPress, he is passionate about writing and sharing his insights with the community. Nabin is committed to contributing to the community through knowledge-sharing and innovation. He has also had the privilege of being a speaker at multiple WordCamps, sharing his expertise and experiences.

View All Posts

Leave a Reply

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