0

EDIT - This is solved thank you for your help after the suggestions below didn't solve the problem I refreshed my browser cashe and now my functions work... However I then realized they only work on the home page. creating a separate thread for that. Thank you for you help!!!

the new thread is here jQuery functions only work on homepage

I am trying to make an text-decoration:underline; on active function on a p span "spanish | english" in WordPress. I got it working here in this jsfiddle https://jsfiddle.net/TonyTheOnly/k92ayp24/

Same html and css as in the jsfiddle and here is the jQuery i am using for WP.

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

    jQuery('.toggles span').click(function () {

        jQuery(".toggles span").removeClass("active");
        jQuery(this).addClass("active");
    });
});

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

EDIT

here is my full functions

<?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

/*global $, jQuery, alert*/

jQuery.noConflict();

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

    jQuery(".burger-nav").on("click", function () {

        jQuery("nav ul").toggleClass("open");
    });


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

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

    jQuery('.toggles span').click(function () {

        jQuery(".toggles span").removeClass("active");
        jQuery(this).addClass("active");
    });

});

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">
            <p class="toggles"><span class="spanish">español</span> | <span class="english">english</span></p>
          <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

3 Answers 3

Reset to default
0

There are a few possible culprits for your issue:

  1. If the script file for this function is loaded before jquery is loaded, you may see a jquery is not defined error in the debugger/console. If that's the case, just change the order of your script loading to ensure the dependencies are loaded first.

  2. If the function is being added directly into the wysiwyg body area or a template file and not a js file for the theme, you may need to call jQuery.noConflict(). See the jQuery documentation about when and why you would use this.

Also worth noting, you have a typo in the javascript code you posted here. There shouldn't be a period/dot in front of the class name being passed to addClass or removeClass

Improve this answer
4
  • I have tried your suggestions, there are no errors in the console. added the jQuery.noConflict() and fixed the typo and still this function doesn't appear to be working. I have updated the post with my full functions. js. header. and index. Any help is greatly appreciated!
    – Tony Garand
    Commented Nov 5, 2017 at 7:29
  • you may want to try registering your script with the jquery dependency and then enqueuing it. Check out wordpress.stackexchange.com/questions/48530/…
    – Anson W Han
    Commented Nov 5, 2017 at 17:19
  • Also, can you confirm from the inspector that both the stylesheet and custom javascript file are loading with your theme?
    – Anson W Han
    Commented Nov 5, 2017 at 17:19
  • yes all scripts are loading and my stylesheet is as well. I have gotten 2 out of the 3 functions to work on the whole site. here is the other thread wordpress.stackexchange.com/questions/285006/…
    – Tony Garand
    Commented Nov 5, 2017 at 18:06
0

Don't add the dot in addClass and removeClass. Like this :

Before : 

jQuery(".toggles span").removeClass(".active");
jQuery(this).addClass(".active");

After :

jQuery(".toggles span").removeClass("active");
jQuery(this).addClass("active");
Improve this answer
1
  • Thank you fixed the typo and still this function doesn't appear to be working. I have updated the post with my full functions. js. header. and index. Any help is greatly appreciated!
    – Tony Garand
    Commented Nov 5, 2017 at 7:30
0

This is solved thank you for your help after the suggestions didn't solve the problem I refreshed my browser cache and now my functions work... However I then realized they only work on the home page. creating a separate thread for that.

Improve this answer

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.