Echoing jQuery in my functions.php file breaks some functionality

  • Resolved brian.c.welch

    (@briancwelch)


    8 years, 11 months ago

    Hello to all,

    So let me preface everything by saying ‘amateur/novice level developer here’.

    I added a child theme as is standard practices. One of the things I am trying to do is add some jQuery to apply to certain elements (quote a few actually) in certain plugins.

    When I add echo" "; and start putting in the jQuery, certain functionality breaks.

    truncated code here:

    echo "

<script src='https://code.jquery.com/jquery-latest.js' type='text/javascript' /></script>
<script src='https://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript' /></script>
<script type='text/javascript'>

    $( document ).ready(function() {

        var someVariable = $('.element').width();
        var otherVariable = $('.otherElement').width();

        $('.element1 , .element2').css({'margin-left':'25px'});
        $('.element3').css({'background':'rgba(0,0,0,0.1)'});
    });

</script>

";

    Noticed issue 1): When customizing, after any changes made the ‘save & publish’ button does not changed to saved. Then upon closing, I get the standard “are you sure you want to leave this page” warning, implying the changes I made did not get saved – but they are.

    Noticed issue 2) I cannot see the media files any longer. In the admin side, it just keeps thinking over and over without any result.

    I should say that the jQuery does appear that it is being rendered/executed correctly.

    I have read somewhere at sometime that writing in straight jQuery can cause hiccups, if so then can you help find where the best place would be to insert custom jQuery?

    Thanks in advance!

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

  • Hi,
    jQuery is already included.

    Hi,
    jQuery is already included.

    Thread Starter brian.c.welch

    (@briancwelch)

    Killing this post. It turns out my half hearted attempt to embed jQuery functions etc, was not at all best practices.

    I have since found that I needed to enqueue the jQuery scripts in a similar or same manor as enqueueing the style sheet for my child theme.

    In the end, in my functions.php file I had this code which appears to solve most of my issues. Only remaining issue is that in my custom jQuery, I am trying to create variables inside a document ready function and for some reason it’s not yet working.

    <?php
function bbintra_adding_scripts() {
	wp_register_script('brians_custom_styles', get_template_directory_uri() . '/style.css');
	wp_register_script('brians_custom_scripts', get_stylesheet_directory_uri() . '/customizr-child-js-functions.js.php', array('jquery'));
	wp_enqueue_script('brians_custom_scripts');
	wp_enqueue_script('brians_custom_styles');
}
add_action( 'wp_enqueue_scripts', 'bbintra_adding_scripts' );
?>
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Echoing jQuery in my functions.php file breaks some functionality’ is closed to new replies.