• Hey Guys,

    So I have been using Foundation 5 and JointsWP start theme to build websites. I start off with just using Foundation and build out the structure in HTML/CSS then I port it over to JointsWP. Most of the sites I have done have worked with no issues but this one seems to be causing some issues.

    I think my problem lies in where i’m calling all the JS files in my footer/header/ and the enqueue-scripts.php file that JointsWP comes with. I have tested a number of combinations things but can’t see to remove the errors the console is throwing up and also can’t get my sticky header to stop glitching out in chrome without breaking the mobile nav. I know this has something to do with all the different things i’m calling in the footer and enqueue-scripts.php file because I can get either one or the other working but not both, also my modal is broken to and I think that has something to do with it.

    Im hoping someone can give me some organization tips, take a look at what i’m calling and maybe let me know what should go where and when combining the two (foundation 5 and JointsWP) what can be removed?

    And maybe take a look at what I have now and tell me what’s wrong?

    Footer

    <script src="<?php bloginfo('template_directory'); ?>/assets/js/vendor/jquery.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_directory'); ?>/assets/royalslider/jquery.royalslider.min.js" type="text/javascript"></script>
        <script type="text/javascript">
    	  $(document).foundation();
    	             $(".royalSlider").royalSlider({
    		            // options go here
    		            imageScaleMode: 'fill',
    		            autoHeight: true,
    		            transitionType: 'fade',
    		            controlNavigation: 'none',
    		            navigateByClick: true,
    		            imageScalePadding: 0,
    		            imageAlignCenter: false,
    		            keyboardNavEnabled: true,
    		            keyboardNavEnabled: true,
    		            navigateByClick: true,
    		            sliderDrag: true,
    	        });
        </script>
        <?php wp_footer(); ?>

    Header

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/assets/royalslider/royalslider.css" type="text/css">
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/assets/royalslider/skins/default/rs-default.css" type="text/css">
        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/assets/css/custom.css" type="text/css"><!-- JS -->
    	<!-- JS -->
        <script src="<?php bloginfo('template_directory'); ?>/assets/vendor/modernizr/modernizr.js" type="text/javascript"></script>

    enqueue-scripts.php

    <?php
    function joints_scripts_and_styles() {
      global $wp_styles; // Call global $wp_styles variable to add conditional wrapper around ie stylesheet the WordPress way
      if (!is_admin()) {
        $theme_version = wp_get_theme()->Version;
    
    	// Removes WP version of jQuery
    	wp_deregister_script('jquery');
    
    	// Loads jQuery from vendor Files
        wp_enqueue_script( 'jquery', get_template_directory_uri() . '/assets/vendor/foundation/js/vendor/jquery.js', array(), '2.1.3', true );
    
        // Adding scripts file in the footer
        wp_enqueue_script( 'site-js', get_template_directory_uri() . '/assets/js/scripts.js', array( 'jquery' ), '', true );
    
        // Normalize from vendor files
        wp_enqueue_style( 'normalize-css', get_template_directory_uri() . '/assets/vendor/foundation/css/normalize.min.css', array(), '', 'all' );      
    
        // Adding Foundation styles
        wp_enqueue_style( 'foundation-css', get_template_directory_uri() . '/assets/vendor/foundation/css/foundation.min.css', array(), '', 'all' );
    
        // Register main stylesheet
        wp_enqueue_style( 'site-css', get_template_directory_uri() . '/assets/css/style.css', array(), '', 'all' );
    
        // Comment reply script for threaded comments
        if ( is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) {
          wp_enqueue_script( 'comment-reply' );
        }
      }
    }
    add_action('wp_enqueue_scripts', 'joints_scripts_and_styles', 999);
    ?>

    Thanks for any help guys!

    [Moderator Note: No bumping, thank you.]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Hi dcrowe!

    First what are the console errors that are being created? Have you tried with no active plugins to see if it could be a conflict?

    Second, I will mention that it is a better practice to enqueue your files whether they be CSS or JavaScript. At least that way you can declare any dependencies those scripts rely on.

    Thread Starter dcrowe

    (@dcrowe)

    So I removed the console errors, to be honest i’m not sure how I did that. But i’m still having issues with I think how my scripts are loaded.

    Like for instance. If I move <?php wp_footer(); ?> above where I call out all my scripts in the footer, my mobal starts to work like it should. But my ShiftNav pro stops working. If I keep it where it’s at my Modal won’t work right.

    This is the site in question if it makes a difference

    http://www.usachildcareaware.org.php53-11.dfw1-1.websitetestlink.com/

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘organizing header/footer/enqueue-scripts.php calls’ is closed to new replies.