WordPress: Simple solution to have mobile devices load a different homepage

4 Views

I have done quite a bit of googling and have not found a simple solution for a method or a plugin to simply load a different static homepage for mobile devices. Is there a way to do this or a plugin that will do this (without revamping the whole site for mobile devices, as the mobile site style is good, but the specific static homepage is the only thing that I need changed). WordPress CMS is the platform.

Thanks in advance!

Read More

Update:

So I installed the plugin suggested below, copied over an exact copy of the theme I am using but named it with ‘mobile’ in front just for reference, other than that everything is exactly the same. I read via google that I could add the following code into the functions.php theme file but it just shows up blank when I add the specific code. Code: 

//Set Homepage
$mobilehome = get_page_by_title( 'mobilehome' );
update_option( 'page_on_front', $mobilehome->ID );
update_option( 'show_on_front', 'page' );

// Set the blog page
$blog   = get_page_by_title( 'Blog' );
update_option( 'page_for_posts', $blog->ID );

Update 2, solved.

I found a simple solution. I created a new theme file ‘page-home.php’ and changed the css class ‘#primary’ to ‘#primary-home’, then went into the style.css file and added all ‘#primary-home’ css attributes to match ‘#primary’, except on the mobile CSS area of the stylesheet, I added “display:none;” to #primary-home. So now it just doesn’t display the homepage on mobile devices, all other pages work (whole point in making the new template page and CSS attribute). I know this fix is probably the simple easy fix but it worked for me!

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. I found a simple solution. I created a new theme file ‘page-home.php’ and changed the css class ‘#primary’ to ‘#primary-home’, then went into the style.css file and added all ‘#primary-home’ css attributes to match ‘#primary’, except on the mobile CSS area of the stylesheet, I added “display:none;” to #primary-home. So now it just doesn’t display the homepage on mobile devices, all other pages work (whole point in making the new template page and CSS attribute). I know this fix is probably the simple easy fix but it worked for me!

  2. I think that this is as simple as it could get:

    Try this plugin – UserAgent Theme Switcher

    It will use the user-agent to detect which browser you are on, in this case it could be something like mobile safari or android, etc… then serve the theme based on that.

    This could be a hit or miss because you might want or not to change the theme. A more advanced way to do this would be to use a jQuery plugin that checks for the user agent and lets you “do stuff” after you detect it, in this case it could serve as another page or change some CSS.

  3. It’s easy and no need to code everything. Install “Redirection” plugin from wordpress repository.

    1. Go to the settings page.
    2. Enter the “Source URL” with your default desktop’s homepage
    3. On the “Match” option, select “URL and user agent” & on the “Action” option select “Redirect to URL”. Click “Add Redirection”.
    4. New configuration option will be appeared. Give any title you want. The “Source URL” must be blank (means that is your base homepage). On the “User Agent” option, choose whether iPhone or Android. On the “Matched” option, set the redirection you want for the mobile homepage.

    Done!

    You surely can differentiate the homepage on desktop and mobile device based on the redirection you have set before with that plugin. However, you cannot have same url name (ex: http://www.abcde.com for desktop & http://www.abcde.com/mobilehomepage for mobile device).