Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
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. –  ialocin Sep 6 '13 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 Sep 6 '13 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 –  G. M. Sep 6 '13 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 '13 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! –  ialocin Sep 6 '13 at 16:03

2 Answers 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);
        });
    }
});
share|improve this answer
    
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 '13 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 '13 at 12:51
    
Thanks Seth, will try that now –  JASON DENNING Sep 6 '13 at 12:53
    
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 '13 at 12:57
    
does that js work in the Custom CSS? –  JASON DENNING Sep 6 '13 at 13:02
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

share|improve this answer
    
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 '13 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 –  pr1nc3 Sep 6 '13 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 '13 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 '13 at 14:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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