1

I have a very old site. Now I want to make it responsive without changing the theme an it's style sheet.

Requirements:

  1. Can not change the theme.
  2. Can not create child theme.
  3. By default, the site should be loaded as non responsive when we visit.
  4. When a 'switcher link` is clicked whole site should be responsive.
  5. When another 'switcher link` is clicked site should be loaded as default (Non-responsive)

So I have decided to

  1. enqueue a separate style sheet when a switcher link is clicked. : Link to make the site responsive
  2. enqueue the default style sheet when another switcher link is clicked. : Link to switch back to default non-responsive site.

Then I've put following two links into my header.php

<a href="?site=mobile" class="mobile_site" id="mobile_site"><img src="http://i60.tinypic.com/dza06h.jpg" alt="switch to mobile site"></a>
<a href="?site=desktop" class="desktop_site"><img src="http://i61.tinypic.com/2iu3vl.jpg" alt="switch to desktop site"></a>

I put follwoing code into my functions.php

$site=$_GET['site'];

if ($site == 'mobile'){
    function responsive_css(){
        wp_enqueue_style(
            'wpa_custom',
            get_template_directory_uri() . '/css/responsive.css'
        );
    }
    add_action( 'wp_enqueue_scripts', 'responsive_css', 999 );
}

if ($site == 'desktop'){
    function default_css(){
        wp_enqueue_style(
            'default_css',
            get_template_directory_uri() . '/style.css'
        );
    }
    add_action( 'wp_enqueue_scripts', 'default_css', 999 );
}

and I added a folder called css into my template directory which contains responsive.css.

and then

  1. when I click the mobile link (class=mobile_site) the whole site becomes responsive. The site link becomes www.mysite.com/?site=mobile
  2. when I click the desktop link (class=desktop_site) the whole site becomes non-responsive (default site is loaded with it's default style.css). The site link becomes www.mysite.com/?site=desktop

VOILA....!!!!

BUT THE ISSUE IS:

After I clicked the mobile link if I visit to other pages / posts the whole site becomes Non-responsive. It is responsive if I am in home page only (After I clicked the mobile link)

For other pages and post I have to click the mobile link AGAIN to make it responsive. In summary, users have to click the mobile link every time when they visit to a (new) posts / pages if they want the responsive site.

I've realized the issue is I did not set a cookie when the mobile link or desktop link is clicked.

I referred PHP cookies and some other tutorials but could not get it work.

Now the requirements are (with the above mentioned 5 ) :

  1. the site should be remained responsive after the mobile link (class="mobile_site") is clicked till the desktop link(class="desktop_site") is clicked again.
  2. cookies need to be deleted when the tab/browser is closed.

How can I do it using PHP?

* PLEASE do not just **down vote and say it's more related to PHP and ask in stack overflow . It's mixed and I ask it here. Rather than just down vote do suggestions please.

1

You can use init action to set cookie, and other init action to read it. However due its a cookie... you will need also to check GET variable.

add_action('init', 'is_it_mobile_or_desktop', 1);

function is_it_mobile_or_desktop(){
    if (isset($_GET['site']) && in_array($_GET['site'], array('mobile', 'desktop')) ) {
        setcookie( 'site', $_GET['site'], time() - YEAR_IN_SECONDS, SITECOOKIEPATH, COOKIE_DOMAIN );
    }
}

add_action('init', 'who_am_i', 2);
function who_am_i(){

    $site = isset($_GET['site']) && in_array($_GET['site'], array('mobile', 'desktop')) ?  $_GET['site']
            : (isset($_COOKIE['site']) && in_array($_COOKIE['site'], array('mobile', 'desktop'))  ? $_COOKIE['site'] : 'default_case');

    if ($site == 'mobile'){
        function responsive_css(){
            wp_enqueue_style(
                'wpa_custom',
                get_template_directory_uri() . '/css/responsive.css'
            );
        }
        add_action( 'wp_enqueue_scripts', 'responsive_css', 999 );
    } else {
        function default_css(){
            wp_enqueue_style(
                'default_css',
                get_template_directory_uri() . '/style.css'
            );
        }
        add_action( 'wp_enqueue_scripts', 'default_css', 999 );
    }
}
  • Thanks @oleg there are some small syntax errors in you code part $site = isset($_GET['site']) && in_array($_GET['site'], array('mobile', 'desktop') ? $_GET['site']: isset($_COOKIE['site]) && && in_array($_COOKIE['site], array('mobile', 'desktop') ? $_COOKIE['site] : 'default_case'); So I have change it to $site = isset($_GET['site']) && in_array($_GET['site'], array('mobile', 'desktop') ? $_GET['site'] : (isset($_COOKIE['site']) && in_array($_COOKIE['site'], array('mobile', 'desktop') ? $_COOKIE['site'] : 'default_case'); But still Parse error: syntax error, unexpected ';' – Foolish Coder Jun 10 '15 at 5:30
  • check the response again. – Butuzov Jun 10 '15 at 6:56
  • still says "Parse error: syntax error, unexpected ';' in /mysite.com/wp-content/themes/magazine/functions.php on line 1581" the line 1581 is: $site = isset($_GET['site']) && in_array($_GET['site'], array('mobile', 'desktop') ? $_GET['site'] : (isset($_COOKIE['site']) && in_array($_COOKIE['site'], array('mobile', 'desktop') ? $_COOKIE['site'] : 'default_case'); – Foolish Coder Jun 10 '15 at 7:09
  • here is the code screen shot : i61.tinypic.com/2hf2sqw.jpg – Foolish Coder Jun 10 '15 at 7:16
  • sorry man - i thought i fix it. – Butuzov Jun 10 '15 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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