Common customizations for WPtouch themes

Bauhaus

Hide the inter-post (previous/next) navigation

Add the following custom CSS to your mobile theme:

	.nav-controls { display: none; }

Remove page and/or post titles sitewide

Add the following custom CSS to your mobile theme:  

.post-page-head-area.bauhaus { 
display: none !important; 
}

Header image expands entire header area

Add the following custom CSS to your mobile theme: 

#header-title-logo {
background-image:url('/path-to-the-logo-image') !important;
background-position:center center;
height:60px;
background-size:100% 100%;
}

Classic Redux

Make the header and dropdown menu sticky

Add the following custom CSS to your mobile theme:

#header {
position: -webkit-sticky !important;
left: 0 !important;
right: 0 !important;
top: 0px !important;
}
#menu {
position: fixed !important;
}

Add a tiled background image

Add the following custom CSS to your mobile theme: 

.page-wrapper { background-image: url(YOUR-IMAGE-URL); }

Remove post meta (author & date)

Add the following custom CSS to your mobile theme:

.post-meta { display: none; }

Hide the search icon

Add the following custom CSS to your mobile theme: 

.icon-search:before { display: none; }

Hide the tablet menu & allow full-width conten

Add the following custom CSS to your mobile theme: 

.tablet #menu { display: none !important; } .tablet #header .site-title a, .tablet #slider, .tablet ul.dots, .tablet #content, .tablet .footer, .tablet .wptouch-mobile-switch { width: 100% !important; }

Hide the titles on featured slider images

Add the following custom CSS to your mobile theme: 

.featured-title { display: none; }

Replace the placeholder thumbnail in the post listings

Add the following custom CSS to your mobile theme:

.post .placeholder {
content: url(URL-TO-THE-IMAGE-HERE) !important;
}

CMS

Replace the placeholder thumbnail in the latest post listing

Add the following custom CSS to your mobile theme: 

.icon-camera-retro:before { content: url(YOUR-IMAGE-URL); }

Remove the placeholder thumbnails in the latest post listing

Add the following custom CSS to your mobile theme: 

.entry-inner { margin-left: 0px !important; } .placeholder { display: none; }

Hide the inter-post (previous/next) navigation

Add the following custom CSS to your mobile theme:

#nav-controls a { display: none; }

Hide the search icon

Add the following custom CSS to your mobile theme: 

a#search-menu-button { display: none; }

Remove the featured title

Add the following custom CSS to your mobile theme: 

.featured-title { display: none; }

Remove post meta (author & date)

Add the following custom CSS to your mobile theme: 

span.post-date, span.post-author { display: none; }

Remove page and/or post titles sitewide

Add the following custom CSS to your mobile theme: 

.post-head-area { display: none; }

Remove page title only on the home page

Removing the page titles from the home page but not from the rest of the site requires customization of the page-content.php file in a copied child theme.

For more information on working with themes in WPtouch Pro, including how to create a copied child theme, see Themes.
  • For single WordPress installations, modify the page-content.php file located at /wp-content/wptouch-data/themes/YOUR_NEW_THEME/default/page-content.php.
  • For a WordPress network installation, modify the page-content.php file located at /wp-content/wptouch-data/YOUR_SUBSITE_ID/themes/YOUR_NEW_THEME/default/page-content.php.

To remove the title from the home page in a child of CMS theme, replace the contents of the copied page-content.php file with the code here: http://pastebin.com/4wNFz7Vc.     The added function (see the commented section in the code) determines whether the active page is the home page or not. If the home page is active, the theme will not display the page title; if the home page is not active (and is, by default, any other page), the theme will display the page title. More information on this !is_front_page() conditional tag can be found in the WordPress Codex: https://developer.wordpress.org/reference/functions/is_front_page/ The function added to page-content.php is: if( !is_front_page() ) : endif;

Simple

Allow full-width logo

Add the following custom CSS to your mobile theme: 

#header-area img { width: 100%; height: auto; }

Remove meta from post head area

Add the following custom CSS to your mobile theme: 

.post .post-head-area span{ display: none; }

Hide the titles on featured slider images

Add the following custom CSS to your mobile theme: 

.featured-title { display: none; }

Remove page and/or post titles sitewide

Add the following custom CSS to your mobile theme: 

.post-head-area { display: none; }

Remove page title only on the home page

Removing the page titles from the home page but not from the rest of the site requires customization of the page-content.php file. In Simple theme, this core file needs to be copied from Foundation theme and placed inside your copied child theme before it can be customized.

For more information on working with themes in WPtouch Pro, including how to create a copied child theme, see Themes.
  • For single WordPress installations, paste the duplicate page-content.php file in /wp-content/wptouch-data/themes/YOUR_NEW_THEME/default/.
  • For a WordPress network installation, paste the duplicate page-content.php file in /wp-content/wptouch-data/YOUR_SUBSITE_ID/themes/default/.

To remove the title from the home page in a child of Simple theme, replace the contents of the copied page-content.php file with the code here: http://pastebin.com/w4GnqLiu.     The added function (see the commented section in the code) determines whether the active page is the home page or not. If the home page is active, the theme will not display the page title; if the home page is not active (and is, by default, any other page), the theme will display the page title. More information on this !is_front_page() conditional tag can be found in the WordPress Code Reference: https://developer.wordpress.org/reference/functions/is_front_page/. The function added to page-content.php is: if( !is_front_page() ) : endif;

All Themes

Hide login link in menu

Add the following custom CSS to your mobile theme:

.wptouch-menu .login-link { display: none; }

Remove post meta (time)

Add the following custom CSS to your mobile theme: 

.time-author { display: none; }

Replace the social network icon

Modify the following CSS as needed for the icons you want to replace. Use a browser inspector tool to determine the relevant selector for each social icon: 

.icon-facebook:before { content: url(YOUR-IMAGE-URL); }

Remove box shadow from blog listing post titles

Add the following custom CSS to your mobile theme: 

.entry-inner { box-shadow: none; }

Change the color or size of the feature slider's titles

Add the following custom CSS to your mobile theme: 

#slider p.featured-title { font-size: 10px; color: #777777; }

Change the color of the navigation dots on the feature slider

Add the following custom CSS to your mobile theme: 

.dots li { background-color: #f50000; } .dots li.active { background-color: #f50000; }

Change the color of the post background area

Add the following custom CSS to your mobile theme: 

.box { background-color: #f50000; }

Add a sidebar & widgets to the footer

You may add a sidebar to the mobile theme by adding the following code at the end of the root-functions.php file in your child theme.  A child theme can be created manually, or via the Make Child Theme extension. 

  'WPtouch Bottom', 'id' => 'wptouch-bottom-1', 'description' => 'WPtouch sidebar for the bottom of the content' ) ); } function output_my_sidebar_at_bottom() { dynamic_sidebar( 'WPtouch Bottom' ); }
  • In single WordPress installations, the root-functions.php file will be located at /wp-content/wptouch-data/themes/YOUR_NEW_THEME/.
  • In a WordPress network installation, the root-functions.php file will be located at /wp-content/wptouch-data/YOUR_SUBSITE_ID/themes/YOUR_NEW_THEME/.

Once that code is saved, you may add widgets as you normally would through the Appearance > Widgets area of the WordPress admin area. The newly added sidebar will be named "WPtouch Bottom". To style your sidebar and widget content, add custom CSS: Adding Custom Styling.

After adding a widget to WPtouch Pro, you may notice bullet points to the left of them. To remove them, add the code below to Appearance > Customize > Custom CSS.

.widget, .widget_text {
list-style-type:none !important;
}
If you are using shortcodes in your sidebar widget(s). Please add the following to the filter below to the functions.php file of your WPtouch Pro copied theme. 
add_filter('widget_text', 'do_shortcode');

Add the featured slider to a custom template

Using a WPtouch Pro child theme, in /wp-content/wptouch-data/_THE_MOBILE_CHILD_THEME_/default/header-bottom.php, change

to

where 'page-id-or-slug-name' is the ID of the page you would like to display the Featured Slider on, or its slug name.

For information on creating and working with custom templates in WPtouch Pro, see Custom Templates
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