Plugin related and other generic customizations 2
(→example of in correct PHP code 1) |
m (→How to float a div at any position on top of other elements in the container) |
||
(15 intermediate revisions by 2 users not shown) | |||
Line 416: | Line 416: | ||
<pre class="brush:css;"> | <pre class="brush:css;"> | ||
#floating-box-container { | #floating-box-container { | ||
− | width: 1000px; /* set this to container (layout) width */ | + | max-width: 1000px; /* set this to container (layout) width */ |
+ | width: 100%; | ||
margin: 0 auto; | margin: 0 auto; | ||
position: relative; | position: relative; | ||
Line 895: | Line 896: | ||
</pre> | </pre> | ||
− | ====example of | + | ====example of incorrect PHP code 2==== |
<pre class="brush: php; gutter: false;"> | <pre class="brush: php; gutter: false;"> | ||
<?php | <?php | ||
Line 997: | Line 998: | ||
[[File:Screen Shot 2013-02-02 at 9.39.19 PM.png|800px|thumb|none|After]] | [[File:Screen Shot 2013-02-02 at 9.39.19 PM.png|800px|thumb|none|After]] | ||
− | Add the following at the end of child theme's <code>functions.php</code>: | + | Add the following at the end of child theme's <code>functions.php</code> but '''before''' a closing <code>?></code>, if any): |
<pre class="brush: php; gutter: false;"> | <pre class="brush: php; gutter: false;"> | ||
Line 1,495: | Line 1,496: | ||
See [http://ithemes.com/forum/topic/40780-jquery-kwiks/#entry183718 this] forum post. | See [http://ithemes.com/forum/topic/40780-jquery-kwiks/#entry183718 this] forum post. | ||
+ | |||
+ | === Animated Responsive Image Grid === | ||
+ | |||
+ | Below is how I implemented a jQuery plugin by [http://tympanus.net/Development/AnimatedResponsiveImageGrid/ codrops] in WordPress for creating a responsive image grid that will switch images using different animations and timings. | ||
+ | |||
+ | [http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ Live Demo] | ||
+ | |||
+ | '''1.''' Downloaded source, extracted zip file and uploaded the <code>AnimatedResponsiveImageGrid</code> folder to <code>/assets</code> | ||
+ | |||
+ | [[File:2013-04-10 14-17-19.png|365px|thumb|none]] | ||
+ | |||
+ | '''2.''' Added the following at the end of child theme's <code>functions.php</code>: | ||
+ | |||
+ | <pre class="brush: php; gutter: false;"> | ||
+ | |||
+ | // ========================================= | ||
+ | // = My Changes Below = | ||
+ | // ========================================= | ||
+ | |||
+ | |||
+ | // load javascript and styles in footer or head | ||
+ | |||
+ | // only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ | ||
+ | add_action('wp_enqueue_scripts', 'AnimatedResponsiveImageGrid_code'); | ||
+ | |||
+ | function AnimatedResponsiveImageGrid_code() { | ||
+ | if(is_page( '1155' )) { | ||
+ | wp_enqueue_script( 'modernizr', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/modernizr.custom.26633.js', '2.6.2', false ); /* in head */ | ||
+ | wp_enqueue_script( 'AnimatedResponsiveImageGrid', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/jquery.gridrotator.js', array('jquery'), true ); | ||
+ | |||
+ | wp_enqueue_style( 'AnimatedResponsiveImageGrid-style', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/css/style.css' ); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | add_action('wp_enqueue_scripts', 'add_my_code'); | ||
+ | |||
+ | function add_my_code() { | ||
+ | |||
+ | add_action( 'print_footer_scripts', 'my_footer_script' ); | ||
+ | } | ||
+ | |||
+ | // Add jQuery to footer | ||
+ | |||
+ | function my_footer_script() { ?> | ||
+ | |||
+ | |||
+ | <!-- only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ --> | ||
+ | <?php if(is_page( '1155' )) { ?> | ||
+ | <script type="text/javascript"> | ||
+ | jQuery(function($) { | ||
+ | $( '#ri-grid' ).gridrotator( { | ||
+ | w320 : { | ||
+ | rows : 3, | ||
+ | columns : 4 | ||
+ | }, | ||
+ | w240 : { | ||
+ | rows : 3, | ||
+ | columns : 3 | ||
+ | } | ||
+ | } ); | ||
+ | |||
+ | $( '#ri-grid-2' ).gridrotator( { | ||
+ | rows : 3, | ||
+ | columns : 15, | ||
+ | animType : 'fadeInOut', | ||
+ | animSpeed : 1000, | ||
+ | interval : 600, | ||
+ | step : 1, | ||
+ | w320 : { | ||
+ | rows : 3, | ||
+ | columns : 4 | ||
+ | }, | ||
+ | w240 : { | ||
+ | rows : 3, | ||
+ | columns : 4 | ||
+ | } | ||
+ | } ); | ||
+ | }); | ||
+ | </script> | ||
+ | <?php } | ||
+ | |||
+ | |||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | '''3.''' | ||
+ | |||
+ | a) Placed this (in Text view) in "Animated Responsive Image Grid" Page: | ||
+ | |||
+ | <pre class="brush: html; gutter: false;"> | ||
+ | <h2>Demo 1: Random animations / 55% container width / 3s between switching</h2> | ||
+ | |||
+ | <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> | ||
+ | <img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/> | ||
+ | <ul> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </pre> | ||
+ | |||
+ | b) Placed this in HTML module below the content module in layout used by that Page: | ||
+ | |||
+ | <pre class="brush: html; gutter: false;"> | ||
+ | <h2 style="margin-left: 1em; margin-right: 1em;">Demo 2: "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching</h2> | ||
+ | |||
+ | <div id="ri-grid-2" class="ri-grid ri-grid-size-2"> | ||
+ | <img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/> | ||
+ | <ul> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li> | ||
+ | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </pre> | ||
+ | |||
+ | '''4.''' Added the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor): | ||
+ | |||
+ | <pre class="brush: css; gutter: false;"> | ||
+ | /* http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ */ | ||
+ | |||
+ | .ri-grid-size-1 { | ||
+ | width: 90% !important; | ||
+ | } | ||
+ | |||
+ | .ri-grid ul li, | ||
+ | .ri-grid ul li a { | ||
+ | width: 98px !important; | ||
+ | height: 97px !important; | ||
+ | } | ||
+ | |||
+ | #builder-module-516519f61bcba-outer-wrapper { | ||
+ | max-width: 100% !important; | ||
+ | } | ||
+ | |||
+ | #ri-grid-2 ul li, | ||
+ | #ri-grid-2 ul li a { | ||
+ | width: 94px !important; | ||
+ | height: 94px !important; | ||
+ | } | ||
+ | |||
+ | .page-id-1155 .builder-module-content .builder-module-element { | ||
+ | margin-bottom: 0 !important; | ||
+ | } | ||
+ | |||
+ | .page-id-1155 .hentry { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | === Easy Accordion jQuery plugin in iThemes Builder === | ||
+ | |||
+ | [http://buildersnippets.com/easy-accordion-test-page/ Live Demo] [Note: Due to differences in CSS properties like font sizes between child themes and other minor customizations, the demo (which uses Air child theme) looks slightly different than the screenshot below, which was taken in Default child theme] | ||
+ | |||
+ | [[File:Easy Accordion Test Page - WordPress Dev Site 2013-04-30 13-03-49.png|441px|thumb|none]] | ||
+ | |||
+ | [http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/ Easy Accordion] is a jQuery plugin to create a horizontal accordion and is a free alternative to Slidedeck. | ||
+ | |||
+ | The following steps outline how the [http://www.madeincima.it/download/samples/jquery/easyAccordion/ plugin's demo] can be set up in a WordPress site running iThemes Builder. Once you have the following working, you can then edit the HTML, javascript parameters and CSS to suit your needs. | ||
+ | |||
+ | '''1.''' Download the full sample zip file from [http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/ here] under the Conclusion section. Extract the zip file and upload the resulting <code>jQuery-easyAccordion</code> folder to <code>assets</code> directory under your site's root. | ||
+ | |||
+ | '''2.''' Upload all the contents of <code>jQuery-easyAccordion/images</code> folder to active child theme's <code>images</code> directory. | ||
+ | |||
+ | '''3.''' Wherever you want the Easy Accordion to appear (in a Page or Post or HTML module etc), paste the following: | ||
+ | |||
+ | <pre class="brush: html; gutter: false;"> | ||
+ | <div class="sample"> | ||
+ | <h1>jQuery Easy Accordion Plugin</h1> | ||
+ | |||
+ | <h2>Horizontal Accordion with Autoplay</h2> | ||
+ | <p>Set the '<strong>autoStart</strong>' parameter to '<strong>true</strong>' to get a timed slideshow. You can also define the interval between each slide in milliseconds using the '<strong>slideInterval</strong>' parameter.</p> | ||
+ | <div id="accordion-1"> | ||
+ | <dl> | ||
+ | <dt>First slide</dt> | ||
+ | <dd><h2>This is the first slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img1.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> | ||
+ | <dt>Second slide</dt> | ||
+ | <dd><h2>Here is the second slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img2.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> | ||
+ | <dt>One more slide</dt> | ||
+ | <dd><h2>One more slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> | ||
+ | <dt>Another slide</dt> | ||
+ | <dd><h2>Another slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> | ||
+ | <dt>Wow one more</dt> | ||
+ | <dd><h2>Unbilievable one more slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img5.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> | ||
+ | <dt>Last one</dt> | ||
+ | <dd><h2>This is definitely the last one</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img6.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> | ||
+ | </dl> | ||
+ | </div> | ||
+ | |||
+ | <h2>Simple Horizontal Accordion</h2> | ||
+ | <p>If you don't specify the '<strong>autoStart</strong>' parameter or if you set it to '<strong>false</strong>' you get a simple slideshow.</p> | ||
+ | |||
+ | <div id="accordion-2"> | ||
+ | <dl> | ||
+ | <dt>Slide title</dt> | ||
+ | <dd><h2>First mammoth here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img1.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd> | ||
+ | <dt>Another slide</dt> | ||
+ | <dd><h2>Over the moon!</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img2.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd> | ||
+ | <dt>Third slide</dt> | ||
+ | <dd><h2>Another mammoth</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img3.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd> | ||
+ | <dt>Last slide</dt> | ||
+ | <dd><h2>This is my favourite</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd> | ||
+ | </dl> | ||
+ | </div> | ||
+ | |||
+ | <h2>Set the initial Active Slide</h2> | ||
+ | <p>You can easily set the <strong>initial active slide</strong> by adding the '<strong>active</strong>' class to the respective DT element. | ||
+ | <br />Notice that you could also remove the slide number by setting the '<strong>slideNum</strong>' parameter to '<strong>false</strong>'.</p> | ||
+ | <div id="accordion-3"> | ||
+ | <dl> | ||
+ | <dt>Slide title</dt> | ||
+ | <dd><h2>First slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img2.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd> | ||
+ | <dt>Another slide</dt> | ||
+ | <dd><h2>Title to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img4.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd> | ||
+ | <dt class="active">Third slide</dt> | ||
+ | <dd><h2>Here is the title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img1.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd> | ||
+ | <dt>Last slide</dt> | ||
+ | <dd><h2>Last slide title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd> | ||
+ | </dl> | ||
+ | </div> | ||
+ | |||
+ | <p><a href="http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/">Go back to the post!</a></p> | ||
+ | </div> | ||
+ | </pre> | ||
+ | |||
+ | In the case of [http://buildersnippets.com/easy-accordion-test-page/ my demo], the above code has been placed in a static Page. | ||
+ | |||
+ | '''4.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag (if any): | ||
+ | |||
+ | <pre class="brush: php; gutter: false;"> | ||
+ | // load javascript and styles in footer or header | ||
+ | |||
+ | // only on http://buildersnippets.com/easy-accordion-test-page/ | ||
+ | add_action('wp_enqueue_scripts', 'easyAccordion_code'); | ||
+ | |||
+ | function easyAccordion_code() { | ||
+ | if(is_page( '127' )) { | ||
+ | wp_enqueue_script( 'easyAccordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/scripts/jquery.easyAccordion.js', array('jquery'), '0.1', true ); | ||
+ | |||
+ | wp_enqueue_style( 'easy-accordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/css/styles.css' ); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | add_action('wp_enqueue_scripts', 'add_my_code_ea'); | ||
+ | |||
+ | function add_my_code_ea() { | ||
+ | |||
+ | add_action( 'print_footer_scripts', 'my_footer_script_ea' ); | ||
+ | } | ||
+ | |||
+ | // Add jQuery to footer | ||
+ | |||
+ | function my_footer_script_ea() { ?> | ||
+ | |||
+ | |||
+ | <!-- only on http://buildersnippets.com/easy-accordion-test-page/ --> | ||
+ | <?php if(is_page( '127' )) { ?> | ||
+ | <script type="text/javascript"> | ||
+ | var accordion; | ||
+ | jQuery(function($) { | ||
+ | $('#accordion-1').easyAccordion({ | ||
+ | autoStart: true, | ||
+ | slideInterval: 3000 | ||
+ | }); | ||
+ | |||
+ | $('#accordion-2').easyAccordion({ | ||
+ | autoStart: false | ||
+ | }); | ||
+ | |||
+ | $('#accordion-3').easyAccordion({ | ||
+ | autoStart: true, | ||
+ | slideInterval: 5000, | ||
+ | slideNum:false | ||
+ | }); | ||
+ | |||
+ | $('#accordion-4').easyAccordion({ | ||
+ | autoStart: false, | ||
+ | slideInterval: 5000 | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <?php } | ||
+ | |||
+ | |||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | The <code>if(is_page( '127' ))</code> conditional is in place to ensure that javascript is loaded and called only where needed (in this case, a specific Page vs site-wide). You would need to either change the ID or remove the conditional to suit your needs. | ||
+ | |||
+ | '''5.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor): | ||
+ | |||
+ | <pre class="brush: css; gutter: false;"> | ||
+ | /* Easy Accordion Styling */ | ||
+ | |||
+ | .sample{border:1px solid #92cdec;background:#d7e7ff;padding:30px} | ||
+ | .easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;} | ||
+ | |||
+ | dd p{line-height:120%} | ||
+ | |||
+ | #accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8} | ||
+ | #accordion-1 dl{width:800px;height:245px} | ||
+ | #accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c} | ||
+ | #accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat} | ||
+ | #accordion-1 dt.hover{color:#68889b;} | ||
+ | #accordion-1 dt.active.hover{color:#fff} | ||
+ | #accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} | ||
+ | #accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold} | ||
+ | #accordion-1 .active .slide-number{color:#fff;} | ||
+ | #accordion-1 a{color:#68889b} | ||
+ | #accordion-1 dd img{float:right;margin:0 0 0 30px;} | ||
+ | #accordion-1 h2{font-size:2.5em;margin-top:10px} | ||
+ | #accordion-1 .more{padding-top:10px;display:block} | ||
+ | |||
+ | #accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8} | ||
+ | #accordion-2 h2{font-size:2.5em;margin-top:10px;} | ||
+ | #accordion-2 dl{width:700px;height:195px} | ||
+ | #accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c} | ||
+ | #accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat} | ||
+ | #accordion-2 dt.hover{color:#68889b;} | ||
+ | #accordion-2 dt.active.hover{color:#fff} | ||
+ | #accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} | ||
+ | #accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold} | ||
+ | #accordion-2 .active .slide-number{color:#fff} | ||
+ | #accordion-2 a{color:#68889b} | ||
+ | #accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px} | ||
+ | |||
+ | #accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8} | ||
+ | #accordion-3 h2{font-size:2.5em;margin-top:10px} | ||
+ | #accordion-3 dl{width:700px;height:195px} | ||
+ | #accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c} | ||
+ | #accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat} | ||
+ | #accordion-3 dt.hover{color:#68889b;} | ||
+ | #accordion-3 dt.active.hover{color:#fff} | ||
+ | #accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} | ||
+ | #accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold} | ||
+ | #accordion-3 .active .slide-number{color:#fff} | ||
+ | #accordion-3 a{color:#68889b} | ||
+ | #accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px} | ||
+ | |||
+ | .sample h1 { | ||
+ | margin-top: 0; | ||
+ | line-height: 1; | ||
+ | } | ||
+ | |||
+ | .hentry .easy-accordion img { | ||
+ | background: none; | ||
+ | border: none; | ||
+ | -moz-border-radius: 0; | ||
+ | -webkit-border-radius: 0; | ||
+ | border-radius: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .easy-accordion h2 { | ||
+ | line-height: 1; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | </pre> | ||
== Using a Shortcode in HTML Module for Custom Header == | == Using a Shortcode in HTML Module for Custom Header == | ||
Line 1,600: | Line 2,065: | ||
<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> | <h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> | ||
− | <h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></ | + | <h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3> |
<?php else : ?> | <?php else : ?> | ||
− | <h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></ | + | <h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3> |
<h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5> | <h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5> | ||
Line 1,915: | Line 2,380: | ||
http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/ | http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/ | ||
+ | |||
+ | == How to Make Entire Text Widgets Clickable == | ||
+ | |||
+ | [[File:2013-03-31 17-48-29.png|237px|thumb|none]] | ||
+ | |||
+ | When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements. | ||
+ | |||
+ | <code>display: block</code> CSS can be used so the entire widget becomes clickable. | ||
+ | |||
+ | Ex.: | ||
+ | |||
+ | Code in a text widget: | ||
+ | |||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <a href="#" class="my-widget-link">Mold Removal and Remediation</a> | ||
+ | </pre> | ||
+ | |||
+ | CSS: | ||
+ | |||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | a.my-widget-link { | ||
+ | display: block; | ||
+ | font-size: 1.65em; | ||
+ | padding: 1em; | ||
+ | } | ||
+ | |||
+ | #builder-module-514372ec66190 .widget { | ||
+ | padding: 0; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | where <code>builder-module-514372ec66190</code> is the ID of widget bar module having the widget. | ||
+ | |||
+ | == How to Enable Comments For Custom Post Types == | ||
+ | |||
+ | '''1.''' Ensure that support for Comments is enabled in the CPT. | ||
+ | |||
+ | How this is done depends on the method being used to set up the CPTs. | ||
+ | |||
+ | Here's an example when using CustomPress: | ||
+ | |||
+ | [[File:2013-04-02 12-35-15.png|608px|thumb|none]] | ||
+ | |||
+ | '''2.''' Go to My Theme -> Settings -> Comments. | ||
+ | |||
+ | Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings. | ||
+ | |||
+ | '''3.''' In the CPT add/edit screen, tick <code>Allow comments</code> in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick <code>Discussion</code>. | ||
+ | |||
+ | == How to Create Mobile Navigation like the new Air Theme == | ||
+ | |||
+ | There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support. | ||
+ | |||
+ | ===Pre-requisites=== | ||
+ | |||
+ | * Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes. | ||
+ | * Responsive needs to be enabled in the child theme (functions.php should contain: <code>add_theme_support( 'builder-responsive' );</code> | ||
+ | |||
+ | ===Include the javascript code that enables the Mobile dropdown=== | ||
+ | |||
+ | * Copy the <code>js</code> folder and contents from the Air child theme to your child theme. | ||
+ | * Add the following code at the end of your child theme's <code>functions.php</code> file, yet before the closing <code>?></code> (if any): | ||
+ | |||
+ | <pre class="brush:php; gutter: false;"> | ||
+ | // Enqueuing and Using Custom Javascript/Jquery | ||
+ | function it_air_load_custom_scripts() { | ||
+ | wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true ); | ||
+ | wp_enqueue_script('it_air_jquery_additions'); | ||
+ | } | ||
+ | add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' ); | ||
+ | </pre> | ||
+ | |||
+ | ===Enable the Mobile Nav as an Alternative Navigation Module Style=== | ||
+ | Following the code added in step 1, add the following code in <code>functions.php</code> (again, before a closing ?>) | ||
+ | <pre class="brush:php; gutter: false;"> | ||
+ | // Add Support for Alternate Module Styles | ||
+ | if ( ! function_exists( 'it_builder_loaded' ) ) { | ||
+ | function it_builder_loaded() { | ||
+ | builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' ); | ||
+ | } | ||
+ | } | ||
+ | add_action( 'it_libraries_loaded', 'it_builder_loaded' ); | ||
+ | </pre> | ||
+ | |||
+ | |||
+ | ===Add the css code for the Mobile navigation=== | ||
+ | Add the following code at the end of your child themes '''mobile''' stylesheet <code>style-mobile.css</code>: | ||
+ | |||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | /********************************************* | ||
+ | Navigation Module (Mobile) | ||
+ | *********************************************/ | ||
+ | .builder-module-navigation.mobile { | ||
+ | padding-top: .5em !important; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile ul { | ||
+ | margin-top: .5em; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile li { | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | /* second level stuff */ | ||
+ | .builder-module-navigation.mobile li ul { | ||
+ | position: relative !important; | ||
+ | left: 0 !important; | ||
+ | border: 0; | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile li a, | ||
+ | .builder-module-navigation.mobile .current_page_item li a, | ||
+ | .builder-module-navigation.mobile .current-cat li a, | ||
+ | .builder-module-navigation.mobile .current-menu-item li a { | ||
+ | margin: 0; | ||
+ | background: transparent; | ||
+ | border-color: transparent; | ||
+ | color: #3B3F42; | ||
+ | border-bottom: 1px solid rgba(0,0,0,0.1); | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile li a:hover, | ||
+ | .builder-module-navigation.mobile .current_page_item li a:hover, | ||
+ | .builder-module-navigation.mobile .current-cat li a li a:hover, | ||
+ | .builder-module-navigation.mobile .current-menu-item li a:hover { | ||
+ | background: #3B3F42; | ||
+ | color: #ECECEC; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile li li { | ||
+ | border: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile li ul ul { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile li li a { | ||
+ | padding: .25em 0 .25em 2em; | ||
+ | line-height: inherit; | ||
+ | border-radius: 2px; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile li li li a { | ||
+ | padding-left: 4em; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile-nav .menu.hidden { | ||
+ | display: none; | ||
+ | } | ||
+ | #it-mobile-menu { | ||
+ | background: #3B3F42; | ||
+ | color: #ECECEC; | ||
+ | padding: .25em .75em; | ||
+ | display: block; | ||
+ | cursor: pointer; | ||
+ | border-radius: 2px; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } | ||
+ | |||
+ | .builder-module-navigation.mobile.borderless { | ||
+ | border: 0; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===Make sure the Mobile navigation only shows when in Mobile mode (style-mobile.css is active)=== | ||
+ | |||
+ | Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor): | ||
+ | |||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | /********************************************* | ||
+ | Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide) | ||
+ | *********************************************/ | ||
+ | |||
+ | #it-mobile-menu { | ||
+ | display: none; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | ===Activate the Mobile Navigation=== | ||
+ | Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module. | ||
+ | |||
+ | == How to set up a responsive Full Width slideshow in iThemes Builder == | ||
+ | |||
+ | In this tutorial, we are going to use [http://ithemes.com/purchase/slideshow/ iThemes Slideshow] plugin to set up a responsive full width slideshow in Builder. | ||
+ | |||
+ | [[File:WordPress-Dev-Site-2013-04-24-11-34-20.jpg|800px|thumb|none]] | ||
+ | |||
+ | '''1.''' Install and activate [http://ithemes.com/purchase/slideshow/ Slideshow] plugin. Add a new group named say, <code>Homepage Slider</code>. Edit the group and set dimensions to 1500px by 430px. | ||
+ | Note that these are just recommended dimensions and are not set in stone and you are free to experiment and change them as you see them fit for your needs. | ||
+ | |||
+ | Under <code>Render Mode</code>, select <code>Responsive</code>. Save settings. | ||
+ | |||
+ | Upload the images you wish to appear in the slide group. | ||
+ | |||
+ | [[File:Slideshow ‹ WordPress Dev Site — WordPress 2013-04-24 12-03-05.png|362px|thumb|none]] | ||
+ | |||
+ | '''2.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag (if any): | ||
+ | |||
+ | <pre class="brush: php; gutter: false;"> | ||
+ | add_theme_support( 'builder-full-width-modules' ); | ||
+ | |||
+ | if ( ! function_exists( 'it_builder_loaded' ) ) { | ||
+ | function it_builder_loaded() { | ||
+ | builder_register_module_style( 'widget-bar', 'Full Width Slider', 'widget-bar-full-width-slider' ); | ||
+ | } | ||
+ | add_action( 'it_libraries_loaded', 'it_builder_loaded' ); | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | Note: If the first line in above, i.e., for adding full width modules support is already present, do not add it again. | ||
+ | |||
+ | '''3.''' Edit your layout and add a Widget Bar module with 1 column wherever you want the Slideshow to appear. | ||
+ | |||
+ | Select <code>Full Width Slider</code> from Style dropdown. | ||
+ | |||
+ | You might want to name the module <code>Slider</code> for easy identification. | ||
+ | |||
+ | [[File:Screen Shot 2013-04-24 at 11.49.50 AM.png|668px|thumb|none]] | ||
+ | |||
+ | '''4.''' Go to Appearance -> Widgets page for this layout and drag iThemes Slideshow widget into the Widget bar module's sidebar and ensure that your full width slider group is the selected one. | ||
+ | |||
+ | [[File:Screen Shot 2013-04-24 at 11.51.54 AM.png|299px|thumb|none]] | ||
+ | |||
+ | '''5.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor): | ||
+ | |||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | /* For full width slideshow */ | ||
+ | |||
+ | .widget-bar-full-width-slider-background-wrapper { | ||
+ | padding: 0; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .widget-bar-full-width-slider-outer-wrapper { | ||
+ | max-width: 100% !important; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | '''6.''' Add the following in <code>style-mobile.css</code> (create this file if it is not existing): | ||
+ | |||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | /* For full width slideshow */ | ||
+ | |||
+ | #pb_slideshow_rslider-1 .nivo-prevNav { | ||
+ | margin-left: 0 !important; | ||
+ | } | ||
+ | |||
+ | #pb_slideshow_rslider-1 .nivo-nextNav { | ||
+ | margin-right: 0 !important; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | '''7.''' Create a new file named <code>style-responsive.css</code> in the child theme and paste the following in it: | ||
+ | |||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | /* For full width slideshow */ | ||
+ | |||
+ | .widget-bar-full-width-slider-background-wrapper { | ||
+ | padding: 0; | ||
+ | } | ||
+ | </pre> |
Revision as of 07:34, July 6, 2013
This is Page 2 of Plugin related and other generic customizations in Builder. Here is Page 1.
This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, method 1 is recommended.
Method 1
1. Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.
2. Instead of a navigation module, use a PHP enabled HTML module having this sample code:
<?php wp_nav_menu( array( 'menu' => 'primary', 'menu_class' => 'builder-module-navigation') ); ?> <div class="my-social-icons"> <ul> <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li> <li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li> <li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li> <li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: [email protected]"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li> </ul> </div>
Note:
- In the above, change
primary
to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will bemain-menu
. - It is recommended to use the social icons from your WordPress site. You should download the icons referred to in the above code, upload them to your site and use those links instead.
3. Add the following sample code at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
/************************************************************************ For right floating social icons in a HTML module showing nav bar *************************************************************************/ .builder-module-2 { background: #FAA51B; } .menu-primary-container { float: left; } #menu-primary { margin-bottom: 0; } li.social-icon a, li.social-icon a:hover { padding: 1px 0 0 8px; } li.social-icon a:hover { opacity: 0.8; -moz-opacity: 0.8; background: none; } li.social-icon:hover, li.social-icon:hover a { background: none; } .my-social-icons { float: right; margin-right: 10px; padding-top: 8px; } .my-social-icons ul { list-style: none; } .my-social-icons li { float: left; }
Note: In the above
a) Change the number (2) in .builder-module-2
so it is the module number from top in layout.
b) In
.builder-module-2 { background: #FAA51B; }
replace background: #FAA51B;
with child theme's styles set for navigation module or in the case of Thinner, those of .builder-module-navigation ul.menu
. i.e.,
.builder-module-2 { /*background: #FAA51B;*/ overflow: hidden; background: #F6F6F6; background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F6F6F6)); background: -webkit-linear-gradient(#FFFFFF, #F6F6F6); background: -moz-linear-gradient(#FFFFFF, #F6F6F6); background: -ms-linear-gradient(#FFFFFF, #F6F6F6); background: -o-linear-gradient(#FFFFFF, #F6F6F6); background: linear-gradient(#FFFFFF, #F6F6F6); border: 1px solid #FFF; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: #AAAAAA 1px 1px 2px; -moz-box-shadow: #AAAAAA 1px 1px 2px; -o-box-shadow: #AAAAAA 1px 1px 2px; -khtml-box-shadow: #AAAAAA 1px 1px 2px; box-shadow: #AAAAAA 1px 1px 2px; }
c) primary
to the slug of your custom menu. Ex.: If the name of your custom menu is "Main Menu", it slug will be main-menu
.
Method 2
Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.
1. Edit your child theme's functions.php.
Add the following at the end (before closing PHP tag, if present):
add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2); function add_images($items, $args) { $items .= '<li class="social-icon" id="first-social-icon"><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="//ithemes.com//builder/misc/social-media-icons/32/facebook.png"></a></li>'; $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="//ithemes.com//builder/misc/social-media-icons/32/twitter.png"></a></li>'; $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="Follow Us on RSS" alt="Follow Us on RSS" src="//ithemes.com//builder/misc/social-media-icons/32/rss.png"></a></li>'; $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: [email protected]"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="//ithemes.com//builder/misc/social-media-icons/32/email.png"></a></li>'; return $items; }
Note: In the above code, main-menu must be replaced with the slug of your custom menu. Ex.: If the name of your custom menu is Primary Navigation, then
add_filter('wp_nav_menu_main-menu_items','add_images', 10, 2);
must be changed to
add_filter('wp_nav_menu_primary-navigation_items','add_images', 10, 2);
2. Add the following at the end of child theme's style.css and customize it if necessary:
/* Custom Styles For The Social Media Widget Icons in Navigation */ li#first-social-icon { margin-left: 355px; /* Adjust this value so the icons are positioned at your desired location. */ } /* li.social-icon { height: 36px; } */ /* Needed only in certain themes like Traverse */ li.social-icon a, li.social-icon a:hover { padding: 1px 0 0 8px; } li.social-icon a:hover { opacity: 0.8; -moz-opacity: 0.8; background: none; } li.social-icon:hover, li.social-icon:hover a { background: none; }
That's it!
This method is also explained here.
Sample implementations:
1. Traverse with round icons:
How to display Posts from a specific category on a Page in Magazine Extension style
The instructions below outline how to have all posts from a category named Issues (ID = 18) appear on a Page titled Issues List (slug = issues-list).
1. Ensure that pretty permalinks are enabled. Create a Page titled Issues. Do not enter any content in the Page. Just enter the title and publish.
2. Save this code as page-issues-list.php. (i.e., page-<<slug>>.php)
- Set a title for this Page in line 12.
- Edit the category ID in line 21.
Upload this file to child theme directory.
3. Copy lib directory from parent Builder/extensions/magazine directory into child theme directory.
4. Add this at the end of child theme's style.css.
That's it.
Note: If a layout is applied to this Page, ensure that it (the layout) does not have an extension applied.
How to use CSS3 PIE
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
It is used to get CSS3 properties like border-radius working in IE older than version 9.
Follow the steps below to make CSS3 PIE work in Builder:
Update on July 11, 2012: Builder provides IE browser specific IDs for the html element. These are ie7, ie8 and ie9. It is thus possible to write IE 7, IE 8 and IE 9 specific CSS. This forum topic provides an example where post comment text area (which already has border-radius
set in style.css) can be made to show rounded corners in IE 8 using CSS3 PIE. The alternate method listed below also works.
1. Download the latest version of CSS3 PIE from here.
2. Extract the zip flle and upload PIE.htc to any web reachable directory.
Ex.:
public_html/assets/PIE.htc
3. Add position: relative;
style to all those selectors for which you would like to use CSS3 PIE. You will of course be specifying border-radius/box-shadow etc. properties (which are supported by CSS3 PIE).
Ex.:
#text-6 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; position: relative; } #text-6 .widget-title { -moz-border-radius:10px 10px 0px 0px; -webkit-border-radius:10px 10px 0px 0px; border-radius:10px 10px 0px 0px; position: relative; }
The above CSS is written to make a widget whose ID is text-6 rounded.
Screenshot in Firefox:
4. Add the following in your child theme's functions.php:
function my_render_ie_pie() { ?> <!--[if lte IE 8]> <style type="text/css" media="screen"> #your-css-elements-here { behavior: url('http://www.redkitecreative.com/PIE.htc'); } </style> <![endif]--> <?php } add_action('wp_head', 'my_render_ie_pie', 8);
In the above, replace
-
#your-css-elements-here
with CSS selectors for which you have specified CSS 3 properties and for which you would like to use CSS3 PIE. - http://www.redkitecreative.com/PIE.htc with the URL of PIE.htc on your server.
Ex.:
Code in functions.php:
function my_render_ie_pie() { ?> <!--[if lte IE 8]> <style type="text/css" media="screen"> #text-6, #text-6 .widget-title { behavior: url('http://sridhar.internal.ithemes.com/assets/PIE.htc'); } </style> <![endif]--> <?php } add_action('wp_head', 'my_render_ie_pie', 8);
Now border-radius property for #text-6 and #text-6 .widget-title will work in IE 8 and below.
Screenshot in IE 8:
Note:
- This particular example does not render properly in IE 7 probably because of using PIE on an element inside another element. This is the behavior coming from PIE itself and not Builder. Screenshot.
- IE 9 supports border-radius natively. So PIE will not be used in IE 9.
That's it!
Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/
How to set up Shopp in iThemes Builder
Shopp is an e-commerce plugin that adds a feature-rich online store to your WordPress-powered website or blog.
Shopp works out of the box in Builder without the need to edit any template files.
The steps below outline how Shopp can be set up in Builder:
1. After Shopp has been installed and activated, it will create four placeholder pages.
Each of these pages include Shopp-specific shortcodes that are replaced with dynamic content generated by Shopp.
2. Go to Shopp -> Settings, Continue to Shopp Setup...
Go through the various settings and fill them out. Refer to links at the bottom of this page for details on these settings.
3. Presentation Settings:
Make sure you have saved the settings that have been entered in the previous options thus far, if any, before proceeding further.
a) Click on Use Custom Templates button.
b) Create a directory in your active theme (Builder child theme) named shopp. You can either use a FTP client or your hosting cPanel file manager for this.
c) Reload the Presentation Settings in the WordPress/Shopp admin and click Install Theme Templates button.
At this point, Shopp will make a copy of the built-in default templates into the newly created shopp directory within your active theme.
d) Tick Enable theme templates and save changes.
4. Now you are ready to add products. Go to Shopp -> Products. Click Add New. Enter the details and save the product.
Note: After a product image has been added, if its thumbnail does not appear i.e., if it looks like:
go to Shopp -> Settings -> System and uncheck Enable Flash-based uploading next to Upload System. Save changes.
You will have to edit the products and add images again.
Screenshots
Shop page (Products listing page)
Live Demo: http://sridhar.internal.ithemes.com/shop/ (Dummy site, do not place orders)
Product page
Cart page
Replay videos of Under the Hood with Shopp training webinar
How to float a div at any position on top of other elements in the container
1. Add the following in child theme's functions.php:
add_action('builder_layout_engine_render_header', 'add_floating_box', 20 ); function add_floating_box() { ?> <div id="floating-box-container"> <div id="floating-box"> HTML or PHP code comes here </div> </div> <?php }
In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.
2. Add the following at the end of child theme's style.css:
#floating-box-container { max-width: 1000px; /* set this to container (layout) width */ width: 100%; margin: 0 auto; position: relative; z-index: 100; } #floating-box { position: absolute; top: 50px; left: 0; background: yellow; width: 200px; height: 100px; }
In the above, you might want to adjust top, left, background, width and height values.
A practical example of implementing this method can be found here.
Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559
Using Easy Custom Content Types in Builder
Easy Content Types, a commercial plugin provides an extremely easy to use and intuitive interface for creating custom post types, taxonomies, and meta boxes.
Here are some general tips on using Easy Custom Content Types for WordPress in Builder.
1. Do not use Post name
permalink structure. Day and name
works fine.
2. Go to plugin's settings and tick the first two under "Post Type Templates". You might also want to tick the option under "Taxonomy Templates" if you plan on using custom taxonomy archives.
3. Create your Post Types.
Ex.:
The URL of archive listing of entries from a CPT is: http://yoursite.com/cptslug
Ex.: http://localhost/builder/testimonials/
The URL of single CPT entry is: http://yoursite.com/cptslug/entrytitle
Ex.: http://localhost/builder/testimonials/awesome-service/
4. Check child theme directory using a FTP client or cPanel file manager. If single-<cpt>.php has not been automatically created, copy/upload single.php from parent Builder into the child theme and rename it as single-<cpt>.php.
Ex.:
5. Create any necessary Meta Boxes and Meta Fields.
Ex.:
6. To display Meta Field in template files like single-<cpt>.php, use
<?php global $post; echo get_post_meta($post->ID, 'ecpt_clienturl', true); ?>
In the above replace "ecpt_clienturl" with the name of your field.
7. To display a Meta Field in LoopBuddy layout, use "Custom Field" tag and enter the field name in "Meta Key" text input.
8. If comments area is not appearing in single CPT entry pages on the site, go to My Theme -> Settings -> Comments. Uncheck the CPT, save settings, re-check it and save settings.
How to show top most (latest) post in full and the others as excerpts
Screenshot: http://d.pr/nfl1
Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.
Replace the the_content() or the_excerpt() function call with the following:
<?php /* Conditional output flag set after first post */ ?> <?php if($showexcerpt) : ?> <?php the_excerpt(); ?> <?php else: ?> <?php the_content(); ?> <?php endif; ?> <?php $showexcerpt=true; ?>
Ex.: In Foundation Blank's index.php,
<?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?>
should be replaced with
<?php /* Conditional output flag set after first post */ ?> <?php if($showexcerpt) : ?> <?php the_excerpt(); ?> <?php else: ?> <?php the_content( __( 'Read More→', 'it-l10n-BuilderChild-Foundation-Blank' ) ); ?> <?php endif; ?> <?php $showexcerpt=true; ?>
With the above change, the top most (latest) post will be shown in full unless more quick tag, is used. If more quick tag is used, "Read More→" will appear at the cut off point.
How to implement Yoast Breadcrumbs in Builder
Yoast Breadcrumbs on WordPress.org
Determine where you want the breadcrumbs to appear and edit the appropriate template file(s) in child theme. Use this image as a reference. If a particular file is not present in the child theme directory, copy it from parent Builder directory.
Generally speaking, these are the files that you will be modifying: page.php (for static Pages), single.php (for single post pages), index.php (for Posts page) and archive.php (for category pages).
Let's consider Kepler child theme as an example and that we want to add breadcrumbs to all Pages.
Edit page.php.
Below
<?php if ( have_posts() ) : ?>
add
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } ?>
Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
#breadcrumbs { color: #D0ECF3; margin-top: 0; } #breadcrumbs a { color: #FFFFFF; }
Note: The above CSS code might have to be adjusted depending on the child theme.
This should result inHow to remove hyperlink from tagline in Header module
Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):
// load our javascript in the footer add_action('wp_enqueue_scripts', 'add_my_code'); function add_my_code() { add_action( 'print_footer_scripts', 'my_footer_script' ); } // Add jQuery to footer function my_footer_script() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('.site-tagline a').replaceWith(function() { return this.innerHTML; }); }); </script> <?php }
How to assign layouts to The Events Calendar pages
The Events Calendar plugin enables you to rapidly create and manage events. Features include Google Maps integration as well as default templates such as a calendar grid and event list, widget and so much more.
To assign a layout to all pages generated by this plugin, ex.: http://yoursite.com/events/
add the following in child theme's functions.php before closing PHP tag (if present):
function set_custom_layout( $layout_id ) { if ( tribe_is_month() || tribe_is_upcoming() || tribe_is_past() ) return '4f5363f3cb8e1'; return $layout_id; } add_filter( 'builder_filter_current_layout', 'set_custom_layout' );
In the above replace 4f5363f3cb8e1
with the ID of your desired layout.
Source: http://tri.be/tutorial-integrating-the-events-calendar-w-genesis/
It is also possible to set different layouts to different views like
- main calendar page
- calendar category pages
- single events
- single event days
- single venues
- events or venue pages
- events list page
by adding more functions similar to the one above.
The needed if conditionals can be obtained from the source linked above.
Jetpack and Builder
Sharing
If you would like to use Jetpack's Sharing Buttons in Widget Content widgets, go to
- Settings -> Sharing. Tick
Widget Content
under "Show buttons on". - My Theme -> Settings -> Widget Content. Select "Use the the_content filter to format Widget Content entries."
Sample screenshot:
Sample scenario:
1) At WP Dashboard -> Settings -> Sharing,
a) Few services have been enabled by dragging them under "Enabled Services" area.
b) Show buttons on
is ticked for "Front Page, Archive Pages, and Search Results".
2) Active theme: Builder Child Theme - Acute Purple - 1.1.0
3) 'Teasers Layout - Image Left' Builder extension is applied to the Posts page with Read More set to appear for all excerpts.
To prevent automatic placement of Jetpack's Share buttons and place them manually, follow this:
1. Add the following at end of child theme's functions.php
:
// Remove automatically-inserted Jetpack's share buttons function jptweak_remove_share() { //remove_filter( 'the_content', 'sharing_display',19 ); remove_filter( 'the_excerpt', 'sharing_display',19 ); } add_action( 'loop_end', 'jptweak_remove_share' );
Source: http://wordpress.org/support/topic/share-buttons-position-above-other-plugins#post-3686704
2. Wherever you would like to place the Jetpack's Share buttons, edit the appropriate template file and paste the following:
<?php if (function_exists('sharing_display')) echo sharing_display(); ?>
In our sample scenario, the file would be wp-content/themes/BuilderChild-Acute-Purple/extensions/post-teasers-left/functions.php and the above code would be placed below
<?php the_excerpt(); ?> <p><a href="<?php the_permalink(); ?>" class="more-link">Read More →</a></p>
That's it.
Jetpack Comments
Sample screenshot:
- Edit
comments.php
in active theme (should be a child theme of Builder). If the file is not present, copy it from parent Builder directory into the child theme directory and edit it.
Delete code similar to
<h3><?php comment_form_title( __( 'Leave a Reply', 'it-l10n-BuilderChild-Ionic' ), __( 'Leave a Reply to %s', 'it-l10n-BuilderChild-Ionic' ) ); ?></h3> <div class="cancel-comment-reply"> <small><?php cancel_comment_reply_link(); ?></small> </div>
and replace
<form action="<?php echo site_url( '/wp-comments-post.php' ); ?>" method="post" id="commentform"> <?php if ( is_user_logged_in() ) : ?> <p class="logged-in-as"><?php printf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>', 'it-l10n-BuilderChild-Ionic' ), admin_url( 'profile.php' ), $user_identity, $logout_url ); ?></p> <?php else : ?> <p class="comment-form-author"> <input type="text" name="author" id="author" value="<?php echo esc_attr( $commenter['comment_author'] ); ?>" size="22"<?php echo $aria_req; ?> /> <label for="author"><small><?php _e( 'Name', 'it-l10n-BuilderChild-Ionic' ); ?> <?php if ( $req ) _e( "<span class='required'>(required)</span>", 'it-l10n-BuilderChild-Ionic' ); ?></small></label> </p> <p class="comment-form-email"> <input type="text" name="email" id="email" value="<?php echo esc_attr( $commenter['comment_author_email'] ); ?>" size="22"<?php echo $aria_req; ?> /> <label for="email"><small><?php _e( 'Mail (will not be published)', 'it-l10n-BuilderChild-Ionic' ); ?> <?php if ( $req ) _e( "<span class='required'>(required)</span>", 'it-l10n-BuilderChild-Ionic' ); ?></small></label> </p> <p class="comment-form-url"> <input type="text" name="url" id="url" value="<?php echo esc_attr( $commenter['comment_author_url'] ); ?>" size="22" /> <label for="url"><small><?php _e( 'Website', 'it-l10n-BuilderChild-Ionic' ); ?></small></label> </p> <?php endif; ?> <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>--> <p><textarea name="comment" id="comment" cols="45" rows="10"></textarea></p> <p class="comment-submit-wrapper"> <input name="submit" type="submit" id="submit" value="<?php _e( 'Submit Comment →', 'it-l10n-BuilderChild-Ionic' ); ?>" /> <?php comment_id_fields(); ?> </p> <?php do_action( 'comment_form', $post->ID ); ?> </form>
with
<?php comment_form(); ?>
Infinite Scroll
Jetpack's Infinite Scroll can either enabled by adding code in child theme's functions.php or simply by just using a plugin.
Details: http://ithemes.com/2012/12/03/builder-jetpack-infinite-scroll/
Carousel
Beginning Builder 4.0.15, Jetpack's Carousel module works fine in iThemes Builder.
Tiled Galleries
JetPack's Tiled Galleries module works in iThemes Builder (v4.0.15 and above) by using a workaround.
Add the following in child theme's functions.php file (after the <?php
line):
function custom_disable_builder_gallery() { remove_filter( 'post_gallery', 'builder_custom_post_gallery', 10 ); } add_action( 'builder_theme_features_loaded', 'custom_disable_builder_gallery' ); $content_width = 604;
Note that the $content_width
variable has to be set to a value that refers to the pixel width of the area displaying the gallery. The 604 number refers to the total pixel width area of the Default child theme's Content Module without any Layout modifications (960 pixel wide Layout with a 320 pixel wide sidebar). Until a better solution can be found, this variable will have to be manually adjusted so that the gallery properly fills the content area. Fortunately, if you are running a responsive Builder child theme, you can set this value to be larger than required, and it will automatically shrink down (this may work in some non-responsive child themes as well, the results vary).
Set $content_width
value to the width of actual content portion (.builder-module-content .builder-module-element) that is available after any padding. Firebug makes it easy to find this.
Source: Builder 4.0.15 release notes.
Limitation: When the above code is used, output of standard gallery shortcode, for example, [gallery ids="1072,1070,1062,1050"]
will be affected. This is a known issue for the time being.
How to embed a Gravity Forms form at the bottom of all single posts
1. Go to Forms -> Forms in WP dashboard. Hover mouse on the title of form that you wish to embed and note the number at the end of URL in browser status bar. That would be the form's ID.
2. Edit child theme's single.php
. If the child theme does not have this, copy it from parent Builder directory into the child theme directory.
Below
<?php comments_template(); // include comments template ?>
paste
<?php gravity_form(2, true, false, false, '', false); ?>
In the above change 2
to the ID of form you wish to embed.
Source: http://www.gravityhelp.com/documentation/page/Embedding_A_Form
3. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
#gform_wrapper_2 { margin-top: 4em; }
In the above change 2
to the ID of form that's embedded.
Examples of Using jQuery in Builder
Disclaimer
iThemes will not be responsible for any issues that may be the result of your attempts to change your site's functions.php file. You do not HAVE to change it. All code samples are for your information, possibly inspiration, and provided "as is". However, when properly implemented, the code samples are accurate and will work.
Warning
If you do not understand what it is you are doing, if the words "php", "opening tag", "FTP", "functions" and "backup" are not familiar to you proceed with caution. You can blow up your site due to invalid code in the functions.php file. Actually, even if you know or think you know it all, it still happens (it happens to me at least once a week - Ronald).
A single missing } or even a , or a semi-colon is all it takes to take your site down. This can be resolved by undoing the changes, however, this can not be done through the wp-dashboard > Appearance > Editor anymore (since your site is down). You then have to restore the functions.php file either through FTP or your hosting cPanel File Manager.
If you think you can not do that, or do not understand what all the above means, I suggest you refrain from editing functions.php.
Should anything go wrong, do not blame the code posted here. The code works. It just needs to be inserted a) the right way, and b) in the right place.
For everyone else feeling confident, and having read the Disclaimer and the paragraph on how to add PHP code to a PHP file, DO MAKE A BACKUP, at least of the file you are editing. It is also not recommended to do these changes through the wp-dashboard > Appearance > Editor. Setup a localhost server on your computer, and use a simple PHP Editor (with syntax checking), ensure that your additions do not break the site and only THEN FTP your files to your server.
How to add PHP code to a PHP file
When adding code to the functions.php
file (or any PHP file), make sure it is in PHP format. HTML code is not PHP code, and it WILL break things when coded inside a block of PHP code.
PHP code can be identified by an opening tag: <?php
and a closing tag ?>
all code between these tags should be PHP code.
Most WordPress themes have the opening <?php
tag in functions.php, coded all the way at the top of the file. Most (Builder Child theme) functions.php
files do not have a closing ?>
tag (ALL THE WAY) at the end of the file, since it is not required.
So if you add code at the end of your functions.php
file, and do so before the closing ?>
PHP tag (if any!) you (generally!) are inside a PHP block of code. But this is NOT guaranteed.
- You can't add html code inside PHP tags.
- You can't add PHP code outside PHP tags.
- You can't add opening PHP tags INSIDE a block of PHP code (nesting
<?php some php code ?>
when there is no closing php tag before it).
Before making the final edits and saving and uploading the file to your server, make sure that the syntax of the entire functions.php is valid syntax. You can do so by using a PHP Editor, and there are online tools such as this one: http://www.piliapp.com/php-syntax-check/
example of correct PHP code
<?php PHP code ?> html code <?php some more PHP code ?>
example of incorrect PHP code 1
<?php php code <?php some more php code ?> ?>
example of incorrect PHP code 2
<?php html code ?>
example of incorrect PHP code 3
<?php php code ?> more php code
Introduction
Please note that code shown is for a particular child theme and for a specific version used when writing the articles. It would usually have to be modified to suit your needs. All code samples use certain selector names (for menus, for builder selectors etc.) This is entirely arbitrary, and it is highly unlikely that your selectors are the same. You have to adapt the code accordingly.
All code samples provided here ASSUME that it will be placed in already existing PHP tags. Therefore, you will not find an opening <?php code at the start, or a closing ?> tag at the end.
One typical usage of this would be to set different background colors to alternate menu items.
Add the following at the end of child theme's functions.php
:
// Assign even and odd classes to nav bar menu items add_action('wp_enqueue_scripts', 'add_my_code_1'); function add_my_code_1() { add_action( 'print_footer_scripts', 'my_footer_script_1' ); } function my_footer_script_1() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $("#menu-main-menu > li:nth-child(odd)").addClass("odd"); $("#menu-main-menu > li:nth-child(even)").addClass("even"); }); </script> <?php }
where menu-main-menu
is the CSS ID of custom menu shown in the nav bar.
Add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
.builder-module-navigation li.even a { background: red; } .builder-module-navigation li.odd a { background: blue; } .builder-module-navigation li.even li a, .builder-module-navigation li.odd li a { background: #FFF; } .builder-module-navigation li a:hover, .builder-module-navigation li.even li a:hover, .builder-module-navigation li.odd li a:hover { background: #333; color: #FFF; } .builder-module-navigation .current_page_item.even a, .builder-module-navigation .current_page_item.odd a .builder-module-navigation .current-cat.even a, .builder-module-navigation .current-cat.odd a .builder-module-navigation .current-menu-item.even a, .builder-module-navigation .current-menu-item.odd a { background: #333; } .builder-module-navigation li a, .builder-module-navigation .current_page_item li a, .builder-module-navigation .current-cat li a { color: #FFF; } .builder-module-navigation li li a { color: #333; }
Ex.:
Live Demo. Code used on this site: functions.php, style.css.
Add the following at the end of child theme's functions.php
but before a closing ?>
, if any):
// ========================================= // = Space out nav bar menu items equally = // ========================================= // load javascript in the footer add_action('wp_enqueue_scripts', 'add_my_code_37742'); function add_my_code_37742() { add_action( 'print_footer_scripts', 'my_footer_script_37742' ); } // Add Javascript to footer function my_footer_script_37742() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { var menuItems = $("ul#menu-main-menu").children().length; var menuWidth = $("ul#menu-main-menu").width(); var percentage = (menuWidth / menuItems) / (menuWidth / 100); $("ul#menu-main-menu").children().each(function() { $(this).css('width', percentage + '%'); }); }); </script> <?php }
where menu-main-menu
is the ID of custom menu shown in the nav bar.
Add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
/********************************************* Space out nav bar menu items equally *********************************************/ .builder-module-navigation ul { width: 100%; } .builder-module-navigation li a, .builder-module-navigation .current_page_item li a, .builder-module-navigation .current-cat li a { text-align: center; }
Thanks to Ronald. Source: http://ithemes.com/forum/topic/37742-navigation-spread-items-to-length-of-the-nav-bar/#entry173441
Add the following at the end of child theme's functions.php
:
// ========================================= // = Smoothen transition of 2nd level menu = // ========================================= // load javascript in footer add_action('wp_enqueue_scripts', 'add_my_code_2'); function add_my_code_2() { add_action( 'print_footer_scripts', 'print_my_footer_scripts_2' ); } // Add required javascript to footer (for delayed opening of subnav) function print_my_footer_scripts_2() { ?> <script type='text/javascript'> jQuery(document).ready(function($) { $("#menu-main-menu li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); }); </script> <?php }
where menu-main-menu
is the CSS ID of custom menu (usually <ul id="menu-main-menu">
) shown in the nav bar. This is entirely arbitrary, and it is highly unlikely that your selectors are the same. You need to adapt the code accordingly.
Alternate Method:
Go to My Theme -> Settings -> Analytics and JavaScript Code. Paste the following in the text area under
"List any JavaScript or other code to be manually inserted inside the site's <head> tag in the input below."
<script type='text/javascript'> jQuery(document).ready(function($) { $("#menu-main-menu li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); }); </script>
where menu-main-menu
is the CSS ID of custom menu shown in the nav bar.
Save settings.
Thanks to Ronald. Source: http://ithemes.com/forum/topic/30998-is-it-possible-to-add-a-slow-transition-effect-to-the-navbar/#entry144025
Another similar forum topic: http://ithemes.com/forum/topic/21002-navigation-with-animated-effect/
How to Clear Placeholder Text Upon Focus in Gravity Forms Fields
Gravity Forms - Placeholders add-on plugin can be used to add HTML5 placeholder support to Gravity Forms' fields with a javascript fallback. gplaceholder
CSS class should be added to text fields or textareas as needed, or to the form itself to enable this feature to all fields within it.
Ex.:
Now all Gravity Forms' field labels will appear inside the fields as placeholder text.
The placeholder text will continue to appear when clicked or tabbed to inside a field, but will disappear when user starts typing.
If you would like the fields' placeholder text to be cleared when a field gets focus, add the following at the end of child theme's functions.php
:
// ========================================= // = Auto hide placeholder text upon focus = // ========================================= // load javascript in footer add_action('wp_enqueue_scripts', 'add_my_code_3'); function add_my_code_3() { add_action( 'print_footer_scripts', 'my_footer_script_3' ); } // Add jQuery to footer function my_footer_script_3() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('.gform_wrapper').find(':input').each(function() { $(this).data('saveplaceholder', $(this).attr('placeholder')); $(this).focusin(function() { $(this).attr('placeholder', ''); }); $(this).focusout(function() { $(this).attr('placeholder', $(this).data('saveplaceholder')); }); }) }) </script> <?php }
Thanks to Ronald for providing this code here.
Ex.:
/* JMAC script load */ // load jquery and prepare javascript in footer add_action('wp_enqueue_scripts', 'jmac_scripts_method'); function jmac_scripts_method() { wp_enqueue_script('jquery'); add_action('print_footer_scripts', 'jmac_print_footer_scripts'); } // Add required javascript to footer function jmac_print_footer_scripts() { if(!is_page('videoconferencing')) { ?> <script type="text/javascript"> jQuery(document).ready(function($) { function toggleVideo(state) { // if state == 'hide', hide. Else: show video var div = document.getElementById("popupVid"); var iframe = div.getElementsByTagName("iframe")[0].contentWindow; div.style.display = state == 'hide' ? 'none' : ''; func = state == 'hide' ? 'pauseVideo' : 'playVideo'; iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*'); } }); </script> <?php } } /* JMAC script load end */
Note: The focus of this wiki entry is not what the jQuery code does, but rather the if conditional used:
if(!is_page('videoconferencing'))
where "videoconferencing" is the slug of Page in which jQuery code should NOT be loaded.
Forum topic: http://ithemes.com/forum/topic/33305-script-in-footer-on-all-pages-except-one/
Ex.:
// prepare javascript in footer add_action('wp_enqueue_scripts', 'add_my_script_4'); function add_my_script_4() { add_action( 'print_footer_scripts', 'home_page_only_script' ); } // Add javascript to footer function home_page_only_script() { if ( is_front_page() ) : ?> <script type="text/javascript"> //your javascript here... </script> <?php endif; }
Thanks to Ronald. Source: http://ithemes.com/forum/topic/33473-adding-javascipt-to-home-page/#entry155302
How to Create a "Stay-On-Top" element
Method 1
Live Demos: iThemes.com, WebDesign.com
As the user scrolls down..
1. Identify the selector of the element that you wish to stay on top. Firebug can be used for this.
Ex.: .builder-module-navigation-background-wrapper
in case of a navigation module.
2. Add the following at the end of child theme's functions.php
(before closing PHP tag, if present):
// ========================================= // = "Stay-On-Top" element = // ========================================= add_action('wp_enqueue_scripts', 'add_my_code'); function add_my_code() { add_action( 'print_footer_scripts', 'my_footer_script' ); } function my_footer_script() { ?> <script type="text/javascript"> jQuery(function($) { var filter = $('.builder-module-navigation-background-wrapper'); pos = filter.offset(); var filterSpacer = $('<div />', { "class": "filter-drop-spacer", "height": filter.outerHeight() }); var fixed = false; $(window).scroll(function() { if($(this).scrollTop() >= pos.top+filter.height() ) { if( !fixed ) { fixed = true; filter.fadeOut('fast', function() { $(this).addClass('fixed').fadeIn('fast'); // $('.search_in_nav, .my-social-icons').hide(); $(this).before(filterSpacer); }); } } else { if( fixed ) { fixed = false; filter.fadeOut('fast', function() { $(this).removeClass('fixed').fadeIn('fast'); // $('.search_in_nav, .my-social-icons').show(); filterSpacer.remove(); }); } } }); }); </script> <?php }
In the above, enter the selector from step 1 in the following line:
var filter = $('.builder-module-navigation-background-wrapper');
(Optional) If you would like to hide any children of the element in fixed state, specify their selectors in the line below and remove the comment.
// $('.search_in_nav, .my-social-icons').hide();
Remember to do similarly in the line below:
// $('.search_in_nav, .my-social-icons').show();
3. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
.builder-module-navigation-background-wrapper.fixed { position: fixed; left: 0; top: 0; width: 100%; -webkit-box-shadow: 0 0 40px #222; -moz-box-shadow: 0 0 40px #222; box-shadow: 0 0 40px #222; background: rgba(255, 255, 255, 0.92); z-index: 100; } .admin-bar .builder-module-navigation-background-wrapper.fixed { top: 28px; }
In the above CSS code, ensure that correct selector is being used.
Source: http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/ and http://ithemes.com/wp-content/themes/iThemes2012/js/ui.js
Method 2: Using Sticky jQuery plugin in iThemes Builder
Below instructions can be used to make nav bar and a widget as sticky (fixed position and always visible) using the Sticky jQuery plugin.
Please note that I have tested it only in Builder Default child theme. Numbers in the code and CSS may have to be adjusted for other child themes.
1. Download Sticky jQuery plugin. Extract the zip file and upload jquery.sticky.js to /assets/sticky under site root.
2. Add the following in child theme's functions.php
(before closing PHP tag if any):
add_action('wp_enqueue_scripts', 'add_my_code'); function add_my_code() { wp_enqueue_script( 'jquery-sticky', get_bloginfo('wpurl') . '/assets/sticky/jquery.sticky.js', array('jquery'), '1.0', true ); add_action( 'print_footer_scripts', 'my_footer_script' ); } function my_footer_script() { ?> <?php if(is_admin_bar_showing()) : ?> <script type="text/javascript"> jQuery(function($) { $(".builder-module-navigation").sticky({topSpacing: 28, getWidthFrom: ".builder-module-navigation-outer-wrapper"}); $("#meta-5").sticky({topSpacing: 64}); }); </script> <?php else : ?> <script type="text/javascript"> jQuery(function($) { $(".builder-module-navigation").sticky({topSpacing: 0, getWidthFrom: ".builder-module-navigation-outer-wrapper"}); $("#meta-5").sticky({topSpacing: 36}); }); </script> <?php endif; } ?>
In the above,
a) replace meta-5
with the ID of widget that you would like to make sticky.
b) replace 36 with height of nav bar
c) replace 64 with height of nav bar + 28
3. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
.sticky-wrapper.is-sticky .builder-module-navigation { border-bottom: 1px solid #d6d6d6; box-shadow: 0px 0px 16px rgba(0,0,0,0.1); } .builder-module-content .widget { background: #DDD; border-bottom: 3px solid #F1F0F0; width: 264px !important; }
In the above replace 264 with width of widget w/o left and right padding.
How to Style All First Words of Widget Titles Differently
1. Add the following in child theme's functions.php
(before closing PHP tag if any):
// ================================================== // = Assign a Class to First Word of Widget Titles = // ================================================== // load javascript in footer add_action('wp_enqueue_scripts', 'add_my_code'); function add_my_code() { add_action( 'print_footer_scripts', 'my_footer_script' ); } // Add jQuery to footer function my_footer_script() { ?> <script type="text/javascript"> jQuery(function($) { $('.builder-module-sidebar h4.widget-title').each(function() { var h = $(this).html(); var index = h.indexOf(' '); if(index == -1) { index = h.length; } $(this).html('<span class="widget-title-first-word">' + h.substring(0, index) + '</span>' + h.substring(index, h.length)); }); }); </script> <?php }
2. Add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
/**************************************************** Styling First Word of Widget Titles *****************************************************/ .widget-title-first-word { color: red; }
Source: http://blog.codez.in/jquery-css-styling-first-word-of-a-text-differently/jquery/2010/08/23
How to incorporate jQuery Kwicks Accordion in Builder
See this forum post.
Animated Responsive Image Grid
Below is how I implemented a jQuery plugin by codrops in WordPress for creating a responsive image grid that will switch images using different animations and timings.
1. Downloaded source, extracted zip file and uploaded the AnimatedResponsiveImageGrid
folder to /assets
2. Added the following at the end of child theme's functions.php
:
// ========================================= // = My Changes Below = // ========================================= // load javascript and styles in footer or head // only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ add_action('wp_enqueue_scripts', 'AnimatedResponsiveImageGrid_code'); function AnimatedResponsiveImageGrid_code() { if(is_page( '1155' )) { wp_enqueue_script( 'modernizr', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/modernizr.custom.26633.js', '2.6.2', false ); /* in head */ wp_enqueue_script( 'AnimatedResponsiveImageGrid', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/jquery.gridrotator.js', array('jquery'), true ); wp_enqueue_style( 'AnimatedResponsiveImageGrid-style', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/css/style.css' ); } } add_action('wp_enqueue_scripts', 'add_my_code'); function add_my_code() { add_action( 'print_footer_scripts', 'my_footer_script' ); } // Add jQuery to footer function my_footer_script() { ?> <!-- only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ --> <?php if(is_page( '1155' )) { ?> <script type="text/javascript"> jQuery(function($) { $( '#ri-grid' ).gridrotator( { w320 : { rows : 3, columns : 4 }, w240 : { rows : 3, columns : 3 } } ); $( '#ri-grid-2' ).gridrotator( { rows : 3, columns : 15, animType : 'fadeInOut', animSpeed : 1000, interval : 600, step : 1, w320 : { rows : 3, columns : 4 }, w240 : { rows : 3, columns : 4 } } ); }); </script> <?php } }
3.
a) Placed this (in Text view) in "Animated Responsive Image Grid" Page:
<h2>Demo 1: Random animations / 55% container width / 3s between switching</h2> <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/> <ul> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li> </ul> </div>
b) Placed this in HTML module below the content module in layout used by that Page:
<h2 style="margin-left: 1em; margin-right: 1em;">Demo 2: "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching</h2> <div id="ri-grid-2" class="ri-grid ri-grid-size-2"> <img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/> <ul> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li> <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li> </ul> </div>
4. Added the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
/* http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ */ .ri-grid-size-1 { width: 90% !important; } .ri-grid ul li, .ri-grid ul li a { width: 98px !important; height: 97px !important; } #builder-module-516519f61bcba-outer-wrapper { max-width: 100% !important; } #ri-grid-2 ul li, #ri-grid-2 ul li a { width: 94px !important; height: 94px !important; } .page-id-1155 .builder-module-content .builder-module-element { margin-bottom: 0 !important; } .page-id-1155 .hentry { margin-bottom: 0; }
Easy Accordion jQuery plugin in iThemes Builder
Live Demo [Note: Due to differences in CSS properties like font sizes between child themes and other minor customizations, the demo (which uses Air child theme) looks slightly different than the screenshot below, which was taken in Default child theme]
Easy Accordion is a jQuery plugin to create a horizontal accordion and is a free alternative to Slidedeck.
The following steps outline how the plugin's demo can be set up in a WordPress site running iThemes Builder. Once you have the following working, you can then edit the HTML, javascript parameters and CSS to suit your needs.
1. Download the full sample zip file from here under the Conclusion section. Extract the zip file and upload the resulting jQuery-easyAccordion
folder to assets
directory under your site's root.
2. Upload all the contents of jQuery-easyAccordion/images
folder to active child theme's images
directory.
3. Wherever you want the Easy Accordion to appear (in a Page or Post or HTML module etc), paste the following:
<div class="sample"> <h1>jQuery Easy Accordion Plugin</h1> <h2>Horizontal Accordion with Autoplay</h2> <p>Set the '<strong>autoStart</strong>' parameter to '<strong>true</strong>' to get a timed slideshow. You can also define the interval between each slide in milliseconds using the '<strong>slideInterval</strong>' parameter.</p> <div id="accordion-1"> <dl> <dt>First slide</dt> <dd><h2>This is the first slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img1.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> <dt>Second slide</dt> <dd><h2>Here is the second slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img2.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> <dt>One more slide</dt> <dd><h2>One more slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> <dt>Another slide</dt> <dd><h2>Another slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> <dt>Wow one more</dt> <dd><h2>Unbilievable one more slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img5.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> <dt>Last one</dt> <dd><h2>This is definitely the last one</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img6.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd> </dl> </div> <h2>Simple Horizontal Accordion</h2> <p>If you don't specify the '<strong>autoStart</strong>' parameter or if you set it to '<strong>false</strong>' you get a simple slideshow.</p> <div id="accordion-2"> <dl> <dt>Slide title</dt> <dd><h2>First mammoth here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img1.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd> <dt>Another slide</dt> <dd><h2>Over the moon!</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img2.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd> <dt>Third slide</dt> <dd><h2>Another mammoth</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img3.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd> <dt>Last slide</dt> <dd><h2>This is my favourite</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd> </dl> </div> <h2>Set the initial Active Slide</h2> <p>You can easily set the <strong>initial active slide</strong> by adding the '<strong>active</strong>' class to the respective DT element. <br />Notice that you could also remove the slide number by setting the '<strong>slideNum</strong>' parameter to '<strong>false</strong>'.</p> <div id="accordion-3"> <dl> <dt>Slide title</dt> <dd><h2>First slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img2.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd> <dt>Another slide</dt> <dd><h2>Title to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img4.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd> <dt class="active">Third slide</dt> <dd><h2>Here is the title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img1.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd> <dt>Last slide</dt> <dd><h2>Last slide title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd> </dl> </div> <p><a href="http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/">Go back to the post!</a></p> </div>
In the case of my demo, the above code has been placed in a static Page.
4. Add the following in child theme's functions.php
before closing PHP tag (if any):
// load javascript and styles in footer or header // only on http://buildersnippets.com/easy-accordion-test-page/ add_action('wp_enqueue_scripts', 'easyAccordion_code'); function easyAccordion_code() { if(is_page( '127' )) { wp_enqueue_script( 'easyAccordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/scripts/jquery.easyAccordion.js', array('jquery'), '0.1', true ); wp_enqueue_style( 'easy-accordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/css/styles.css' ); } } add_action('wp_enqueue_scripts', 'add_my_code_ea'); function add_my_code_ea() { add_action( 'print_footer_scripts', 'my_footer_script_ea' ); } // Add jQuery to footer function my_footer_script_ea() { ?> <!-- only on http://buildersnippets.com/easy-accordion-test-page/ --> <?php if(is_page( '127' )) { ?> <script type="text/javascript"> var accordion; jQuery(function($) { $('#accordion-1').easyAccordion({ autoStart: true, slideInterval: 3000 }); $('#accordion-2').easyAccordion({ autoStart: false }); $('#accordion-3').easyAccordion({ autoStart: true, slideInterval: 5000, slideNum:false }); $('#accordion-4').easyAccordion({ autoStart: false, slideInterval: 5000 }); }); </script> <?php } }
The if(is_page( '127' ))
conditional is in place to ensure that javascript is loaded and called only where needed (in this case, a specific Page vs site-wide). You would need to either change the ID or remove the conditional to suit your needs.
5. Add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
/* Easy Accordion Styling */ .sample{border:1px solid #92cdec;background:#d7e7ff;padding:30px} .easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;} dd p{line-height:120%} #accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8} #accordion-1 dl{width:800px;height:245px} #accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c} #accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat} #accordion-1 dt.hover{color:#68889b;} #accordion-1 dt.active.hover{color:#fff} #accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} #accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold} #accordion-1 .active .slide-number{color:#fff;} #accordion-1 a{color:#68889b} #accordion-1 dd img{float:right;margin:0 0 0 30px;} #accordion-1 h2{font-size:2.5em;margin-top:10px} #accordion-1 .more{padding-top:10px;display:block} #accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8} #accordion-2 h2{font-size:2.5em;margin-top:10px;} #accordion-2 dl{width:700px;height:195px} #accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c} #accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat} #accordion-2 dt.hover{color:#68889b;} #accordion-2 dt.active.hover{color:#fff} #accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} #accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold} #accordion-2 .active .slide-number{color:#fff} #accordion-2 a{color:#68889b} #accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px} #accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8} #accordion-3 h2{font-size:2.5em;margin-top:10px} #accordion-3 dl{width:700px;height:195px} #accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c} #accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat} #accordion-3 dt.hover{color:#68889b;} #accordion-3 dt.active.hover{color:#fff} #accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} #accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold} #accordion-3 .active .slide-number{color:#fff} #accordion-3 a{color:#68889b} #accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px} .sample h1 { margin-top: 0; line-height: 1; } .hentry .easy-accordion img { background: none; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; padding: 0; } .easy-accordion h2 { line-height: 1; margin-top: 0; }
Using a Shortcode in HTML Module for Custom Header
A user in the forum asked the following:
On one of my customer sites (a Builder site), we have many similar, but slightly different layouts. On all of them, we want the same custom header (in a Custom HTML module). I’d like to maintain the HTML for that custom header in one place so that I don’t have to copy and paste the header code into each layout each time I want to make a change.
One of the ways this can be done is by creating a shortcode having the HTML code needed to display the custom header and place this shortcode in HTML module of all the layouts in use. The advantage of doing so is that should you decide later on to make any changes in the HTML, it has to be done only in one place.
1. Install and activate Global Content Blocks plugin.
2. Go to Settings -> Global Content Blocks -> Add a New Content Block.
Enter a Name. This is only for your reference and is not used while executing the shortcode.
In the Content editor, enter the HTML code needed to display your custom header image.
Ex.:
<a href="http://localhost/builder3/"><img src="http://localhost/builder-responsive/wp-content/themes/BuilderChild-Default/images/header.jpg" alt="Home" /></a>
Click Save.
Note the generated shortcode which will be in the form of
[contentblock id=1]
Now add a HTML module wherever you want to the custom header image to appear and paste the shortcode. Save the module and layout.
Output on the webpage:
Depending on the active theme, there could be padding around the image which can be gotten rid of by using CSS like so:
.builder-module-1 .builder-module-element { padding: 0; } .builder-module-1 img { vertical-align: top; }
to have:
As you may probably be thinking, the output can simply be achieved by using a Image module but then it will not have the advantage of "update in one place – change everywhere".
Instead of using the plugin, we can write code similar to following in child theme's functions.php
to create shortcode and use it as above.
//logo in header add_shortcode('headercontent','getlogo'); function getlogo() { echo '<div class="headerlogo"><a href="'.get_bloginfo('home').'"><img src="'.get_bloginfo('stylesheet_directory').'/images/company-logo.png" alt="web design" /></a>'; }
In the above example, shortcode to be used would be [headercontent]
Thanks to Valerie Cudnik for providing the above code here.
How to fix positioning problem of event pop up trigger bar of All In One Calendar By Timely
Applies to plugin version: 1.9
Add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
a.ai1ec-popup-trigger { top: 0 !important; } .timely .hide.ai1ec-popup + a.ai1ec-popup-trigger { padding-top: 1em; }
Forum topic: http://ithemes.com/forum/topic/38506-all-in-one-calendar-by-timely-builder-conflict/
How to get the output of a Header module in a HTML module
Using a HTML module gives more control than a Header module in situations like this.
Output of above Header module can be simulated by using a PHP enabled HTML module having the following code:
<?php if (is_front_page()) : ?> <h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <h3 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h3> <?php else : ?> <h3 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h3> <h5 class="site-tagline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('description'); ?></a></h5> <?php endif; ?>
LayerSlider WP in Builder
Before:
After:
To fix LayerSlider from being cut off at the bottom, use the following sample CSS:
#builder-module-512b538d8a958-outer-wrapper, #builder-module-512b538d8a958, #builder-module-512b538d8a958 .widget-wrapper { overflow: visible !important; } .ls-thumbnail-slide img { height: 100% !important; }
In the above replace builder-module-512b538d8a958
with the ID of module (typically, a widget bar) in which LayerSlider is placed.
How to Set Up a Vertical Custom Menu in a Widget using Uber Menu in iThemes Builder
1. Install and activate Uber Menu.
2. Go to Appearance -> UberMenu.
a) Set Orientation
to Vertical. There is no need to enter a value for Vertical Mega Submenu Width
(even if entered, it doesn't take effect).
b) Theme Integration -> Easy Integration -> ON.
3. Go to Appearance -> Menus.
a) Create a custom menu that you would like to show vertically in a widget.
b) Tick UberMenu
under 'Activate Uber Menu Locations'. Select your desired menu in 'Theme Locations'.
4. At Appearance -> Widgets, drag a text widget in whichever sidebar you would like to show the vertical menu and paste:
[uberMenu_easyIntegrate]
Refresh your site and adjust the width of sidebar if necessary.
5. [Optional] To improve the appearance of the menu, add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
#megaMenu ul.megaMenu { width: 100%; } #megaMenu ul li.ss-nav-menu-mega ul li.ss-nav-menu-item-depth-1 { padding: 0px 27px !important; } #megaMenu ul.megaMenu li li li ul { margin-left: 1em; } /* if the widget is placed in content module's sidebar and if sub menu appears to be cut off */ .builder-module-content .builder-module-sidebar-outer-wrapper { overflow: visible !important; }
WooCommerce and iThemes Builder
How to Assign a Layout to the Main Shop page
Add the following at the end of child theme's functions.php
(before closing PHP, if any):
// ================================================= // = Assign a layout to WooCommerce main shop page = // ================================================= function custom_filter_shop_layout( $layout_id ) { if ( is_shop() ) return '5088b68b45105'; return $layout_id; } add_filter( 'builder_filter_current_layout', 'custom_filter_shop_layout' );
Change 5088b68b45105
in the above to ID of layout that you wish to assign to the shop page.
To find the ID for a Layout, go to the Layouts listing, copy the edit link for the desired Layout, paste the link somewhere, and grab the text after the last equal sign. For example, consider the following link:
http://example.com/wp-admin/admin.php?page=layout-editor&editor_tab=layouts&layout=5088b68b45105
The Layout's ID for the above is 5088b68b45105
.
Source: http://docs.woothemes.com/document/conditional-tags/
How to Change the Number of Products Per Row and Number of Products Per Page
By default, 4 products per row and per page are visible in WooCommerce shop page.
If you would like to show more number of products per page, add the following in child theme's functions.php
(before closing PHP tag, if any):
// Display 24 products per page. add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );
In the above change 24 to number of products you would like per page.
Source: http://docs.woothemes.com/document/change-number-of-products-displayed-per-page/
To change the number of products shown per row, add the following in child theme's functions.php
(before closing PHP tag, if any):
// Change number or products per row to 5 add_filter('loop_shop_columns', 'loop_columns'); if (!function_exists('loop_columns')) { function loop_columns() { return 5; // 5 products per row } }
Source: http://docs.woothemes.com/document/change-number-of-products-per-row/#customtheme
That should result in something like
Since the width of each product is set to be 22.05% via CSS, the last 2 products fall down as there is not enough space for them to fit in a single row.
The solution is to add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 16% !important; }
You will need to adjust the number 16 in the above to whatever is required so all the products get fit on a single line.
Item 3
builder_module_render_navigation
hook can be used to inject content below and/or above all nav bars in Builder.
In this example, the goal is to show featured image attached to Pages below the nav bar as a header. This way each Page can have its own unique header image.
1. Add the following in child theme's functions.php
(before closing PHP tag if present):
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 ); function show_featured_image() { if (has_post_thumbnail() && is_page()) { ?> <div class="my-featured-image-header"> <?php the_post_thumbnail(); ?> </div> <?php } }
2. Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
.my-featured-image-header img { margin-top: 0; margin-bottom: 0; vertical-align: top; } .builder-module-navigation .builder-module-element-outer-wrapper { /* if needed */ margin-bottom: 0; }
If 20
in
add_action( 'builder_module_render_navigation', 'show_featured_image', 20 );
is changed to 0
, then the function will be output ABOVE the nav bar(s).
Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/
How to Fix "Missing required fields" warnings in Structured Data Testing Tool
Rich Snippets Testing Tool can be used to check whether Google can correctly parse your structured data markup and display it in search results.
Before:
After:
The fix is to edit these active theme (ideally, should be a child theme of Builder) template files (at the minimum): index.php, archive.php, single.php, page.php and search.php.
You might have to edit other/more template files depending on your need. See http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
If any of these files are not present in the child theme, copy them from parent Builder directory into the child theme's directory and edit them.
- Title of the post should be marked with class
entry-title
- Posting date should be marked with class
updated
- Full name of the post author should be marked with class
author
accomplished by elements from hCard microformat –vcard
andfn
Sample generated HTML code should be:
<span class="entry-title">How to fix "missing required fields" warnings in Rich Snippets Testing Tool</span> <span class="updated">December 24, 2011</span> <span class="vcard author"><span class="fn">Anton Khitrenovich</span></span>
To fix Warning: Missing required field "updated"
in Builder
Locate the date
div and add updated
class to it.
Ex.:
Change
<div class="entry-meta date">
to
<div class="entry-meta date updated">
To fix Warning: Missing required hCard "author"
in Builder
Change
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="author">' . builder_get_author_link() . '</span>' ); ?>
to
<?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
Family name and Given names are taken from values entered for Last Name and First Name respectively in author's profile page.
Example of doing the above changes in Kepler child theme: http://ithemes.com/forum/topic/33858-google-rich-snippet-tool-warning-missing-required-field-entry-title/#entry156972
Tip: If a static Page is set to be shown on front page, then page.php would be the main file to edit and do the above changes. As it does not have the code for displaying author and date, the below lines can be added in the loop and CSS display property set to none to not show them on the homepage.
Ex.:
<div class="entry-meta date updated"> <?php echo get_the_date(); ?> </div> <?php printf( __( 'By %s', 'it-l10n-Builder' ), '<span class="vcard author"><span class="fn">' . builder_get_author_link() . '</span></span>' ); ?>
was added above
<!-- post content -->
In child theme's style.css:
.home .entry-title, .page .date, .page .author { display: none; }
Source:
http://technotes.khitrenovich.com/fix-missing-required-fields-warnings-rich-snippets-testing-tool/
http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/
How to Make Entire Text Widgets Clickable
When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements.
display: block
CSS can be used so the entire widget becomes clickable.
Ex.:
Code in a text widget:
<a href="#" class="my-widget-link">Mold Removal and Remediation</a>
CSS:
a.my-widget-link { display: block; font-size: 1.65em; padding: 1em; } #builder-module-514372ec66190 .widget { padding: 0; }
where builder-module-514372ec66190
is the ID of widget bar module having the widget.
How to Enable Comments For Custom Post Types
1. Ensure that support for Comments is enabled in the CPT.
How this is done depends on the method being used to set up the CPTs.
Here's an example when using CustomPress:
2. Go to My Theme -> Settings -> Comments.
Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.
3. In the CPT add/edit screen, tick Allow comments
in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick Discussion
.
There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.
Pre-requisites
- Builder parent theme AND your Builder child theme should be at least at version 4, since these are responsive capable themes.
- Responsive needs to be enabled in the child theme (functions.php should contain:
add_theme_support( 'builder-responsive' );
Include the javascript code that enables the Mobile dropdown
- Copy the
js
folder and contents from the Air child theme to your child theme. - Add the following code at the end of your child theme's
functions.php
file, yet before the closing?>
(if any):
// Enqueuing and Using Custom Javascript/Jquery function it_air_load_custom_scripts() { wp_register_script( 'it_air_jquery_additions', get_stylesheet_directory_uri() . '/js/it_air_jquery_additions.js', array('jquery'), false, true ); wp_enqueue_script('it_air_jquery_additions'); } add_action( 'wp_enqueue_scripts', 'it_air_load_custom_scripts' );
Following the code added in step 1, add the following code in functions.php
(again, before a closing ?>)
// Add Support for Alternate Module Styles if ( ! function_exists( 'it_builder_loaded' ) ) { function it_builder_loaded() { builder_register_module_style( 'navigation', 'Mobile Navigation', 'mobile-nav' ); } } add_action( 'it_libraries_loaded', 'it_builder_loaded' );
Add the following code at the end of your child themes mobile stylesheet style-mobile.css
:
/********************************************* Navigation Module (Mobile) *********************************************/ .builder-module-navigation.mobile { padding-top: .5em !important; } .builder-module-navigation.mobile ul { margin-top: .5em; } .builder-module-navigation.mobile li { width: 100%; position: relative; } /* second level stuff */ .builder-module-navigation.mobile li ul { position: relative !important; left: 0 !important; border: 0; width: 100%; margin: 0; } .builder-module-navigation.mobile li a, .builder-module-navigation.mobile .current_page_item li a, .builder-module-navigation.mobile .current-cat li a, .builder-module-navigation.mobile .current-menu-item li a { margin: 0; background: transparent; border-color: transparent; color: #3B3F42; border-bottom: 1px solid rgba(0,0,0,0.1); } .builder-module-navigation.mobile li a:hover, .builder-module-navigation.mobile .current_page_item li a:hover, .builder-module-navigation.mobile .current-cat li a li a:hover, .builder-module-navigation.mobile .current-menu-item li a:hover { background: #3B3F42; color: #ECECEC; } .builder-module-navigation.mobile li li { border: 0; width: 100%; } .builder-module-navigation.mobile li ul ul { margin: 0; } .builder-module-navigation.mobile li li a { padding: .25em 0 .25em 2em; line-height: inherit; border-radius: 2px; } .builder-module-navigation.mobile li li li a { padding-left: 4em; } .builder-module-navigation.mobile-nav .menu.hidden { display: none; } #it-mobile-menu { background: #3B3F42; color: #ECECEC; padding: .25em .75em; display: block; cursor: pointer; border-radius: 2px; -webkit-font-smoothing: antialiased; } .builder-module-navigation.mobile.borderless { border: 0; }
Add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
/********************************************* Mobile Navigation Menu (Alternate Module Style - hidden above 500px wide) *********************************************/ #it-mobile-menu { display: none; }
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.
How to set up a responsive Full Width slideshow in iThemes Builder
In this tutorial, we are going to use iThemes Slideshow plugin to set up a responsive full width slideshow in Builder.
1. Install and activate Slideshow plugin. Add a new group named say, Homepage Slider
. Edit the group and set dimensions to 1500px by 430px.
Note that these are just recommended dimensions and are not set in stone and you are free to experiment and change them as you see them fit for your needs.
Under Render Mode
, select Responsive
. Save settings.
Upload the images you wish to appear in the slide group.
2. Add the following in child theme's functions.php
before closing PHP tag (if any):
add_theme_support( 'builder-full-width-modules' ); if ( ! function_exists( 'it_builder_loaded' ) ) { function it_builder_loaded() { builder_register_module_style( 'widget-bar', 'Full Width Slider', 'widget-bar-full-width-slider' ); } add_action( 'it_libraries_loaded', 'it_builder_loaded' ); }
Note: If the first line in above, i.e., for adding full width modules support is already present, do not add it again.
3. Edit your layout and add a Widget Bar module with 1 column wherever you want the Slideshow to appear.
Select Full Width Slider
from Style dropdown.
You might want to name the module Slider
for easy identification.
4. Go to Appearance -> Widgets page for this layout and drag iThemes Slideshow widget into the Widget bar module's sidebar and ensure that your full width slider group is the selected one.
5. Add the following at the end of child theme's style.css
(WP dashboard -> Appearance -> Editor):
/* For full width slideshow */ .widget-bar-full-width-slider-background-wrapper { padding: 0; margin-bottom: 0; } .widget-bar-full-width-slider-outer-wrapper { max-width: 100% !important; }
6. Add the following in style-mobile.css
(create this file if it is not existing):
/* For full width slideshow */ #pb_slideshow_rslider-1 .nivo-prevNav { margin-left: 0 !important; } #pb_slideshow_rslider-1 .nivo-nextNav { margin-right: 0 !important; }
7. Create a new file named style-responsive.css
in the child theme and paste the following in it:
/* For full width slideshow */ .widget-bar-full-width-slider-background-wrapper { padding: 0; }