16 Sep
If you’re reading this article, you’re probably already a WordPress user and already have experienced the easy to use, the graphical user interface of the WordPress platform. If your website is based on a theme, I’m sure you discovered that the themes could have some limitations when using the graphical user interface.
Themes are composed of, HTML, PHP, CSS, and JavaScript WordPress source code files. I will cover what these languages do in a bit more detail later on in the article. We’re not going to go into the specifics of the coding languages here, and this article will already assume you are proficient in these languages or at least you will be by the time you come to do the updates. If you’re not, and this is something you wish to learn, there are a lot of useful articles and training courses online. Alternatively, if you’re not confident in editing code yourself, WP Agents have a team of experts who can perform the updates for you. Updates are included in many WP Agents WordPress maintenance packages. So no unexpected bills at the end of the month.
Before editing any WordPress code, it is imperative to back up your website; then if any irreparable damage does occur, your website can be quickly restored.
Using a child theme is also a good idea, as this enables you to make localized modifications without changing the source code and changing any functionality of the parent theme. One of the main benefits of using a child theme is that any updates to your parent theme, including those from your theme developer don’t affect your modifications.
Types of coding language and their primary uses
I am going to cover the four most common languages used in editing your theme below. The purpose of this section is mainly to give those who are not yet proficient with these languages an overview of their uses and where to start should they wish to learn.
HTML
HTML stands for Hypertext Markup Language and is used by web browsers to interpret and display text and images. HTML is one of the most fundamental languages to learn and is often the starting point when learning website design.
JavaScript
Java Script is mainly used in front end website development to make pages more dynamic by manipulating page elements that are not possible through HTML.
One of the main benefits of using JaveScript is that it runs inside a client browser and process commands on a computer rather than on a server; this reduces server load and makes your website run faster.
PHP
PHP is used for a whole host of applications and is open source. It is primarily used alongside dynamic data-heavy websites to collect form data, generate dynamic content, or send and receive cookies. PHP runs on a server, so it doesn’t use the users’ computer to run, which means your server processes these commands. As well as server-side scripting, PHP is used for command-line scripting, which means it does not need a browser to run. Command-line scripting is particularly useful for running complex commands or grouping commands together, so you don’t forget a particular syntax each time you have to write it.
CSS
CSS stands for Cascading Style Sheets and determines the look of your webpage, including fonts, colors, and layout. CSS also allows you to adapt your website for presentations on different devices such as mobile and desktop.
Using the Theme Editor
On a live website, you can access the Theme Editor under the Appearance menu. Here you can make changes to the design and structure of your theme. If you have followed the above advice and are using a parent/child theme combination, you can toggle between editing the two in the top right.
Once the necessary changes have been made, make sure you click on the Update File button at the bottom of the page.
If your theme editor is missing, there may be a third-party code editor on your WordPress dashboard, or there may be a security plugin hiding this option.
Usually, the HTML, CSS, PHP, and JavaScript files are found via the Theme Editor. However, if you are editing HTML you don’t need to edit the source code, in classic editor mode, you can switch from the visual to the text editor on your web pages.
How to edit JavaScript
The first thing to check is that you have JavaScript files on your template under the Theme Files heading on the right-hand side of your Theme Editor. Most themes come with JavaScript files installed. If you’re using a third-party plugin, then you are often making a call to a JavaScript file hosted elsewhere.
For the purposes of custom editing, you can call an existing file using the following script
In many cases, you will want to globally change the header or footer across all pages on your website. The best place to add the JavaScript for global changes is in the header or footer .php file. These files can are accessed via the right-hand side folder structure of the Theme Editor.
It is essential to add the JavaScript between the opening and closing brackets of the .php file.
Note: If you are editing the header and footer files of the template, I would strongly recommend using a child theme as WordPress often overwrites these on updates.
There are also third-party plugins that allow you to edit the header and footer without changing the source code such as Insert Headers and Footers or Header and Footer Script Loader.
How to edit CSS
CSS files are also accessed via the Theme Editor, in a similar way to JavaScript files. Just make sure you click the Update Files button at the bottom of the page to apply any changes.
Alternatively, you may wish to use the Customise option under Appearance. This option will allow you to edit the CSS through the WordPress graphical interface. Depending on your theme, there may also be a custom CSS editor built-in.
Before you start editing any custom code on your website, it is imperative that you fully understand what you are changing and how this will affect the functionality of your website. If your website needs customizing, but you’re unsure of how to undertake the work yourself, WP Agents have teams of experts on hand to customize your WordPress code. Updates are even included as part of their WordPress maintenance packages. You can book a call to talk to a WordPress expert today WP Agents.
