How to easily add your own custom CSS, JavaScript and PHP to a WordPress website

There are many reasons you might want to add custom code to your WordPress website. You might want to make a CSS tweak, or you might want to add a small piece of custom JavaScript or PHP code that does exactly what you need it to do for your particular use case which may not be covered by a plugin.

There are many ways of achieving this.

One way is to use a plugin, such as WPCode or Code Snippets, which allow you to write code in an editor in the admin section of your website.

Another way is to create a child theme of the theme you're currently using, and add any custom code to that theme inside functions.php and style.css. There's an excellent Smashing Magazine article about this you might want to read: How To Create And Customize A WordPress Child Theme.

However, there's also the simple and often overlooked method of writing and installing a custom plugin.

The prospect might sound daunting at first, but, as you'll soon discover, it's really easy to start writing a WordPress plugin. As an example, the Hello Dolly plugin that comes with every new WordPress installation is a single file containing about 100 lines, most of which are CSS, comments, and the lyrics of the classic Louis Armstrong song.

In this article we'll add a copyright note at the bottom of each page, containing a company name and the current year, which will be dynamically generated by PHP.

Creating and installing a simple custom plugin

As previously mentioned, a plugin can be a simple PHP file, and that's what we're going to write for the purposes of this article.

A good name for the plugin is something related to your website title, to minimize the chance of overlapping with an existing plugin from the WordPress Plugin Directory. If the plugin name clashes with an already existing plugin, then there's a chance that WordPress will overwrite your plugin with the one from the Directory, and we'd like to avoid that.

Start by creating a new PHP file in a text editor. Any editor will work, including macOS TextEdit or the Windows Notepad, but if you want syntax highlighting and other tools to help with code development, you might also cosider Visual Studio Code or even a full-fledged Integrated Development Environment such as PhpStorm.

Since this is an example, we're going to call this new file example.php, but you should name it according to your site title. If your site is called Mimi's Cookies, you might call it mimis-cookies.php.

In order for this file to be considered a plugin, it will need to start with a comment containing the plugin name. The plugin name can be anything, but it's a good idea to call it something you're going to spot easily when browsing through the installed plugins in the admin section. We'll call it “Example Custom Code”, but this again is a place where you can write your site's title, to make it easily distinguishable from the other plugins. You might call it “Mimi's Cookies Custom Code” for example.

<?php

/**
 * Plugin Name: Example Custom Code
 */

That's it! This is a valid WordPress plugin.

Installing it is just as easy, and it only involves two steps: creating a ZIP archive with the PHP file inside, and uploading the archive to your website's WordPress admin section.

Let's start by first creating a ZIP archive containing the plugin code. Right click the PHP file you just created (example.php or what you named your file) and select “Compress to ZIP file” on Windows or “Compress "example.php"” on macOS. This will create a ZIP archive with the PHP file inside.

Now that we have the plugin code in a ZIP archive, we can go to the admin section of the WordPress website to upload it. If your site is example.com, then the admin section is usually accessible at https://example.com/admin/. In the admin section, you can select Plugins › Add New, and then click the “Upload Plugin” button at the top of the screen, next to the “Add Plugins” page title.

This will open a panel asking you to upload a ZIP. Click the “Choose File” button and select the ZIP you just created, then click “Install Now”.

If everything went well, you should be getting a message informing your that the plugin was installed successfully. To run the code in the plugin, you just need to activate it, and you can do that by clicking the “Active Plugin” button.

Everything is ready and your plugin is now running!

To make changes to the plugin, you can edit the PHP file in your text editor then ZIP it and upload it again. Make sure that both the ZIP and the PHP files have the same name, otherwise you will create a new plugin instead of replacing the current one. To apply the changes, you will need to choose to replace the current plugin installed on the server with the new plugin you just uploaded.

You can also edit the plugin directly inside the admin section of your website by visiting Tools › Plugin File Editor, or Plugins › Plugin Editor, depending on the WordPress version you're using. Once there, select the “Example Custom Code” plugin (or what you named your plugin), then click the “Select” button.

This will open the plugin code you just wrote and allow you to edit it. Clicking the “Update File” button will save your changes and apply them immediately.

Implementing the custom code

Now that we have a simple plugin installed, we can start implementing our functionality, by either editing the PHP file locally using an editor then making a ZIP of the code, uploading it and activating it, or by editing the code in the admin section directly.

Editing the code in the admin section has the advantage of being very quick, but if your code grows and you start relying on some more advanced functionality that the simple editor provided by WordPress can't deliver, then it can make more sense to edit the file locally. You can try both methods and decide which method suits you best.

If you recall, what we wanted to do was to add a copyright note at the bottom of each page, containing a company name and the current year, dynamically generated by PHP.

To do that, we'll need to hook into the WordPress wp_footer action and add our own code. So let's do that. Edit the plugin code to add a function which will show the company name when WordPress displays the footer.

<?php

/**
 * Plugin Name: Example Custom Code
 */

function example_wp_footer() {
    echo 'Example Company';
}

add_action( 'wp_footer', 'example_wp_footer' );

In this code, add_action() tells WordPress to call our example_wp_footer() function when the WordPress theme renders the frontend page footer. Where this appears depends on the theme, and not all themes show a footer, but most do.

You'll also note that we prefixed the name of our function with example_ to make sure we're not re-defining other existing functions. We can't call our function wp_footer because that name is already taken by WordPress. And while the prefix can be anything, it's best to keep the naming consistent with the name of the plugin, in this case example_ or, in your case, the title of your website, such as mimis_cookies_.

If you now refresh the frontend, all pages should have this new footer! And all it took was writing a PHP file with under 10 lines of code.

Let's also add a copyright symbol and the current year, which can be obtained using PHP's date() function. date() takes a format as the first argument, and Y is the format character representing the year, so date('Y') will return the current year.

<?php

/**
 * Plugin Name: Example Custom Code
 */

function example_wp_footer() {
    echo '&copy; ' . date( 'Y' ) . ' Example Company ';
}

add_action( 'wp_footer', 'example_wp_footer' );

It's not the best looking footer though, so let's add some styling as well. To do this, we'll add a <style> tag inside <head> using a wp_head hook, write a CSS class, then apply the class to our footer.

<?php

/**
 * Plugin Name: Example Custom Code
 */

function example_wp_head() {
?>
    <style>
        .example-footer {
            margin: 1rem;
            text-align: center;
        }
    </style>
<?php
}

function example_wp_footer() {
?>
    <div class="example-footer">
        &copy;
        <?php echo date( 'Y' ) ?>
        Example Company
    </div>
<?php
}

add_action( 'wp_head', 'example_wp_head' );
add_action( 'wp_footer', 'example_wp_footer' );

Looking good!