Modify your WordPress core without programming

Did you know that you can modify your entire WordPress even if you don’t know how to program?

And no, I’m not referring to simply using a Builder, but rather to those modifications you need to make on your website that your back-end interface does not allow you to modify.

By being clear about a few simple concepts, you’ll realize that you can modify almost anything you need. Obviously, if you have a programming background or technical knowledge, you’ll be much more agile and have an advantage over those who don’t. But with these simple tricks, as long as you test the solutions in a Staging environment, you’ll be able to carry out almost any modification.

In this post, we will explore how to make modifications to your WordPress site, even if you have no programming experience. Through a video and a detailed explanation, you will learn the basic concepts about the structure and operation of a web page, and how you can apply this knowledge to optimize and customize your site.

You will see how to use tools such as the Chrome Console and selectors in CSS and JavaScript to make specific adjustments to design and functionality. Even how to update and customize your site safely without losing modifications when updating the main theme.

The goal of this post is to provide you with the necessary skills to understand and improve your website on your own, ensuring that you can manage and maintain your online presence effectively.

I teach you what you need in the video so you can execute it. But in this article, we’ll also cover the necessary knowledge in addition to your chat.gpt account.

How a website works

Only if we know how a website works will we know how to optimize and improve it.

No matter how much artificial intelligence is used, to get the right answers you have to ask the right questions. And for this, you need to understand and be very clear about the difference between server-side programming and user-side programming. Which is not the same as front-office and back-office.

User-side programming is the programming language that runs in the browser. Today, the only one that does this natively is JavaScript. While it’s true that there are other languages such as TypeScript, these are ultimately converted into JavaScript so that the browser can execute them and act accordingly.

What does all that mean? Basically, that changes only occur once in the browser, making loading and rendering the work of the user’s device, an issue that from a SEO perspective we must take into account because of how Googlebot processes it from its headless Chromium and how it processes JavaScript during rendering.

If you want to go deeper, you can always read the article on how to use JavaScript as a patch.

On the other hand, we have server-side programming, which consists of the languages that are processed on the server before sending the files to the user. This can be much more varied, but for WordPress we could reduce it to PHP and the language of the Server Software being used (Apache, Nginx, LiteSpeed…)

The explanation of front and back, simply to clarify concepts, is much simpler: what the end user sees and the control panel with a graphical interface. In both cases there is server-side language and user-side language. That’s why I think it’s good to clarify this to avoid confusion of terms.

Once we are clear about this, it will not only serve the purpose of this article itself, but will also allow us to better understand how other important aspects work for anyone who works with websites, such as how cache works and its types.

Chrome Console, elements, and selectors

It’s important that we learn how to use the Chrome Console to learn how to detect elements and identify those we want to remove, change, or add.

I said we could do everything without programming, not that it would be easy.

Selectors

Selectors, as their name suggests, are patterns used to select elements in an HTML document, on which we can apply CSS styles or modifications with JS, affecting that part of the code.

In case you don’t know how to properly select selectors, understanding the elements of an HTML tag, we can rely on the Chrome console.

Copy Selector

You can copy the characteristics you need from the selector, and it will even add the document QuerySelector for JS if you choose to copy the JS path for something specific.

Examples:

#intro > div > h1

document.querySelector("#intro > div > h1")

The selector it gives us doesn’t mean it’s unique and it could affect other parts of the website, so we may need to be more specific. For that, you can ask in my Discord (link in the footer).

What is a Child Theme in WordPress

I usually like to create a theme from scratch. But if the website is already built or you don’t want to resort to advanced programming, you can edit your theme and still retain the ability to receive updates.

A “child” theme in WordPress is a theme that inherits the functionality and styling of another theme, known as the “parent” theme. Child themes are a safe way to modify an existing theme without altering the original files of the parent theme. This makes it easier to update the parent theme without losing the customizations made in the child theme.

The code shown below is just simple examples. My goal in this post is not for you to program, but for you to know how to ask the AI for the code that you will copy and paste.

Steps to create and use a child theme in WordPress:

1. Create the child theme folder:
   • In the themes directory of your WordPress installation (wp-content/themes/), create a new folder for your child theme. For example, if your parent theme is called “twentytwenty”, you could name your child theme “twentytwenty-child”.
2. Create the style.css file:
   • Inside the child theme folder, create a file called style.css. This file must contain the child theme information, including the name of the parent theme. For example:
     css

     /*
Theme Name: Twenty Twenty Child
Template: twentytwenty
Version: 1.0
*/

   • The “Template” attribute must be the name of the parent theme folder.
3. Create the functions.php file:
   • It’s not mandatory for a Child Theme, but it is if you want to add the modifications you intend to make
   • To properly load the parent theme styles, use the following code in your functions.php:
     <?php
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
function enqueue_parent_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

4. Activate the child theme:
   • Go to your WordPress admin panel and navigate to Appearance > Themes.
   • Find your child theme and activate it.
5. Customize the child theme:
   • You can now make modifications directly in the child theme files, such as style.css for style changes or functions.php for additional functionality.

Using a child theme allows you to customize your site safely, ensuring that customizations are not lost when the parent theme is updated.

Functions.php

The functions.php file is an essential component of any WordPress theme, including child themes. It works as a configuration file that allows theme developers to add specific functionalities or modify default WordPress behaviors through PHP code.

In this way, if we edit the functions file, we can customize and edit the behavior of our WordPress website without fearing overwrite issues in future updates. It is the “right place” to edit it.

Key functionalities of the functions.php file:

1. Add new functions: You can write your own functions in functions.php to add or modify site features. This includes defining new widget areas, customizing headers, and more.
2. Override or extend functions: If WordPress or your parent theme provides certain functions, you can modify or extend them. For example, you can change the default length of post excerpts or add support for theme features such as featured images.
3. Hook functions into WordPress (hooks): WordPress provides “hooks”, which are points in the WordPress execution flow where you can “hook” your functions to modify the CMS functionality. Hooks can be actions or filters:
   • Action hooks: They allow you to add or change functionality at specific points in the WordPress lifecycle.
   • Filter hooks: They allow you to modify data before it is sent to the browser or saved in the database.
4. Load scripts and styles: You can use functions.php to control which JavaScript and CSS files are loaded and when. This is useful for improving page load performance and customizing the appearance of your site.
5. Modify the WordPress admin area: With functions.php, you can make changes to the admin area, such as customizing the dashboard, adding or removing menu items, and changing user capabilities.

If you want to expand and learn more about modifying WordPress without touching the template, you can always modify the output buffer with PHP.

Hooks

Hooks in WordPress are interaction points within the code that allow developers to alter, customize, or extend the standard WordPress functionality. Hooks are divided into two main types: actions and filters.

Here it’s important to understand the combination we can make or use between JavaScript and PHP for whatever we need to accomplish.

Action Hooks

Action hooks allow you to execute code at specific moments during WordPress execution. For example, you can use an action hook to add a block of code when a page loads, or to modify what happens right after a user registers on your site.

Although in the video I show practical examples for SEO, here are some basic examples:

• Customize the footer: You can use wp_footer to add scripts or additional information just before closing the </body> tag.
  function add_custom_footer_content() {
echo '<p>This is a custom message in the footer!</p>';
}
add_action('wp_footer', 'add_custom_footer_content');


• Add a message after publishing a post: Use the publish_post hook to send a notification or perform an action after a post is published.
  function post_published_notification($post_id) {
$post = get_post($post_id);
$author = get_userdata($post->post_author);
// Send an email to the author
wp_mail($author->user_email, "Post published", "Your post has been published.");
}
add_action('publish_post', 'post_published_notification');


Filter Hooks

Filter hooks are used to modify data before it is saved to the database or before it is sent to the browser. This allows you to alter text, images, and any other dynamic data.

Although in the video I provide practical SEO examples, here are some basic ones:

• Modify post content: You can use the_content to add to or modify post content before it is displayed.
  function modify_post_content($content) {
if (is_single()) {
$content .= '<p>Thank you for reading this post!</p>';
}
return $content;
}
add_filter('the_content', 'modify_post_content');


• Change the post title: Use the_title filter to modify post titles before they are displayed on the page.
  function change_post_title($title) {
return 'Prefix: ' . $title;
}
add_filter('the_title', 'change_post_title');


Potential of Hooks

The potential of hooks lies in their ability to customize almost any aspect of a WordPress site without the need to modify core files, making it easier to update the system without losing customizations. Knowing how and when to use hooks allows you to:

• Automate processes such as sending emails or updating metadata.
• Integrate external services, such as social networks or analytics platforms.
• Customize the user experience by adjusting the interface and interaction based on user behavior.
• Develop specific functionalities for particular website needs, such as custom forms, API integrations, or mobile adaptations.

Understanding how hooks work and what they can do is essential for any developer looking to extend or customize WordPress efficiently and safely. With this knowledge, you can turn to ChatGPT to code specific functions you need, simply by explaining what you want to achieve and at what point in your site’s flow you want it to happen.

Head and Footer

In the context of a web page, the “head” and the “footer” are specific sections that fulfill particular roles in both the structure and functionality of the site.

Head

The <head> of an HTML document is the section that contains metadata, links to stylesheets, scripts, and other instructions that the browser must read before rendering the page. It is not directly visible in the user interface. Common elements in the <head> include:

• Page title (<title>): displayed in the browser tab.
• Links to CSS (<link>): used to style the page content.
• Scripts (<script>): some scripts may be included in the head so they load before the page content.
• Meta tags (<meta>): can define character encoding, viewport settings, page author, and other metadata.

Footer

The “footer” is a section located at the bottom of web pages. It usually contains copyright information, links to privacy policies, contact information, and other relevant links. Although it is part of the visible page content, technically in HTML it is represented by the <footer> tag within the document body (<body>).

Modifying Head and Footer with Hooks in WordPress

WordPress provides specific hooks that allow you to inject or modify content into the <head> and <footer> of pages.

• wp_head: This hook is triggered inside the <head> tag in your theme’s header.php file. It is useful for adding styles, scripts, or any other element you need to load in the head.
  function add_custom_script() {
echo '<script src="mi-script.js"></script>';
}
add_action('wp_head', 'add_custom_script');

• wp_footer: Similar to wp_head, but it is triggered just before closing the </body> tag. It is ideal for scripts that should load at the end of the page so they don’t affect perceived load time.
  function add_footer_script() {
echo '<script src="my-script-footer.js"></script>';
}
add_action('wp_footer', 'add_footer_script');

If we don’t know how to add it via external files, we can simplify things and add it internally.

Modifications without creating new files

Example of an internal script in the <head>

Suppose you want to add a small JavaScript script in the <head> of your WordPress site to alter some aspect of the DOM before the page fully loads. Here’s an example of how you could do this using the wp_head hook:
wp_head:

This script runs once the DOM is fully loaded, which is useful for manipulations that depend on the presence of certain elements on the page.

Example of an internal script in the <footer>

If you want to make sure your script runs after all the elements on the page have fully loaded, you can use the wp_footer hook. This is ideal for scripts that need to interact with all page elements or that are heavy and could delay page loading if executed too early.

This script runs when the entire page has loaded, including images and other resources, which is ideal to ensure that all elements are present before manipulating them.

Considerations

When adding internal scripts directly via wp_head or wp_footer, it’s important to consider the specificity and necessity of the script. If the script is extensive or used across multiple pages, it may be more efficient to keep it in an external file and link to it to improve caching and code organization. However, for small snippets of code that need quick insertion without creating an external file, these methods are perfectly valid and commonly used in WordPress development.

Impact of JavaScript in Head and Footer

Where you place your JavaScript scripts can have a significant impact on performance and the functionality of your site:

• Scripts in the Head: Loading scripts in the <head> can be useful when you need the script to be available before the page content starts rendering (for example, critical scripts that affect visual display or immediate functionality). However, this can delay the rendering of the page because the browser must load and process these scripts before continuing.
• Scripts in the Footer: It is generally recommended to load scripts at the end of the page (before </body>) to improve perceived load time. This allows the HTML content to load and display to the user before scripts begin executing, which can improve user experience, especially on sites with many scripts.

If we want to modify an HTML element with a script as a patch because we can’t do it with PHP, we must ensure that the script loads afterward.

Understanding how and where to use these hooks for specific scripts can help you optimize both page load and user experience on your WordPress site.

Learning to be specific

Additionally, if we are specific with AI, we can ask it to load only on a group of pages.

Here’s a practical case. Let’s imagine we have an old website with poor post hierarchy, with many
<h1> where they shouldn’t exist. But from now on, they will be handled correctly.

We can load a script that saves us from manually modifying all those h1 tags to h2 tags:

I want an internal hook in the footer that runs a script that changes all <h1> tags to <h2> except the first <h1>, but only loads on WordPress posts that also have a date earlier than 21/03/2024

In this way, without knowing how to program, we’ve managed to save ourselves a huge amount of work.

This can also be done with any type of content that has a specific tag if we are not using tags, categories, or slug characteristics. Anything that our own imagination can cover.

Plugins

Plugins may sound familiar from everything available commercially; however, a plugin in WordPress is an extension that can be added to the system to expand its functionality or add new features without modifying the WordPress core. Plugins are essential for customizing and adapting a website to specific needs without altering WordPress’s original code, making system updates and content management easier.

I’ll go into more detail now, but in reality we can use a custom plugin like a much more organized functions.php, which also allows us to activate and deactivate the functions we need, move it around, and copy it to different projects we work on.

What is a WordPress plugin?

A WordPress plugin is a piece of software that integrates with the WordPress system to add new functionality or extend existing capabilities without modifying the WordPress base code. Plugins allow users and developers to customize and optimize their websites according to specific needs.

Basic plugin operation

A plugin works as an independent module within WordPress that can be activated or deactivated from the admin panel. When activated, the plugin can execute code, add new functions, or modify site behavior through hooks and filters that interact with the WordPress core.

• Integration: Plugins integrate via hooks (action hooks and filters) that allow modifying or adding functionality to WordPress’s standard behavior.
• Activation and deactivation: They can be activated or deactivated from the WordPress admin panel, allowing flexible management of features.
• Independence: They operate independently of the active theme, so functionalities are not lost when changing themes.

Typical plugin structure

A plugin may be composed of several files and directories that organize its code and resources. It commonly includes:

• Main plugin file: Defines the basic plugin information such as name, version, author, and briefly describes what it does.
• Function files: Contain the code that executes the plugin’s specific functionalities.
• Configuration files: Configure specific aspects of the plugin, such as connections to external APIs, user options, etc.
• Resource files: Include images, CSS stylesheets, and JavaScript scripts.

Usage examples

You could have a plugin that handles security aspects, another that adds custom post types, or one that manages SEO more efficiently. Each one will operate within its own “box,” affecting only the designated areas of the site.

Advantages of using plugins

• Flexibility: Allows adding or modifying website features without editing WordPress core files.
• Ease of maintenance: Updates and improvements to site functionality can be made without altering other components.
• Security: Reduces the risk of breaking core functionality when making adjustments or adding new features.

Plugin explanation

Better than me, in this case ChatGPT will explain how my plugin works:

Conclusions

Artificial Intelligence has enormous potential, and if we use it correctly as a copilot, it will allow us to reach places we never could before.