Multisite: Set Responsive Breakpoint via WP Admin

  • Resolved bügelfrei

    (@alexanderbailey)


    4 years, 6 months ago

    I have a network with about 90 subsites sharing a theme. I’m looking for an efficient way to allow changing the breakpoint for the header navigation on a site-by-site basis.

    Objective: Display the horizontal, “tab”-style menu whenever possible (instead of the mobile menu). Site owners have control over their main menus; menu widths are sure to vary.

    Option 1: Set the breakpoint in the CSS using a variable, i.e., @media (max-width: $custombreakpoint). The variable could be populated by a site option set in the admin dashboard. I could probably figure out how to do this with PHP, but I wonder if that would slow down the network server.

    Option 2: I could probably wire the theme to let site admins select which (additional) CSS file to load for the main navigation styles, with a select offering several CSS files which differ only by the @media (max-width: ___) value.

    Option 3 (last resort): Create several child themes which differ solely by which version of header_nav_styles.css file they load. This is the easiest to create, but the idea of confronting site admins with 6 versions of the theme is unappealing.

    [I want to avoid going the Customize: Additional CSS route as it would too easy for site owners to mess up.]

    Recommendations?

    For the first two, I would probably make use of Advanced Custom Fields Pro, which I am already using for other site features.

    • This topic was modified 4 years, 6 months ago by bügelfrei.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    The issue is a WP network shares the same files throughout all of its sites. What is unique about each site should be stored in the DB. While there are ways to get separate files used for each site, it’s very sub-optimal and should be avoided if at all possible. So the crux of the problem is get values stored in the DB for each site to be used on CSS files.

    In most cases we could just dynamically output custom CSS in a manner similar to how the customizer’s Additional CSS feature works. But responsive breakpoints are more problematic because the associated media queries can involve a good sized mass of CSS rules.

    Because of this, I think Option 1 is your best bet. The extra time involved compared to fetching a static file is normally negligible. Getting PHP to output CSS code that’s usable by WP isn’t immediately intuitive, especially if PHP needs to use WP functions to get the data it needs, such as the various $wpdb class methods or simply get_option().

    The following linked article is about how to initialize the WP environment in order to use WP PHP functions. Happily, as an example the article shows us how to generate dynamic CSS from PHP. It ought to be enough to set you down the right path.
    https://glennmessersmith.com/pages/wpenviro.html

    Thread Starter bügelfrei

    (@alexanderbailey)

    Mighty thanks, @bcworkz!

    I rigged it up last night and it works!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Multisite: Set Responsive Breakpoint via WP Admin’ is closed to new replies.