Plugin related and other generic customizations 2

From IThemes Codex
Revision as of 10:36, November 24, 2011 by Sridhar (Talk | contribs)
Jump to: navigation, search

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

Contents

How to add social media icons in navigation module

Social-icons-navbar.png

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

Page-mag-style.png

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.

Post-type-properties-view.png

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:

Rounded-corners-ff.png

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:

Rounded-corners-ie8.png

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/

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox