Common customizations for WPtouch themes


Bauhaus

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;
}
.drop-down #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 content


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 titles


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: http://codex.wordpress.org/Function_Reference/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 Codex: http://codex.wordpress.org/Function_Reference/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 icons


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 copied child theme.  A child theme can be created manually, or via the Make Child Theme extension. 

<?php
add_action( 'init', 'register_widgets' ); add_action( 'wptouch_body_bottom', 'output_my_sidebar_at_bottom' ); function register_widgets() { register_sidebar( array( 'name' => '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 Core Settings > General > Custom Code.

<style type="text/css">
.widget, .widget_text {
list-style-type:none !important;
}
</style>
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 copied WPtouch Pro theme, in /wp-content/wptouch-data/_THE_COPIED_THEME_/default/header-bottom.php, change

<?php if ( is_home() ) { ?>
<?php if ( function_exists( 'foundation_featured_slider' ) ) { ?>
<?php foundation_featured_slider(); ?>
<?php } ?>
<?php } ?>

 
to

<?php if ( is_home() || is_page('page-id-or-slug-name') ) { ?>
<?php if ( function_exists( 'foundation_featured_slider' ) ) { ?>
<?php foundation_featured_slider(); ?>
<?php } ?>
<?php } ?>


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

Still need help? Contact Us Contact Us