2

What would be the best way to insure that a Backbone WP theme cooperates with standard shortcodes and other WP plugins that include script and style tags in header and footer. I know Backbone plays nicely with jQuery scripts, but I'm unsure in how well will it operate in a situation when there are jQuery plugins loaded by require.js for the js app itself and the same jQuery script being loaded in the footer of some page.
I was thinking of capturing the wp_head and wp_footer of a target page/post as presented in some backbone starter themes, but that leaves me with a question of whether I already loaded that jQuery plugin in the require.js.

  • and you only need to check if some JavaScript (jQuery) library loaded twice.. right? – prosti Oct 16 '16 at 16:43
  • I guess, that's what I see as a problem now. – steakoverflow Oct 17 '16 at 7:49
0

Well if you use Backbone with _s (https://github.com/tlovett1/_s_backbone) you will not be in problem. They used backbone for some effects and enqueuing is present still.

/**
 * Enqueue scripts and styles.
 */
function _s_backbone_scripts() {
    wp_enqueue_style( '_s_backbone-style', get_stylesheet_uri() );

    wp_enqueue_script( '_s_backbone-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

    wp_enqueue_script( '_s_backbone-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    } elseif ( is_home() || is_front_page() || is_archive() || is_search() ) {
        global $wp_rewrite;

        wp_enqueue_script( '_s_backbone-loop', get_template_directory_uri() . '/js/loop.js', array( 'jquery', 'backbone', 'underscore', 'wp-api'  ), '1.0', true );

        $queried_object = get_queried_object();

        $local = array(
            'loopType' => 'home',
            'queriedObject' => $queried_object,
            'pathInfo' => array(
                'author_permastruct' => $wp_rewrite->get_author_permastruct(),
                'host' => preg_replace( '#^http(s)?://#i', '', untrailingslashit( get_option( 'home' ) ) ),
                'path' => _s_backbone_get_request_path(),
                'use_trailing_slashes' => $wp_rewrite->use_trailing_slashes,
                'parameters' => _s_backbone_get_request_parameters(),
            ),
        );

        if ( is_category() || is_tag() || is_tax() ) {
            $local['loopType'] = 'archive';
            $local['taxonomy'] = get_taxonomy( $queried_object->taxonomy );
        } elseif ( is_search() ) {
            $local['loopType'] = 'search';
            $local['searchQuery'] = get_search_query();
        } elseif ( is_author() ) {
            $local['loopType'] = 'author';
        }

        //set the page we're on so that Backbone can load the proper state
        if ( is_paged() ) {
            $local['page'] = absint( get_query_var( 'paged' ) ) + 1;
        }

        wp_localize_script( '_s_backbone-loop', 'settings', $local );
    }
}
add_action( 'wp_enqueue_scripts', '_s_backbone_scripts' );

So the id's like '_s_backbone-style' will keep you safe you don't duplicate scripts.

The other themes should, but may not use templating. The worst case would be not usign even the most important wp_head and wp_footer hooks.

add_action( 'wp_head', ...
add_action( 'wp_footer', ...

If this is the case many WordPress plugins will not work.

If I try to load a page through ajax, detect that it has a CF7 shortcode that loads jquery.validate.js in wp_head during page load. What happens if I already loaded jquery.validate.js in my backbone app (main theme app) and now try to load that script as a CF7 form requirement for that page?

Anywhere (and even if you work with Ajax) you can detect the list of enqueued scripts from

global $wp_scripts;

Since you mentioned CF7 you can use hooks in there to inject code.

Note: Backbone exists in WordPress for long time ( @since 3.5 ) and works fine with jQuery. They are complementary.

  • I don't see how a different id in enqueue script will help. The plan is to capture the wp_head and wp_footer scripts during ajax call to a given post/page. – steakoverflow Oct 18 '16 at 6:59
  • wp_head and wp_footer are action hooks; you can use them even in ajax calls unless you defined not to load WordPress templates in Ajax – prosti Oct 18 '16 at 12:05
  • I know that, but what happens if I try to load a page through ajax, detect that it has a CF7 shortcode that loads jquery.validate.js in wp_head during page load. What happens if I already loaded jquery.validate.js in my backbone app (main theme app) and now try to load that script as a CF7 form requirement for that page? – steakoverflow Oct 18 '16 at 12:10
  • @fatman, I updated the post to answer you. – prosti Dec 23 '16 at 1:43
  • I probably should have give more detail, I know how to capture wp_head and wp_footer scripts. I would like to have an SPA connect to the WP, and use WP as an API. Since there is little support for REST in current WP plugins, I thought I could use standard template urls to deal with plugins like CF7, but the problem is with jQuery plugins, because even if I do get all the enqueued js scripts in the wp_head and wp_footer, what happens if some of them (like jquery validate) is already loaded in my SPA by require.js? That is what troubles me: loading the same jquery script twice – steakoverflow Dec 23 '16 at 8:51

Your Answer

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

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