wordpress different page for mobile
When you want to change mobile layout or increase the mobile speed then we can create a new mobile friendly page and we can set it only in mobile device.
Using a new page we can totally manage Speed and responsive layout and it’s not affecting in the Desktop.
We can make it more responsive for that we need to add some code.
You can’t add below code in the main theme’s functions file because when you will update the main theme that time the custom code will remove automatically.
You can create your own plugin and then you can add below code in the plugin.
Also read: how to create custom plugin.
Add below code in your (child) theme’s functions.php
add_action( 'wp_head', 'vivek_patel_mobile_home_page', 10 ); function vivek_patel_mobile_home_page() { ?> <script> if (window.location.pathname == '/' && jQuery(window).width() <= 480) { window.location = "/home-page-mobile/"; } </script> <?php }
What is the use of wp_head action? You can add any script and css related code on this hook.
You can set your own screen width instead of 480.
You can set your own new page slug instead of “home-page-mobile“.
window.location.pathname is provided a current URL. In the above code, I have matched the URL with the home page.
Then now the condition will match like if the current URL is the home page and the screen size will 480 then the page will redirect to your new mobile home page.
This action is added code in the header section of the theme. When match the site path and screen size are less than 480px then the home page will redirect on your enter page slug.
Please attention!
If you using the cache plugins or any 3rd party cache then you must need to clear the cache and then check on the private browser.
If you will not clear the cache then the changes will not apply on the site.