How do I use @media queries in PHP?

Question

I'm trying to add a width-responsive element to a client's page. The website was made in PHP, which I'm not familiar with. I believe he's also using Wordpress (which I'm also not familiar with).

The .php pages don't have any head tags to add external or internal css in, and attempting to add a head produced no results. He did inform me that all his css is loading from a file called "style.css" (though I can't find any actual links to it), but attempts to add css to this file also produced no results on the page. I was able to style the element using inline css, but apparently there's no way to set up @media queries inline.

As a last ditch effort, I finally got it working using Javascript with window.matchMedia, but it only detects the size when the window is reloaded (this is a second, separate problem I'm having). I'd still prefer to get it working using css somehow.

Answer 1

Wordpress is a CMS (content management system) created with PHP. It provides a nice interface to easily create a website. It also has a wide variety of already made PHP functions to quickly make a fully functionable website.

Seeing that you want to play around with @media, you won't need to touch any of the PHP stuff.

A Wordpress website can be described as a "theme". Themes are found under the wp-content folder. You just need to find your way to the "themes" folder and choose the theme currently used by your WordPress.

Once you find the theme, there will be a file called "style.css". This is the main CSS file of that THEME. If I were to add any "responsive-design" it would be in that file. I suggest you add the @media code starting at the end of that file.

Additional information:

PHP - Hypertext Preprocessor. It's a programming language that lets you build the structure of your HTML page before the server actually sends it to the client.

Answer 2

The final solution to this was to use Javascript, rather than CSS, to detect the page width.

  if (window.matchMedia("(min-width: 1300px)").matches)
    {
    $("#loading").css ("display", "inline");
    }

Answer 3

There is an entire Stack dedicated to WordPress where you would get much higher quality answers than I am able to provide. https://wordpress.stackexchange.com/

Option 1: Use the customiser to insert CSS

Usually in WordPress you can log into the back end, use the menu to go to:

Appearance -> Themes

Find your theme (which will be active). And then if you hover click on:

Customise -> Additional CSS

You can put your styles in there and they will be used by your theme.

On a personal level I really hate that this is the most common way to do this, but it's quick and it works and you don't need to learn WordPress.

Option 2: Use a child theme and enqueue your stylesheet to the head

You can also create a child theme (if there isn't one already made - it will be called themename - Child). A child theme will mean if the template is ever updated your changes won't be removed, but potentially doing things inline could cause a problem.

If you create a child theme (the easiest way is to install a child theme generator plugin and then uninstall it when done, although there are also instructions in the link above if you want to do it manually and understand the process.

Once created you can locate functions.php. In this file you can do all sorts of things (and also break WordPress so back up the file before using). It is mainly used for adding things to WordPress.

You can enqueue a style, which will mean it gets called in the head.

From: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )

function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) {
    _wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

    $wp_styles = wp_styles();

    if ( $src ) {
        $_handle = explode( '?', $handle );
        $wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
    }
    $wp_styles->enqueue( $handle );
}

I often find that to be a preferable solution as I can work on CSS in my code editor.

Option 3: Create a child theme, override the header.php file and manually add your stylesheet

A further way to do it would be to use an override in the child theme . When you create a child theme, any files you copy over to that theme will override the files from the main theme.

Usually you can find a file in your theme called header.php or head.php. It is usually the file that adds thing to the head of your page (you should see elements or stylesheets to help you identify this. Copy that file into your child theme to avoid it being overridden on an update and manually add any CSS/Scripts as you would with a plain HTML site.

Answer 4

You could do this with the following snippet:

<?php
if (isset($_GET['width'])) {
  $width = $_GET['width'];
    if ($width <= 480) {include ('mobile_file.php');} //mobile devices
} else {
echo "<script language='javascript'>\n";
echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}" . "&width=\" + screen.width; \n";
echo "</script>\n";
exit();
}
?>

In the above snippet I am including a file based on screen size.

You could include different styles like this:

<?php
  if (isset($_GET['width'])) {
    $width = $_GET['width'];
    if ($width <= 480) { //mobile devices
      $style = '<link rel="stylesheet" href="mobile.css" type="text/css">';
    } elseif ($width <= 720){ //tablets
      $style = '<link rel="stylesheet" href="tablet.css" type="text/css">';
    } else { //desktops
      $style = '<link rel="stylesheet" href="desktop.css" type="text/css">';
    }
    echo $style;
  } else {
      echo "<script language='javascript'>\n";
      echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}" . "&width=\" + screen.width; \n";
      echo "</script>\n";
      exit();
  }
?>

I wrote an article on how to do this sometime ago: https://tutbakery.com/how-to-use-media-queries-in-php/