0

I have a wordpress site and I want to be able to completely change a page that is displayed based on the browser size in my Custom CSS, so that if it is over 1500 pixels it loads a completely different page. Don't ask why it has to be this way, CSS syling does not do what I need as it's a complicated gallery that required a whole new template and new page, so now I want to be able to swtch between the 2 pages based on the browser size. I know I need to use this code -

@media only screen and (min-width: 1500px) {

but then I have not found what the code is to replace the page is that follows it. the Page id in wordpress is 164 and I want to replace it with 3902. If this is not possible what about changing the nav link in CSS instead so depending on the browser size it links to a different page?

Thanks

Jason

Improve this question
5
  • You won't be able to link to different pages with CSS. The next question would be, is the content of those two pages identical? If so it'd maybe be easier to only change parts of the template for different screen sizes. Of course you can redirect based on screen size, but what about the cases of resizing the the browser window would that trigger a redirect? You see I'm not 100% clear what you want to achieve, maybe elaborate on that. Altogether you maybe have to overthink your concept, but that's just a guess on my part.
    – Nicolai Grossherr
    Sep 6, 2013 at 12:52
  • Welcome to WPSE, Jason. You can't do this in CSS. However, with a combination of technologies, especially with JavaScript, as mentioned by @Seth, you can.
    – Pothi Kalimuthu
    Sep 6, 2013 at 13:07
  • 2
    Do you want that when users view a page in browser (the page with id 164) and their screen as a resolution < 1500px you want to show another page (the page with id 3902)? This is simply impossible. With css and media queries you can change the display of the page, but you can't make another server request nor change entirely the html markup. You have to use javascript to redirect user depend on resolution or load different html content via ajax. How to 2nd option is explained here
    – gmazzap
    Sep 6, 2013 at 13:08
  • Hi Ialocin Yes I would like to trigger a redirect if the browser window was resized too. Basically I have a gallery page with images displayed at a certain size which is determined by the page template that links through to the functions.php to get the image sizes, I can change the image sizes in the functions file but then this applies to all thumbnails.
    – JASON DENNING
    Sep 6, 2013 at 15:41
  • @JASONDENNING I'm really trying to understand what you want to achieve and how, but it isn't clear to me - at all. I'm begining to think the goal is to have different - responsive - images sizes for different screen sizes, if that is the case, you can achieve that with CSS. If that's not the case, the answer your are looking for should be here already. Good luck!
    – Nicolai Grossherr
    Sep 6, 2013 at 16:03

2 Answers 2

Reset to default
2

Two options.

The first would be as you said to determine the browser size using javascript. Then have your code do something where it changes the link if the browser us either above or below a certain size.

The second, and this may be your preferred method, would be to use css. If your theme has the body tag written like so <body <?php body_class(); ?>> then you will have the following class added to your page: page-id-164.

Set up your template so it has both options and wrap them each in a div with a unique class or id.

Set display:none; on one, and then the correct css on the other. Then in the code with @media only screen and (min-width: 1500px) { do the reverse. The issue is that you are loading a lot of unnecessary code as people will only see one or the other.

If you are referring to separate pages completely, including the headers, then I'd recommend doing the javascript option. Here's the code using jQuery, which you will want to place within your ready function on a theme jquery scripts file, if there is one. You also may need to adjust the < to a > depending on when you want javascript to make the switch.

if ( $(document).width() < 1500 ) {
    $('.change-link > a').each( function(){
        newlink = 'Enter New URL';
        $(this).attr('href',newlink);
    });
}

Remember if you are putting this in your code, and it errors with $ isn't defined, then you need to change the $ to jquery.

If you want to place this within your theme as inline js, then you would do the following:

<script type="text/javascript">
jQuery(document).ready(function($) {
    if ( $(document).width() < 1500 ) {
        $('.change-link > a').each( function(){
            newlink = 'Enter New URL';
            $(this).attr('href',newlink);
        });
    }
});
</script>

Or if you want it called in as a separate js file, then create the file as shown below, you would put the following in functions.php:

function my_enqueue_js(){
    wp_register_script('newlink', get_template_directory_uri().'FILE IN THEME DIRECTORY.js');
    wp_enqueue_script('newlink', array('jQuery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'sta_enqueue_js');

Then have the following code in your js file and place the file in your theme directory:

jQuery(document).ready(function($) {
    if ( $(document).width() < 1500 ) {
        $('.change-link > a').each( function(){
            newlink = 'Enter New URL';
            $(this).attr('href',newlink);
        });
    }
});
Improve this answer
21
  • For the js, you can go to screen options on your menu and turn on Link Relationship. Then on the menu item, put in the different url. Also turn on classes and give it 'change-link'. I'm working on the jquery really quick right now.
    – Seth Alling
    Sep 6, 2013 at 12:49
  • Do you what the code is to change the link in javascript? I haven't been able to find this yet.
    – JASON DENNING
    Sep 6, 2013 at 12:51
  • I've added the js for the code. It turns out that WP automatically strips slashes of the rel, so you'll just have to add a custom class and then manually change the url in your jQuery.
    – Seth Alling
    Sep 6, 2013 at 12:57
  • does that js work in the Custom CSS?
    – JASON DENNING
    Sep 6, 2013 at 13:02
  • It wouldn't work in custom css. You'd need to call in a new file or place it in script tags within your theme.
    – Seth Alling
    Sep 6, 2013 at 13:03
0 
function my_styles() {
  // REGISTER MULTIPLE STYLESHEETS TO BE USED LATER USING wp_enqueue_style() FUNCTION

    wp_register_style('default-css',get_stylesheet_directory_uri().'/style.css');
    wp_register_style('custom_css',get_stylesheet_directory_uri().'/css/custompage.css');

    wp_enqueue_style( 'default-css' ); // LOAD DEFAULT CSS FOR ALL PAGES

    if ( is_page('108') ) { // 108 is page id where you want custom css
        wp_dequeue_style('default-css'); // REMOVE DEFAULT STYLE
        wp_enqueue_style('custom-css');  // LOAD CUSTOM STYLE
    }
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

Try this, it will load default-css for all pages except the page with id 108

Improve this answer
4
  • Thanks but I know how to add custom css to a specific page, what I want to do is change the inteire page to a new one in css.
    – JASON DENNING
    Sep 6, 2013 at 12:47
  • you can change your entire page to new one by this.. by styling your new page css in custompage.css as per my code. or may be i misunderstood your query
    – Prince Singh
    Sep 6, 2013 at 12:49
  • The problem I have is that what I need to do is not styling but deeper in the theme, it's to do with gallery images sizes that is set in various php files.
    – JASON DENNING
    Sep 6, 2013 at 14:52
  • Does your code above allow a whole different page to be selected or just a different style for the page?
    – JASON DENNING
    Sep 6, 2013 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.