Archive for iThemes Builder

Using Loopbuddy to Show a Page’s Featured Image in a Widget

Output:

Screen Shot 2013-04-04 at 2.23.17 PM

1)

LoopBuddy Query Editor ‹ iThemes Builder Test Site — WordPress

2)

Edit Page ‹ iThemes Builder Test Site — WordPress

3)

In Fondation Blank’s functions.php:

add_image_size('front-page-thumbnail', 281, 179, true);

add_theme_support( 'builder-full-width-modules' );

4)

LoopBuddy Layout Editor ‹ iThemes Builder Test Site — WordPress

Screen Shot 2013-04-04 at 2.11.40 PM

Screen Shot 2013-04-04 at 2.11.50 PM

5)

Widgets   Default ‹ iThemes Builder Test Site — WordPress

6)

Add the following at the end of child theme’s style.css (WP dashboard -> Appearance -> Editor):

#builder-module-514372ec66190 .widget {
 background: none;
 position: relative;
 padding: 5px;
 margin-left: 3%;
}

img.attachment-front-page-thumbnail {
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 background: url("http://f.cl.ly/items/242h172S0V200R2w223i/Image%202013.04.04%202:24:49%20PM.png");
 border: 1px solid #DDD;
}

/*#builder-module-514372ec66190 h4.widget-title,*/
.widget-image-title {
 font-family: 'Open Sans', sans-serif;
 background: #65B573 url("http://f.cl.ly/items/1x3T0O1x1t2u22133d2v/Image%202013.04.04%202:25:43%20PM.png");
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24);
 color: #FFF;
 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
 position: absolute;
 bottom: 18%;
 font-size: 1.1em;
 line-height: 1.2em;
 left: -1px;
 max-width: 70%;
 padding: 11px 13px 11px 23px;
 margin: 0 !important;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

.builder-module-sidebar .widget .widget-image-title a {
 color: #FFF;
 font-weight: bold;
}

#builder-module-514372ec66190-outer-wrapper,
#builder-module-514372ec66190,
#builder-module-514372ec66190 .builder-module-block-outer-wrapper {
 overflow: visible !important;
}

Styling a Select Box in WordPress Using jQuery

In a recent project that I did, one of the tasks was to display a select box (combo box) that shows items from a WordPress custom menu and styled to match the website’s overall look and that it looks the same in all major browsers.

Screenshots of output:

closed state:

open state:

Populating list box with custom menu items

I used Dropdown Menus plugin for this. This plugin adds a widget from which custom menu can be selected.

Styling the select box

From my research I realized that select boxes will be drawn by a combo of OS and browser and it is not possible to style them to have a consistent look in all browsers with just CSS alone. We have to therefore rely on jQuery (JavaScript). There seems to be at least 4 jQuery solutions for this. I have selected SelectBoxIt. The others are JavaScript image combobox, Chosen and Uniform.

I followed the instructions on SelectBoxIt’s homepage and put together a HTML file having the styled select box. If you are interested, it can be downloaded from here: Styled Select Box using jQuery static HTML page (390)

The next thing was to get this running in WordPress.

Here is the code I added to child theme’s functions.php:

// Let's hook in our function with the javascript files with the wp_enqueue_scripts hook
add_action( 'wp_enqueue_scripts', 'load_my_files' );
 
// Register javascript file(s) and enqueue where needed
function load_my_files() {
 
wp_register_style( 'prefix-style', 'http://sridhar.internal.ithemes.com/assets/wedmooning/jquery.selectBoxIt.css' );
wp_enqueue_style( 'prefix-style' );
 
// wp_deregister_script('jquery');
// wp_register_script('jquery', ('https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'), false);
// wp_enqueue_script('jquery');
// Uncomment the above 3 lines only if needed.
 
wp_register_script( 'my-jui', 'http://sridhar.internal.ithemes.com/assets/wedmooning/js/jquery-ui.custom.min.js', array('jquery'), '1.0', false );
 
wp_register_script( 'my-jsbi', 'http://sridhar.internal.ithemes.com/assets/wedmooning/js/jquery.selectBoxIt.min.js', array('my-jui'), '1.0', false );
 
wp_enqueue_script('my-jui');
 
wp_enqueue_script('my-jsbi');
 
add_action( 'print_head_scripts', 'my_header_script' );
 
}
 
// Add jQuery to head
function my_header_script() { ?>
 
<script type="text/javascript">
//Executes your code when the DOM is ready.  Acts the same as $(document).ready().
$(function() {
//Calls the selectBoxIt method on your HTML select box
var selectBox = $("select#menu-locations").selectBoxIt({
showEffect: "fadeIn",
showEffectSpeed: 600,
hideEffect: "fadeOut",
hideEffectSpeed: 600
});
});
</script>
 
<?php }

I had to make a few changes (as compared the one in static HTML page) in jquery.selectBoxIt.css.

These are some of the things to note in jquery.selectBoxIt.css:

  • .selectboxit – Set the height to that of list box’s (in closed state) height. Set the background to your desired image of the list box in closed state.
  • .selectboxit, .selectboxit-options – Set the width to that of the list box’s closed state background image.
  • ul.selectboxit-options – Set the background of the dropdown here. Set “list-style-image” to “none” to get rid of bullet images (if coming from child theme’s style.css) for the list items in IE 7.
  • .selectboxit-options li a – This selector and a few others won’t be present by default. I have added them. This particular one is needed because we want the hover to work for the full width of list item and not just the hyperlinked list item text.
  • .selectboxit-options li a:hover – Set background and text color of list items on hover.

Hope this has been helpful and will save some time and research for anyone that is looking to do the same. Let me know if you have any questions.

Bolding Search Strings And Showing Number of Search Results in iThemes Builder

Before:

After:

Bolding search strings

In a search results page excerpts of blog posts that match search criterion are shown by default. If you would like to instead display portions of text that has the search strings with the strings bolded, it can be done by using Search Exceprt plugin. After activating that plugin, copy search.php from parent Builder theme into your active child theme and edit it.

replace

<?php the_title(); ?>

with

<?php echo $title; ?>

and add the following above it

<?php
$title = get_the_title();
$keys= explode(" ",$s);
$title = preg_replace('/('.implode('|', $keys) .')/iu',
'<strong class="search-excerpt">\0</strong>',
$title);
?>

Source: http://yoast.com/wordpress-search/

Displaying number of search results

Below
<h4 class="loop-title">
 <?php
 $title = sprintf( __( 'Search Results for "<em>%s</em>"', 'it-l10n-Builder' ), get_search_query() );

 if ( is_paged() )
 printf( '%s &ndash; Page %d', $title, get_query_var( 'paged' ) );
 else
 echo $title;
 ?>
 </h4>

add

<h5>
 <?php global $wp_query;
 $total_results = $wp_query->found_posts;
 echo 'The number of search results is/are: ' . $total_results; ?>
 </h5>

Source

iThemes Builder Magazine Extension Modification to Show Wide Posts Above Posts Columns

There have been several requests for an enhanced iThemes Builder Magazine extension wherein a user-defined number of wide posts appear at the top and the remaining in columns at the bottom.

Before we (iThemes) release one officially, you can use my modified Magazine extension for this purpose.

Screenshot

Note:

  • This should be treated as unofficial with no promised support.
  • The code might not be well optimized and might have unneeded lines.
  • Wide posts will appear only on the 1st page.

Overview Video

Download

iThemes Builder Magazine Extension Modified (460)