Plugin related and other generic customizations 2

(Difference between revisions)
Jump to: navigation, search
(Events Calendar Pro in Builder)
(Added = How to show WP-Property's Single Property View inside Builder's content module =)
Line 104: Line 104:
 
<u>Note</u>: If a layout is applied to this Page, ensure that it (the layout) does not have an extension applied.
 
<u>Note</u>: If a layout is applied to this Page, ensure that it (the layout) does not have an extension applied.
  
= Entry 4 =
+
= How to show WP-Property's Single Property View inside Builder's content module =
 +
 
 +
When using [http://wordpress.org/extend/plugins/wp-property/ 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.
 +
 
 +
[[File:WP-Property-single-before.png|800px|thumb|none|Before]]
 +
 
 +
[[File:WP-Property-single-after.png|800px|thumb|none|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.
 +
 
 +
[http://d.pr/1rYz Here] is the customized property.php.
 +
 
 +
'''3.''' Add the following at the end of child theme's style.css:
 +
 
 +
<pre class="brush:css;">
 +
.clearfix { display: block !important; }
 +
</pre>
 +
 
 +
<u>Note</u>:
 +
 
 +
'''1.''' To display a listing of all property entries, place this shortcode in HTML view in any Page:
 +
 
 +
<pre class="brush:html;">
 +
[property_overview]
 +
</pre>
 +
 
 +
'''2.''' If you would like to set a view for single property entries, it can be done at My Theme -> Layouts & Views -> Views.
 +
 
 +
[[File:Post-type-properties-view.png]]
 +
 
 +
= Item 3 =

Revision as of 03:18, October 12, 2011

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="//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="//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="//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="//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; }

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

Item 3

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox