You can use wp_register_style() for this purpose, and then call the registered styles with wp_enqueue_style().
wp_register_style( 'mystyle', get_template_directory_uri() . '/styles.css', null, null, 'screen and (min-width: 730px)' );
wp_register_style( 'mymobilestyle', get_template_directory_uri() . '/mstyles.css', null, null, 'screen and (max-width: 729px)' );
wp_enqueue_style( 'mystyle' );
wp_enqueue_style( 'mymobilestyle' );
Okay – where would I put that code? The page for wp_register_style seems to imply it can only be used in a plugin?
You should put the code in your functions.php and call it like this:
function load_scripts() {
wp_register_style( 'mystyle', get_template_directory_uri() . '/styles.css', null, null, 'screen and (min-width: 730px)' );
wp_register_style( 'mymobilestyle', get_template_directory_uri() . '/mstyles.css', null, null, 'screen and (max-width: 729px)' );
wp_enqueue_style( 'mystyle' );
wp_enqueue_style( 'mymobilestyle' );
}
add_action( 'wp_enqueue_scripts', 'gemstones_scripts' );
Not sure I understand… So I put the code you originally posted in the functions.php file, and then the next block you posted, well, in the header, or somewhere else? Either way I’ve tried a few combinations and can’t seem to get it to work. Sorry, could you explain? Very grateful for the help by the way – I’m very new to working with WordPress and don’t know any PHP to help me…
You should put the second block of code I posted yesterday in your functions.php and you don’t need to change your header.php at all.
Okay, done that, but it still won’t work :/ In case it’s relevant, if I take the stylesheet link out of the header file it doesn’t load any stylesheets at all, either.
Do you call wp_head() in your header.php file? It should be the very last thing before the closing </head> tag:
<head>
...stuff...
<?php wp_head(); ?>
</head>
Ah – no, I didn’t know about that.
I’ve put it in and am getting this warning:
call_user_func_array() expects parameter 1 to be a valid callback, function ‘gemstones_scripts’ not found or invalid function name
That’s my fault; I copied some code from a theme I’m working on. The last line should be:
add_action( 'wp_enqueue_scripts', 'load_scripts' );
Okay, I’ve changed that. It still doesn’t seem to be working.
Can you post the text of your functions.php? If it’s really long, post it to Pastebin and post the link here instead.
It only has what you told me to put in it, should there be more?
Not necessarily, but sometimes an extra pair of eyes can catch a typo.
Well, it’s just this at the moment:
<?php
function load_scripts() {
wp_register_style( 'mystyle', get_template_directory_uri() . '/style.css', null, null, '?screen and (min-width: 730px)' );
wp_register_style( 'mymobilestyle', get_template_directory_uri() . '/mstyles.css', null, null, '?screen and (max-width: 729px)' );
wp_enqueue_style( 'mystyle' );
wp_enqueue_style( 'mymobilestyle' );
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
?>
And the code for my Header page, in case the problem is there:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<?php wp_head(); ?>
</head>
<body>
<header><img src="<?php bloginfo('template_directory'); ?>/images/picture.jpg" alt="pretty picture"/></header>
You don’t need the question marks before screen and (min-width: 730px) and screen and (max-width: 729px).
