I'm having a lot of difficulties linking JS and CSS files to my custom home page

  • I’ve been trying for several weeks to set up a custom home page on my WordPress site. I coded a page with the necessary PHP for WordPress to recognize it as a template. I choose that template when I’m setting up the page and that all seems to work great.

    The problem I’m running into is that I cant’ seem to get WordPress to recognize my external JS AND CSS files. I’ve tried using the CSS/JavaScript Toolbox plugin to link the files to the page. I’ve also tried creating a plugin to register the files using wp_register and adding the wp_enqueue to the page PHP file. Neither of these options seem to work because all I ever see is the basic HTML when I load the page.

    Will someone please help me try to figure this out. I feel like it should be much easier than I’m making it.

    Here’s the code I used for the plugin.

    function home_page_files() {

    //wp_enqueue_script('jquery');

    wp_register_script( 'add-home-js', get_template_directory_uri() . '/AnimatedContentMenu/js/jquery.easing.1.3.js', array('jquery'),'',true  );
    wp_register_style( 'add-home-css', get_template_directory_uri() . '/AnimatedContentMenu/css/style.css','','', 'screen' );

    wp_enqueue_script( 'add-home-js' );
    wp_enqueue_style( 'add-home-css' );

}

add_action( 'wp_enqueue_scripts', 'home_page_files' );
Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    Your code looks OK. Check the source HTML for the actual path to the files that’s inserted as meta links in the head section. There are various get-some-directory functions that don’t always return what you think they should. Checking the actual inserted path will confirm this. Also confirm your path string is correct with no typos. Don’t forget case makes a difference: ‘FileName’ != ‘filename’

    Thread Starter bguy0501

    (@bguy0501)

    Thank you so much for your feedback. I tried the below code in the head section of my custom home page along with the plugin coded above and it broke my site. Any ideas?

    <?php
		function home_page_script() {
			wp_enqueue_script( 'add-home-js' );
		}

		add_action( 'wp_enqueue_scripts', 'home_page_script' );
		?>
		<?php
		function home_page_style() {
			wp_enqueue_style( 'add-home-css' );
		}

		add_action( 'wp_enqueue_style', 'home_page_style' );
		?>
    Moderator bcworkz

    (@bcworkz)

    The template page may be too late, such code does not belong there anyway, shouldn’t have broken the site though, strange. If you’re pressed, you could hardcode links temporarily, though there could be a dependency issue. Focus on getting the plugin code working properly, no need for it in more than one spot, the location is not the problem, plugins are fine for this.

    Is your home page head section calling wp_head()? It must.

    Thread Starter bguy0501

    (@bguy0501)

    Thanks.

    I originally had it hardcoded just to see how it would look but it broke whenever I would update plugins.

    I did not have wp_head() included in my file. I tried the below code in the head section of the page and it partially worked. 

    <?php
   add_action('home_page_files');
   wp_head();
   ?>

    I could tell some of the styling was updated, but it didn’t look like any js was applied. It actually showed all of the js and css code from my linked files on the page. Do I need to add jQuery as a dependency on this page too, or would the plugin take care of that?

    Thanks again for your help.

    Thread Starter bguy0501

    (@bguy0501)

    Here’s a link to the page.
    https://www.schultzoutdoorsports.com/test/

    It seems like it’s finding the files just fine, it’s just not recognizing what the code is telling it to do. Not sure why that would happen.

    Thread Starter bguy0501

    (@bguy0501)

    I figured out why it was showing the code. I still had the CSS and JavaScript Toolbox plugin enabled which was also trying to link those files to the page. When I disabled the plugin the code went away. The page still doesn’t function correctly though.

    Moderator bcworkz

    (@bcworkz)

    That add_action('home_page_files'); won’t do anything but throw a warning and a bunch of notices. Yes, the wp_register_script() should handle the dependencies, no need to do anything else.

    It’s strange you’re not getting any related meta links at all. Do you have WP_DEBUG defined as true in wp-congig.php? It seems something is preventing wp_enqueue_script() et al from being able to complete their tasks. Don’t leave WP_DEBUG as true for any length of time on a live site though.

    You should also see if deactivating all other plugins will allow the meta links to show up, and even perhaps switching to a default theme for a quick test. It seems there’s a conflict somewhere, this is the only way to identify it.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘I'm having a lot of difficulties linking JS and CSS files to my custom home page’ is closed to new replies.