WordPress CSS & JS files failing to enqueue properly

My attempt to integrate my CSS and JS files with WordPress has not been successful. Although my CSS works through the Custom CSS tab, this is not an ideal solution. Below is the code from my functions.php file for your reference. Can you help me troubleshoot this issue?

Here is my PHP Code...

<?php

function custom_script_enqueue() {
    wp_enqueue_style( "custom-style", get_template_directory_uri() . "/css/custom.css", array(), "1.0.0", "all" );
    wp_enqueue_script( "custom-script", get_template_directory_uri() . "/js/custom.js", array(), "1.0.0", true );
};

add_action( "wp_enqueue_scripts", "custom_script_enqueue" );

function custom_theme_setup() {

    add_theme_support("menus");

    register_nav_menu("primary", "Primary Navigation");
    register_nav_menu("secondary", "Secondary Navigation");

}

add_action("init", "custom_theme_setup");

add_theme_support("custom-background");
add_theme_support("custom-header");

function custom_widget_setup() {

    register_sidebar(
        array(
            "name"  =>  "Sidebar",
            "id"    =>  "custom-sidebar-1",
            "class" =>  "custom-widget",
            "description" =>    "Custom Sidebar",
            'before_widget' => '<li id="%1$s" class="widget %2$s">',
            'after_widget'  => '</li>',
            'before_title'  => '<h2 class="widgettitle">',
            'after_title'   => '</h2>',
        )
    );

}

add_action("widgets_init","custom_widget_setup");

?>

Answer №1

After some troubleshooting, I was able to identify the issue independently. Turns out, the paths required capital letters for the "JS" and "CSS" directories, despite what the web host had suggested. Their advice was based on the configuration of their Linux server, but it proved to be incorrect. It was a bit confusing for them when my solution worked flawlessly.

Fortunately, the problem has been resolved. If you encounter a similar issue, don't hesitate to experiment with upper or lower case letters in your functions.php file paths!

Here's the updated code snippet:

 wp_enqueue_style( "test", get_template_directory_uri() . "/CSS/test.css", array(), "1.0.0", "all" );
    wp_enqueue_script( "test", get_template_directory_uri() . "/JS/test.js", array(), "1.0.0", true );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to upload numerous profiles into the MYSQL database using this WP template?

Apologies in advance if my question is unclear, but in simple terms, I am looking to automate the process of uploading hundreds of profiles and jobs to this WP template: The developer of this template has stated that it is not possible to do this through ...

Create a Boostrap navbar with a form and links aligned to the right using the navbar

I'm trying to use navbar-right on a navbar-form and a navbar-nav, but the form ends up on one row and the nav links on another row on the right. How can I make the navbar display the brand on the left and have a search field followed by nav links on t ...

Achieving and maintaining the center alignment of a horizontal dropdown menu

Struggling with creating a fixed, 100% width nav bar that stays centered when the page is resized? The drop down menu headings are causing issues as they seem to float left instead of staying centered. Not sure how to fix it? Take a look at the live resul ...

Display a confirmation modal before triggering $routeChangeStart in AngularJs, similar to the window.onbeforeunload event

When a user chooses to stay on the page as the route starts to change, the original route remains intact but the form directives are reloaded. This results in the loss of all checkbox and input values, resetting them to their defaults. If a user closes th ...

Having trouble getting an HTML form to function with Ajax and PHP?

Seeking assistance from anyone who can lend a hand. I am delving into the complexities of Ajax, and I'm encountering issues where it seems like the script is being completely ignored or perhaps I'm just making a rookie mistake. Prior to display ...

Troubleshooting the issue with ajax loadXml callback functionality

My table is empty and I can't figure out where the mistake is. I want to use the console to debug, but I'm not sure how. Update: I found a working sample here http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_xml2. I used similar code, bu ...

Having trouble executing the typescript build task: Command 'C:Program' is not valid as an internal or external command

I'm currently working on converting typescript code to JavaScript and have been following the steps outlined in the documentation. To automate the compilation of .ts files, I set up a watch task triggered by pressing Ctrl+Shift+B. However, upon runni ...

What is the best way to halt a jQuery function when hovering over it?

Currently, I have a jQuery function set up to run on setInterval(). However, I am looking for a way to pause the interval when hovering over the displayed div and then resume once no longer hovering (i.e., continue cycling through the divs). Does anyone ...

Display HTML content using JavaScript only when a checkbox is selected

Currently, I am updating an HTML form to show additional subsets of questions based on the selection of a "parent" checkbox. The current implementation works well, but I am wondering if there is a more efficient way to achieve this without having to rewrit ...

Steps for applying background color to a chosen element

Using a specific template, I have listed topics in the following way: //Template used for topic list display %li.topic{:topic_slug => "<%=topic.slug%>", :topic_name =>"<%=topic.text%>"} %a{href: "#!/topics/<%=topic.slug%>" } <%= ...

Protruding button on the surface of the form

I'm struggling with a form layout issue. Here's what it looks like: https://i.sstatic.net/arfJQ.png Removing the mb-3 class doesn't solve the problem, it just removes the spaces between the inputs. How can I make sure the button remains in ...

Encountering XMLHttpRequest errors when trying to make an AJAX POST request

I'm encountering an issue with a modal containing a form for submitting emails. Despite setting up the ajax post as usual, the submission is failing consistently. The console displays the following two errors: Setting XMLHttpRequest.withCredent ...

How can we efficiently add a new node to a polyline link in gojs while maintaining the original positions of points in the links adjacent to the inserted node

After posting a question on StackOverflow (Seeking Javascript library for displaying and editing networks of nodes and edges), I was directed to the gojs splice sample. The sample has been helpful, but I've hit a roadblock trying to achieve the speci ...

ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected o ...

`Connected circles forming a series in d3`

I am currently working on developing an application where the circles are positioned such that they touch each other's edges. One of the challenges I am facing is with the calculation for the cx function. .attr("cx", function(d, i) { return (i * 5 ...

Accessing the initial element inside a DIV using CSS

In the structure of my code, I have a WYSIWYG editor enclosed in a table within a div element: <div class="mydiv"> <li> <table>My WYSIWYG</table> </li> </table> Within the WYSIWYG editor itself, there a ...

Determine the card type based on the card number

My array of card types is structured like this: var cards = new Array(); cards [0] = {name: "VISA", length: "13,16", prefixes: "4", checkdigit: true}; cards [1] = {name: "VISA_DELTA/ELECTRON", length: "16", prefixes: "417500,4917,4913", checkdigit: tr ...

What is the best way to notify my form that a payment has been successfully processed?

I'm working on a form that has multiple fields, including a PayPal digital goods button. Clicking on this button takes the user out of the website's workflow and into a pop-up window for payment processing. Once the payment is completed, the retu ...

How can I alter the columnWidth setting in Masonry when detecting a different screen width or window width?

I am currently working on adjusting the layout of my masonry script to respond accordingly when the browser window or screen width drops below a certain threshold. However, I am running into issues as it seems to break whenever I try to make this adjustmen ...

To implement the replacement of text with a selected item in AngularJS, simply

I have a dropdown in my HTML: <div class="dropdown"> <button class="dropdown-toggle" type="button" data-toggle="dropdown" ng-model="yearName">Filter by year <span class="caret"></span></button> < ...