Plugin related and other generic customizations 2

From IThemes Codex
Revision as of 00:48, March 1, 2012 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 .= '<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="http://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="http://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="http://ithemes.com/builder/misc/social-media-icons/32/rss.png"></a></li>';
        
        $items .= '<li class="social-icon"><a target="_blank" rel="nofollow" href="mailto: admin@yoursite.com"><img class="fade" style="opacity: 1; -moz-opacity: 1;" title="E-mail Us" alt="E-mail Us" src="http://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!

Sample implementations:

1. Traverse with round icons:

2011-11-26 10-27-16.png

Forum topic

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 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/

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.

Shopp-placeholder-pages.png

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.

Creating-shopp-dir-in-child-theme.png

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.

Products Builder Test Site WordPress 2011-12-03 17-53-00.png

Note: After a product image has been added, if its thumbnail does not appear i.e., if it looks like:

Product-image-missing-thumbnail.png

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)

Shop- -Builder-Test-Site-2011-12-03-18-23-09.jpg

Live Demo: http://sridhar.internal.ithemes.com/shop/ (Dummy site, do not place orders)

Product page

Shop-Catalog-Products-Nike-Men-Downshifter-4-MSL-Black-Sports-Shoes- -Builder-Test-Site-2011-12-03-18-35-09.jpg

Cart page

Cart- -Builder-Test-Site-2011-12-03-18-42-53.jpg

How to add smooth animation effect for navigation menus

Live demo

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() {
            jQuery(".menu ul").css({display: "none"}); // Opera Fix
            jQuery(".menu li").hover(function(){
                           jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(500);
            },function(){
                            jQuery(this).find('ul:first').css({visibility: "hidden"});
            });
  });
</script>

Save settings.

Note: in the code sample, it is assumed that your menu unordered list tag has a class of "menu" (<ul id="menu-main" class="menu">). To make sure, inspect the menu using Firebug.

Forum topic.

How to float a div at any position on top of other elements in the container

Screen Shot 2011-12-19 at 10.37.52 PM.png

1. Add the following in child theme's functions.php:

add_action('builder_layout_engine_render_container', 'add_floating_box', 0 );

function add_floating_box() { ?>
	<div id="floating-box-container">
		<div id="floating-box">
			HTML 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 {
	width: 1000px; /* set this to container (layout) width */
	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.

Screenshot showing the div structure

A practical example of implementing this method can be found here.

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.

2012-03-01 10-32-06.png

3. Create your Post Types.

Ex.:

2012-03-01 10-44-56.png

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.:

2012-03-01 10-39-45.png

5. Create any necessary Meta Boxes and Meta Fields.

Ex.:

2012-03-01 10-58-00.png
2012-03-01 10-58-18.png

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.

2012-03-01 11-11-28.png
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox