Plugin related and other generic customizations 2

This is Page 2 of Plugin related and other generic customizations in Builder. Here is Page 1.

How to add social media icons in navigation module

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 .= '<div class="socialmedia-buttons"><li><a target="_blank" rel="nofollow" href="http://www.facebook.com/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on Facebook" alt="Follow Us on Facebook" src="http://ithemes.com/builder/misc/social-media-icons/32/facebook.png"></a></li>';
        
        $items .= '<li><a target="_blank" rel="nofollow" href="http://twitter.com/#!/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on Twitter" alt="Follow Us on Twitter" src="http://ithemes.com/builder/misc/social-media-icons/32/twitter.png"></a></li>';
        
        $items .= '<li><a target="_blank" rel="nofollow" href="http://www.yoursite.com/feed/"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="Follow Us on RSS" alt="Follow Us on RSS" src="http://ithemes.com/builder/misc/social-media-icons/32/rss.png"></a></li>';
        
        $items .= '<li class="last"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 0.8; -moz-opacity: 0.8;" title="E-mail Us" alt="E-mail Us" src="http://ithemes.com/builder/misc/social-media-icons/32/email.png"></a></li></div>';
        
    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 */

.socialmedia-buttons {
	float: right;
}

.socialmedia-buttons img {
	border: 0;
	border: 0 !important;
	margin-right: 10px !important;
	display: inline;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease;
}

.socialmedia-buttons a {
	background: none !important;
	padding: 12px 0 0 5px !important;
	border-right: none !important;
}

.socialmedia-buttons a:hover {
	text-decoration: none;
	border: 0;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	-o-box-shadow: none !important;
	box-shadow: none !important;
}
.socialmedia-buttons img.fade:hover {
	opacity: 1 !important;
	-moz-opacity: 1 !important;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease;
}

Here is sample customized code for a few child themes: Default, Americana Interstate, Ionic.

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)

1. Set a title for this Page in line 12.
2. 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 show WP-Property's Single Property View inside Builder's content module

When using WP-Property plugin for Property and Real Estate Management with a active Builder child theme, a modified property.php should be placed in child theme directory for the single property entry to appear within the content module.

Before

After

The steps below are for Foundation - Blank 2.0.2 and may need to be tweaked slightly for other child themes.

1. Place a copy of wp-content/plugins/wp-property/templates/property.php in wp-content/themes/BuilderChild-Foundation-Blank

2. Wrap property.php in Builder's render_content(). Observe single.php.

Here is the customized property.php.

3. Add the following at the end of child theme's style.css:

.clearfix { display: block !important; }
.property_content .clearfix { display: inline-block !important; }

Note:

1. To display a listing of all property entries, place this shortcode in HTML view in any Page:

[property_overview]

2. If you would like to set a view for single property entries, it can be done at My Theme -> Layouts & Views -> Views.

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:

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:

Live Site

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

1. #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.
2. 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:

1. 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.
2. 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/