Customizing mobile theme templates

  • Customizing mobile theme templates in WPtouch Pro 3.x

    • Customizing mobile theme templates in WPtouch Pro 4.x

    There are two situations where you may want to use a custom template for your mobile theme:

    1. Your desktop theme uses custom page templates that need to be ported to your mobile theme
    2. When you want a unique layout exclusively for your mobile theme, such as creating a mobile-only home page or altering your post display.

    Copying Templates from the parent WPtouch Pro theme

    In version 1.1+ of the Make a Child Theme extension, you can easily copy templates from your child theme’s parent. After making a child theme, select the child theme you want to copy templates in from the “Child Theme” dropdown.

    You will see a list of templates available to copy from the parent theme to your child theme’s directory. Select the templates you want to copy for customizations and click the “Copy Selected” button.

    The theme templates will be copied to your child theme’s default folder in /wp-content/wptouch-data/NAME_OF_YOUR_CHILD_THEME/default, which may now be customized. If you are not using the Make Child Theme extension, you can manually add the template(s) to your child theme's /default directory.

    Porting Templates

    When your desktop theme uses custom templates that you'd like to bring into your mobile theme, you may be able to do so simply by placing a copy of that template file inside your WPtouch Pro child theme.
    1. Create a new, copied WPtouch Pro theme. See Make a Child Theme for details.
    2. Save a copy of your desktop theme's template file inside your newly copied child theme's /default/ directory. 
    3. If your desktop theme uses a sub-directory for its page templates and your copied template doesn't seem to be working as expected, try creating a new sub-directory inside your child theme's /default/ directory, naming it the same as the directory in the desktop theme. Moving your new template inside. The result will be a template that is located in the same relative position as the one in the desktop theme.
    4. Please note that you may need to do some styling adjustments in the mobile theme.

    Templates for Pages

    If you're new to creating templates, more information is available in the WordPress codex: https://developer.wordpress.org/themes/template-files-section/page-template-files/.
    1. Create a new, copied WPtouch Pro theme. See Make a Child Theme for details.
    2. Copy the home-template.php file found in the parent theme, located in /wp-content/wptouch-data/themes/YOUR_PARENT_THEME/. Copy it to the /default directory of the WPtouch Pro child theme.
    3. Rename the copy of home-template to my_template.php or whatever you like.
    4. Rename the mobile page template identifier within the get_header tag:
    5. Add any elements you'd like in your custom page template between and You may want to retain some of the styling from your mobile theme's default page code so carefully check through the core code for anything you'd like to include in the layout of your custom page template such as div classes, etc.
    6. Assign your new mobile page template to the page via the Mobile Page Template widget in the WordPress Page Editor. Save the changes.

    7. Add any custom styling you'd like for your new page to your child theme.

    Templates for Posts

    Here's how to build a custom template for use with your WordPress posts in WPtouch Pro.

    1. First make a copy of the theme you'd like to customize. Copying ensures that the original theme is preserved for future use. See Make a Child Theme for details.
    2. Next, copy the single.php file from parent theme (/wp-content/wptouch-data/themes/_your_PARENT_theme_/default) to use as your new post template in your newly copied theme.
    3. Save the new single.php file to your newly copied theme. The specific location on your server will depend upon whether you have a single site WordPress installation or a WordPress network:
      • Save single.php to /wp-content/wptouch-data/themes/YOUR_NEW_THEME/default/single.php if you have a single WordPress installation, or
      • Save single.php to /wp-content/wptouch-data/YOUR_SUBSITE_ID/themes/YOUR_NEW_THEME/default/single.php if you have a WordPress network installation.
    4. Customize the new single.php file as you like.

    When your copied theme is active, changes to single.php will apply to all posts displayed in your mobile theme.

    Customizing mobile theme templates in WPtouch Pro 3.x

    There are two situations where you may want to use a custom template for your mobile theme:

    1. Your desktop theme uses custom page templates that need to be ported to your mobile theme
    2. When you want a unique layout exclusively for your mobile theme, such as creating a mobile-only home page or altering your post display.

    Porting Templates

    When your desktop theme uses custom templates that you'd like to bring into your mobile theme, you may be able to do so simply by placing a copy of that template file inside your copied child theme.

    1. Create a new, copied WPtouch Pro theme. See Themes for details.
    2. Save a copy of your desktop theme's template file inside your newly copied child theme's /default/ directory. 
    3. If your desktop theme uses a sub-directory for its page templates and your copied template doesn't seem to be working as expected, try creating a new sub-directory inside your child theme's /default/ directory, naming it the same as the directory in the desktop theme. Moving your new template inside. The result will be a template that is located in the same relative position as the one in the desktop theme.

    Templates for Pages

    If you're new to creating templates, more information is available in the WordPress codex: http://codex.wordpress.org/Pages#Page_Templates.
    1. Create a new, copied WPtouch Pro theme. See Themes for details.
    2. Copy the home-template.php file found in the parent theme, Foundation, located in the WPtouch Pro core file set. Copy it to the /default directory of the WPtouch Pro copied theme.
    3. Rename the copy of home-template to my_template.php or whatever you like.
    4. Rename the mobile page template identifier within the get_header tag:
    5. Add any elements you'd like in your custom page template between and You may want to retain some of the styling from your mobile theme's default page code so carefully check through the core code for anything you'd like to include in the layout of your custom page template such as div classes, etc.
    6. Assign your new mobile page template to the page via the Mobile Page Template widget in the WordPress Page Editor. Save the changes.

    7. Add any custom styling you'd like for your new page to your child theme.

    Templates for Posts

    Here's how to build a custom template for use with your WordPress posts in WPtouch Pro.

    1. First make a copy of the theme you'd like to customize. Copying ensures that the original theme is preserved for future use. See Themes for details.
    2. Next, copy the single.php file from Foundation theme (/wptouch-pro-3/themes/foundation/default/single.php) to use as your new post template in your newly copied theme.
    3. Save the new single.php file to your newly copied theme. The specific location on your server will depend upon whether you have a single site WordPress installation or a WordPress network:
      • Save single.php to /wp-content/wptouch-data/themes/YOUR_NEW_THEME/default/single.php if you have a single WordPress installation, or
      • Save single.php to /wp-content/wptouch-data/YOUR_SUBSITE_ID/themes/YOUR_NEW_THEME/default/single.php if you have a WordPress network installation.
    4. Customize the new single.php file as you like.

    When your copied theme is active, changes to single.php will apply to all posts displayed in your mobile theme.

    Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

    Still need help? Contact Us Contact Us