Responsive code separation

[cyberwani]

For projects I mostly use the custom child theme of bundled themes, and in many of them I use ​Bootstrap for responsive structure and other elements. And, the bundled theme also contains it's own responsive structure. So, many time we face issue with responsive codes included in the bundled themes.

If responsive code (like CSS and JS) should be separated, it will reduce the chances to conflict. If the codes are separated the user can bypass them by using functions in child theme.

[knutsp]

What do you mean by separated ("codes")? Please elaborate a bit. An what "functions in child theme" are you talking about, and do you have examples of conflicts?

[cyberwani]

Like currently Twenty Twelve contains the below code in functions.php.

wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140318', true );

This code part can be called inside any function. So, user can call the function to on/off through child function. Something like this.

function twentytwelve_responsive(){
    add_action( 'wp_enqueue_scripts', 'twentytwelve_responsive_scripts_styles' );
}
function twentytwelve_responsive_scripts_styles(){
    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140318', true );
    wp_enqueue_style( 'twentytwelve-responsive-css', get_template_directory_uri() . '/css/responsive.css', array( 'twentytwelve-style' ), '20121010' );
}

[obenland]

Replying to cyberwani:

Child themes can remove any action or filters that were added by a default theme in a callback to after_setup_theme.

Example:

<?php
function twentytwelvechild_remove_hooks() {
        remove_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
}
add_action( 'after_setup_theme', 'twentytwelvechild_remove_hooks' );

After that they can register their own callback to wp_enqueue_scripts and add the parent theme's scripts as needed.

Alternatively, child themes can hook into wp_enqueue_scripts on a priority bigger than 10, and deregister/dequeue scripts or styles.

Separating out responsive styles into their own stylesheet is probably not something that default themes are likely to do. In existing default themes for backwards compatibility reasons, and in future default themes because it would add another request to the server and most installs probably won't have the ability to concatenate on the fly.

I would recommend creating a new stylesheet in your child theme that contains the CSS bits from the parent theme that you want to keep, use that, and dequeue the parent's default stylesheet.