0

Problem: Only Custom Post Types are not entering jQuery "ready" state, while Pages and Posts can.

Scripts are tied to custom header.

function themeslug_header_hook( $name ) {
    if ( 'gumsa' == $name ) {
        add_action( 'wp_enqueue_scripts', 'themeslug_header_style' );
    }
}
add_action( 'get_header', 'themeslug_header_hook' );

function themeslug_header_style() {
    wp_enqueue_style( 'twentysixteen-gumsa-style', get_stylesheet_directory_uri() . '/style-gumsa.css' );
    wp_enqueue_script( 'custom_gumsa_script', get_stylesheet_directory_uri() . '/script-gumsa.js', array( 'jquery' ), '2017.04', true );
}

Certain pages and CPT are using a custom template uses that header.

get_header('gumsa');

This works so far for Page that uses that template (which in turn uses that header).

But for CPT that uses the same template, the jQuery is not entering the "ready" state.

// CPT enters this file

/* window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
} */
// Able to detect jQ

jQuery(document).ready(function($) {

    // CPT does not enter "ready" state

    ...

})

JS-wise, I think those are working right, so that makes me think that maybe something in my WP logic is not working right? I need some fresh eyes to see if I'm doing anything wrong.

EDIT: I want to clarify that CPT added by plugins not created by me that is using the same template/header is able to enter the "ready" state. Only CPT created by me can't.

Codes I used to create my CPT

register_post_type('gumsa',
    array(
        'labels'            => array(
            'name'          => __('gumsas'),
            'singular_name' => __('gumsa')
        ),
        'public'            => true,
        'query_var'         => true,
        'has_archive'       => true,
        'hierarchical'      => true,
        'supports'          => array('title', 'editor', 'thumbnail', 'excerpt', 'custom-fields', 'revisions', 'page-attributes'),
    )
);

Edit 2

Errors that are shown on Chrome's Developer Tools, these errors appear only on page that I'm having problems with:

Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLImageElement.<anonymous> (functions.js?ver=20160816:149)
at Function.each (jquery.js?ver=1.12.4:2)
at a.fn.init.each (jquery.js?ver=1.12.4:2)
at belowEntryMetaClass (functions.js?ver=20160816:143)
at HTMLDocument.<anonymous> (functions.js?ver=20160816:197)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)
  • you've verified that your script actually exists in page source, meaning the issue isn't that a different template and/or header is loaded on those requests? There are no errors in your browsers error console? – Milo Apr 11 '17 at 8:39
  • @Milo I've updated my post, I have previously neglected to check my Chrome's Developer Console for errors – Mr J Wolf Apr 11 '17 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.