Plugin related and other generic customizations 2

(Difference between revisions)
Jump to: navigation, search
m (How to display Posts from a specific category on a Page in Magazine Extension style)
(Added = Events Calendar Pro in Builder =)
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 3 =
+
= Events Calendar Pro in Builder =
 +
 
 +
[http://premium.shaneandpeter.com/events-calendar-pro/ Events Calendar Pro] is a commercial plugin for event management in WordPress. To ensure proper rendering of pages generated by this plugin when a Builder child theme is active, download and use [http://d.pr/5Uaf this] file.
 +
 
 +
Read and follow the README.txt file after extracting the zip file. Note that this has only been tested with the current latest version (v1.3.2) of Events Calendar Pro plugin.
 +
 
 +
Thanks to [http://kopepasah.com/ Justin Kopepasah].
  
 
= Entry 4 =
 
= Entry 4 =

Revision as of 11:53, August 24, 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="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.

Events Calendar Pro in Builder

Events Calendar Pro is a commercial plugin for event management in WordPress. To ensure proper rendering of pages generated by this plugin when a Builder child theme is active, download and use this file.

Read and follow the README.txt file after extracting the zip file. Note that this has only been tested with the current latest version (v1.3.2) of Events Calendar Pro plugin.

Thanks to Justin Kopepasah.

Entry 4

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox