jasonb

Creating custom @media sizes in a child theme.

9 posts in this topic

I'm trying to override the default @media widths used by responsive.css.

(For example, I want ImprintPro to switch to the tablet view when the screen width is 925px, not when it is 900px. But this is only one example.)

In responsive.css, I can do this by editing @media only screen and (max-width: 900px) and changing it from "900" to "925"—however, I don't want to modify the parent theme.

Here is what I've attempted so far:

  1. I copied responsive.css from the parent theme to my child theme.
  2. I edited my child theme's version of responsive.css to have the new values.
  3. I want to make the following change to the enqueue_structure function in class.core_enqueue.php:
    function enqueue_structure(){
    global $imprint_options;
    if($imprint_options['layout-type'] == 'boxed-fix'):
    wp_enqueue_style( 'structure', IMPRINT_GLOBAL_CSS . 'core/structure-boxed.css', array() );
    wp_enqueue_style( 'fixed', IMPRINT_GLOBAL_CSS . 'core/fixed.css', array() );
    endif;
    if($imprint_options['layout-type'] == 'boxed-res'):
    wp_enqueue_style('structure', IMPRINT_GLOBAL_CSS . 'core/structure-boxed.css', array());
    wp_enqueue_style('responsive', IMPRINT_GLOBAL_CSS . '../imprintPro-child/responsive.css', array());
    endif;
    if($imprint_options['layout-type'] == 'full-res'):
    wp_enqueue_style( 'structure', IMPRINT_GLOBAL_PUSH_CSS . 'structure-full-width.css', array() );
    wp_enqueue_style( 'responsive', IMPRINT_GLOBAL_CSS . '../imprintPro-child/responsive.css', array()
    endif;
    }

However, I'm struggling to determine what remove_action (and corresponding add_action entry) I should be using in my child's functions.php in order to accomplish this. As far as I can tell, the function enqueue_stucture() is called from the function enqueue_scripts()—which uses add_action( 'wp_enqueue_scripts' . . .)

But none of the following seems appropriate (and none of them work either):

  • remove_action( 'wp_enqueue_scripts', 'enqueue_stucture' );
  • remove_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
  • remove_action( 'enqueue_scripts', 'enqueue_structure' );

Share this post


Link to post
Share on other sites

Hello,

We are working on your query. You will get a reply within 24 hours.

Kind Regards.

Share this post


Link to post
Share on other sites

Hello,

You first need to dequeue the default responsive stylesheet in your child theme via the following statement.

wp_dequeue_style('responsive');

Then you can add your responsive styling using the following function. (wp_enqueue_style reference)

wp_enqueue_style();

Let us know if the problem persists.

Kind Regards.

Share this post


Link to post
Share on other sites

Doing that, verbatim, gives me a fatal error:

Fatal error: Uncaught ArgumentCountError: Too few arguments to function wp_enqueue_style()

I tried:

wp_dequeue_style('responsive');
function enqueue_structure() {
.
.
.
}
wp_enqueue_style('responsive');

and that didn't make any difference.

Share this post


Link to post
Share on other sites

The problem seems to be that the function enqueue_structure() doesn't use a default responsive stylesheet, but makes specific calls to wp_enqueue_style() with path parameters I don't want. I need to override the function enqueue_structure() with my own that uses different path parameters.

(Unless I can override the wp_enqueue_style() function to always ignore the second parameter passed to it when the first parameter passed to it is 'responsive' . . .)

Edited by jasonb

Share this post


Link to post
Share on other sites

Hello,

Don't worry, just send us your child theme in a zip format at contact [at] mudthemes.com and we will send you the code with correct enqueue functions.

Kind Regards.

Share this post


Link to post
Share on other sites

Hello,

We have sent you the modified child theme via email. If the issue persists, do let us know.

Kind Regards.

Share this post


Link to post
Share on other sites

Thank you, that worked.

For anybody technical who's following this, all that needs to be done is to add the following to the end of functions.php in the child theme directory (and to put a copy of responsive.css file, with its modified @media values, into the child theme directory):

function custom_resp_dequeue() {
        wp_dequeue_style('responsive');
}
add_action('wp_print_styles', 'custom_resp_dequeue');

function custom_resp_enqueue(){
        wp_enqueue_style('custom_childtheme_responsive', get_stylesheet_directory_uri() . '/responsive.css', array());
}
add_action('wp_enqueue_scripts', 'custom_resp_enqueue', 100);

Some interesting things to note, which go beyond what I'd understood about WordPress functions in the past:

  • Rather than overriding "responsive" by first removing an action or filter, its removal is accomplished through the addition of a removal (dequeue)  action. (I have not encountered this before.) I also would never have guessed that the removal function being added would make use of wp_print_styles—that's nowhere to be found in the parent theme, so I'm guessing it's part of WordPress itself.
     
  • I didn't need to remove an entire function after all (and then add a modified version back), but could instead specify a specific wp_enqueue_style() parameter—even with an arbitrary name.
     
  •  The function get_stylesheet_directory_uri() is also new to me, but very handy to know.

Note: Specifying a priority on an add_action()—100 in this case—is also something I haven't done before.

Edited by jasonb

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now