WP theme with Backbone

by

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.

1 Answer
1

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.

Leave a Comment