0

My issue is that only one of my functions works throughout the site the rest only work on the home page.

I am pretty sure I used the wp_enqueue_scripts correctly as well as get_template_directory_uri()

Here is my jsfiddle with everything working 100% https://jsfiddle.net/TonyTheOnly/dwf1x3eu/

Any Help is greatly appreciated and thank you for your time.

Here is my full functions.php:

<?php

function paramo_script_enqueue() {

wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/paramo.css', array(), '1.0.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/paramo.js', array('jquery'), '1.0.0', true);

}

add_action('wp_enqueue_scripts', 'paramo_script_enqueue');
function paramo_theme_setup() {

add_theme_support('menus');

register_nav_menu('primary', 'Primary Header Navigation');
register_nav_menu('secondary', 'Footer Navigation');   
}

add_action('init', 'paramo_theme_setup');
add_theme_support('custom-header');


function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Full.js file

    jQuery.noConflict();

jQuery(document).ready(function () {
    'use strict';

    jQuery(".burger-nav").on("click", function () {
        jQuery("nav ul").toggleClass("open");
    });

    jQuery('.toggles span').click(function () {
        jQuery(".toggles span").removeClass("active");
        jQuery(this).addClass("active");
    });

    jQuery(".spanish").on("click", function () {
        jQuery(".englishNav").hide();
        jQuery(".spanishNav").show();

    });

    jQuery(".english").on("click", function () {
        jQuery(".englishNav").show();
        jQuery(".spanishNav").hide();
    });
    jQuery(".spanish").on("click", function () {
        jQuery(".englishText").hide();
        jQuery(".spanishText").show();
    });

    jQuery(".english").on("click", function () {
        jQuery(".englishText").show();
        jQuery(".spanishText").hide();
    });
});

full header

    <!doctype html>
<html>
    <head>
         <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Paramo Galeria</title>
        <?php wp_head(); ?>

    </head>

    <body <?php body_class( $awesome_classes ); ?>>
        <section>
        <div class="topBar">

<img src="<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">
        <div class="topBarMiddle">
            <span class="spanish" data-target=".topBar .spanishNav">español</span> | <span class="english" data-target=".topBar .englishNav">english</span>
          <div class="topBarRight">  
            <nav>
            <a class="burger-nav"></a>
                <ul class="englishNav">
                    <li><a href="http://localhost:8888/ParamoGaleria/home">Home</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/artists">Artists</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/exhibitions">Exhibitions</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/offsite">Offsite</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/shop">Shop</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/contact"> Contact</a></li>
                    <li style="padding-top:50px;"><i class="fa fa-facebook fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-instagram fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-twitter fa-1.5x"></i></li>
                </ul>
                <ul class="spanishNav">
                    <li><a href="http://localhost:8888/ParamoGaleria/home">Home</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/artists">Artistsio</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/exhibitions">Exhibitions</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/offsite">Offsite</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/shop">Shop</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/contact"> Contact</a></li>
                    <li style="padding-top:50px;"><i class="fa fa-facebook fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-instagram fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-twitter fa-1.5x"></i></li>
                </ul>
            </nav>
          </div>
        </div>
        </section>

index 

<?php get_header(); ?>

<?php 

if( have_posts() ):

while( have_posts() ): the_post(); ?>


<p><?php the_content(); ?></p>



<?php endwhile;

endif;

?>

<?php get_footer(); ?>
Improve this question
2
  • Can you add the css and js part from the html? What the actual outcome of the files included on the header and footer are. Strip the domain name if exist.
    – Drupalizeme
    Commented Nov 5, 2017 at 8:27
  • @Drupalizeme added working jsfiddle for context
    – Tony Garand
    Commented Nov 5, 2017 at 10:11

1 Answer 1

Reset to default
1

Replace this line:

<img src="<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">

with the following, to fix the invalid / and dimensions.

<img src="<?php header_image();?>" height="120" width="100" alt="" class="siteLogo" />

Replace this markup:

<span class="spanish">español</span> | <span class="english">english</span>

with the following:

<span class="spanish" data-target=".topBar .spanishNav">español</span> | <span class="english" data-target=".topBar .englishNav">english</span>

Change your JavaScript to the following:

jQuery.noConflict();

jQuery(document).ready(function($) {
  'use strict';

  // You can use the shorter `$` inside the function,
  // even in noConflict mode. `.ready()` passes `$` to you.

  var $toggles = $('.topBar .toggles > span');
  var $uls = $('.topBar nav > ul');

  $toggles.on('click', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    var $this = $(this);

    $toggles.removeClass('active');
    $uls.removeClass('open').hide();

    $this.addClass('active');
    $($this.data('target')).addClass('open').show();
  });
});
Improve this answer
4
  • Thank you for the answer jaswrks, I made the header changes and now the functions work throughout the site except jQuery('.toggles span').click(function () { However when using your jQuery the nav does not open and the toggles span function doesn't work.
    – Tony Garand
    Commented Nov 5, 2017 at 9:34
  • @TonyGarand Quite welcome. I just reviewed the code sample I posted for you and it looks good. I did make one minor change by adding the .show() method about 30 seconds after I posted, so might check it again. If problems persist, consider using console.log() to help you debug this. See: simonbattersby.com/blog/debugging-jquery-using-the-console
    – jaswrks
    Commented Nov 5, 2017 at 10:00
  • There is no errors in the console and your posted code is only accomplishing 1 out of the 3 functions. I have updated the post with the current jQuery that is allowing me Nav use and language toggle on the whole site. the only thing I can't get to work is the toggles span.
    – Tony Garand
    Commented Nov 5, 2017 at 10:10
  • I am giving you the answer because your header changes did allow the jQuery functions operate on the rest of the site and that was the problem. I will have to do more digging on why the toggle span function doesn't seem to want to work. Thank you for your time!
    – Tony Garand
    Commented Nov 5, 2017 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.