This post is about editing existing themes. You can of course edit the theme on your local environment, but sometimes you may just want to edit it quickly and easily and directly on the server on which is running, in another post we might cover preparing development and production environments.
Important thing when doing so is avoiding to modify theme files directly and the best way to do that is using a child-theme. Another important thing is using a decent editor so you can avoid editing files directly on server using vim and enjoy functions auto-completion (because you don’t remember them all… right?), live templates and easier life while you’re editing that theme.
0. Grab a decent PHP code editor
In this example I’ll use PHPStorm which is my favourite, no affiliate but pure love. I’ll use the EAP (Early Access Program) version simply because it’s free and good enough! Grab it here:
1. Create new project, connect it to server and enable WordPress plugin integration
Create and connect project
When editing theme that contains lots of files on live site its great to not need to re-upload every second and even more important, to not do it manually.
So let’s create empty project for editing our theme. After it’s loaded click on:
- Tools \ Deployment \ Configuration
- then click on green plus sign (Add Server – you can see 2nd screen below), give it a name and choose either FTP (insecure) or SFTP
After that we can configure following parameters:
SFTP Host & Port: your host or IP connection
Root path: the location of your site on the server
In order for auto-upload to work we’ll configure Deployment path in Mappings tab as in here.
We’ll then click on “Use as Default” option to mark this server as default for current project, then OK/Apply to save settings.
Now we can explore our server within editor: click Tools \ Deployment \ Browse Remote Host.
Enable auto-uploading, downloading theme and WordPress files for WP Integration Plugin in PHPStorm:
We can as well enable and disable automatic upload on any changes (click on Automatic Upload in Tools \ Deployment).
With this option enabled we’ll download (right click on folder in Browse Remote Host window) following files and folders:
– theme we want to edit:
– WP files required for WordPress Integration Plugin in PHPStorm:
Enable WordPress integration plugin in PHPStorm
The integration plugin is tremendous help when working in WP. Using it allows PHPStorm to show you the numbers of arguments & adds auto completion among many other great features. It will as well save a lot of your time so using it absolute must/a no-brainer! Go into:
> Project \ Settings \ Plugins
Start searching for WordPress, if its not there click Install JetBrains plugins
Make sure it’s installed, after that go to Language & Frameworks \ PHP \ Frameworks and make sure “WordPress installation path” is set to your local directory with wp-admin and wp-includes folders you’ve downloaded.
Click apply and we’re done, PHPStorm restart will be required.
2. Editing your theme
Creating child theme
First we will create a child theme of the one that we want to modify (Twenty Seventeen). To do that:
- we’ll create folder in /your/wordpress/path/wp-content/themes/twentyseventeen-child
- create a styles.css file inside it with following content:
Theme Name: Twenty Seventeen Child
Theme URI: http://example.com/twentyseventeen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://somedmoain.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyseventeen-child
Where Template is the directory of parent theme.
3. download our twentyseventeen-child folder (the same way as we’ve done with parent theme)
After that our new child theme should show up in your WordPress \ Appearance \ Themes section.
Editing child theme
In order to replace or change parts of parent theme we’ll create adequate files in child’s folder theme. So if we want to edit header which is original’s theme header.php file we’ll just copy that file to our child-themes folder.
Take file from TweentySeventeen theme that comes with WordPress:
Copy that file in your child-themes folder we can change it to this:
After changing it let’s refresh the page and see if our changes are there, if they’re we’re good to start!
Finding templates responsible for parts that we want to change
You might already know that, but WordPress templates often include loads of other template files, function files etc.
Here we’ll see how we can find a PHP file to edit for certain element from the theme. If we can’t find it in any files it’s probably somewhere in the database.
1st. Editing WordPress templates standard
WordPress templates are quite easy, check the main files main files here – single.php, header.php, category.php are pretty self-explanatory.
2nd. Editing templates that don’t follow standards or are messy
In case your template is simply to complicated/nested or it’s not following default structure we’ll use the Find in Path feature of PHPStorm.
A lof of times the easiest way is to locate the element on page, see it’s code in browser and search for parts of that code in files.
Here’s how we can do this:
- Locate element on page, right click, then Inspect Element
- Searching for whole text of element might not work as often they’re build up dynamically so we’ll search for check the “id”, “class” attributes – see picture below.
3. Copy that text (in our case class or id), go to your PHPStorm and click Edit \ Find \ Find in Path. Select “In Project” and paste value for search (site-header).
Now we’ll see all the files that are referring to that class, it might be in multiple files or just one, double click the result to go to file that you want to edit. Make your changes and hit CTRL + S (or CMD + S) to save them, if auto-upload is enabled you should see a small window letting you know that file was successfully uploaded.
As you could see through this post editing and creating your own themes in WordPress is really not that hard, and with the right setup (including good PHP editor WordPress integration plugin) it can make your learning and theme modifying experience much easier and better.