This Is How To Change Resource Paths In Your WordPress Custom Theme
As a WordPress developer, one of the first things you'll need to do when creating a custom theme is to properly enqueue your site's stylesheets and JavaScript files. By default, WordPress looks for these resources in your theme's root directory, but what if you want to organize your files in a more structured way?
In this article, we'll walk through the process of changing the resource paths in your WordPress theme to point to an "assets" folder, where you can neatly store your CSS, JavaScript, images, and other files.
Why Move Resources to an "Assets" Folder?
There are a few key benefits to organizing your WordPress theme's resources in an "assets" folder:
-
Better Code Organization: Keeping your CSS, JS, and other assets in a dedicated "assets" folder helps maintain a clean, structured codebase. This makes it easier to navigate and manage your project files, especially as your theme grows in complexity.
-
Improved Performance: Serving static assets like CSS and JavaScript files from a separate folder can slightly improve your website's performance, as the server doesn't have to search through your entire theme directory to find them.
-
Easier Deployment: When you're ready to deploy your theme, you can simply package up the "assets" folder along with your other theme files, making the deployment process more streamlined.
-
Version Control: Organizing your resources in a dedicated folder also makes it easier to manage your theme's files in a version control system like Git, as you can easily track changes to your assets separately from your other theme files.
How to Change Resource Paths in Your WordPress Custom Theme
To change the resource paths in your WordPress custom theme, you'll need to update the enqueue_scripts()
and enqueue_styles()
functions in your theme's functions.php
file. Here's an example of how you can do this:
/**
* Enqueue scripts and styles.
*/
function skb_scripts() {
wp_enqueue_style( 'skb-style', get_template_directory_uri() . '/assets/dist/css/styles.css' );
wp_enqueue_script('jquery');
wp_enqueue_script( 'skb-scripts', get_template_directory_uri() . '/assets/dist/js/main.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'skb_scripts' );
Let's break down what's happening in this code:
- The
skb_scripts()
function is responsible for enqueuing the CSS and JavaScript files for your theme.
- The
wp_enqueue_style()
function is used to enqueue the main stylesheet for your theme. Instead of pointing to a file in the root directory, we're now referencing a file located in the assets/dist/css/
folder.
- The
wp_enqueue_script()
function is used to enqueue the main JavaScript file for your theme. Again, we're pointing to a file located in the assets/dist/js/
folder.
- The
get_template_directory_uri()
function is used to generate the correct URL for the resources, based on the location of your theme's files.
- Finally, the
add_action()
function is used to hook the skb_scripts()
function into the wp_enqueue_scripts
action, which ensures that the resources are properly enqueued when the page loads.
In this example, we're using the "dist" folder to store the compiled, production-ready versions of our CSS and JavaScript files. This is a common approach when using a build tool like Webpack or Gulp to optimize and minify your assets.
If you're not using a build tool, you can simply store your uncompiled CSS and JavaScript files in the "assets/css/" and "assets/js/" folders, respectively.
Updating Your HTML Templates
Now that you've updated the functions.php
file to point to the new resource paths, you'll need to make sure your HTML templates are referencing the correct files.
For example, in your theme's header.php
file, you might have the following code to include the main stylesheet:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
You'll need to update this to match the new path:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/dist/css/styles.css">
Similarly, if you have any JavaScript files included in your templates, you'll need to update the paths to match the new location:
<script src="<?php echo get_template_directory_uri(); ?>/assets/dist/js/main.js"></script>
Handling Other Asset Types
In addition to CSS and JavaScript files, your WordPress theme may also include other types of assets, such as images, fonts, or SVG icons. You can follow a similar process to update the paths for these resources as well.
For example, to reference an image file located in the "assets/img/" folder, you can use the following code in your HTML templates:
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/my-image.jpg" alt="My Image">
Similarly, for font files stored in the "assets/fonts/" folder, you can update your CSS like this:
@font-face {
font-family: 'My Custom Font';
src: url('<?php echo get_template_directory_uri(); ?>/assets/fonts/my-font.woff2') format('woff2'),
url('<?php echo get_template_directory_uri(); ?>/assets/fonts/my-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
By following these patterns, you can ensure that all of your theme's resources are properly referenced and located in the correct "assets" folder.
Optimizing Your Asset Delivery
Once you've updated your resource paths, you might also want to consider implementing further optimizations to improve your website's performance. Some ideas include:
- Minifying and Concatenating CSS/JS: Use a build tool like Webpack or Gulp to minify and combine your CSS and JavaScript files, reducing the number of HTTP requests.
- Enabling Browser Caching: Set appropriate cache headers to ensure that your static assets are cached by the user's browser, reducing the need to download them on subsequent page loads.
- Serving Assets from a CDN: Host your static assets on a content delivery network (CDN) to improve loading times for users around the world.
- Lazy Loading Assets: Only load assets when they're needed, such as deferring the loading of non-critical CSS or JavaScript files.
By following these best practices, you can ensure that your WordPress custom theme is not only well-organized, but also highly performant and optimized for your users.
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your WordPress website and directly generate recommendations to fix them.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.