Plugin related and other generic customizations in Builder

(Difference between revisions)
Jump to: navigation, search
(How to hide the display of Sexy Bookmarks in widget content)
(How to add a string of text at the top of Posts page?)
(7 intermediate revisions by one user not shown)
Line 1: Line 1:
 
'''This is Page 1 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2 Here] is Page 2.'''
 
'''This is Page 1 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_2 Here] is Page 2.'''
 +
 +
'''WARNING''': All the entries here are only for the purpose of documenting (mostly) my (Sridhar Katakam's) findings and discoveries of using plugins and doing other customizations in Builder which in general are beyond the scope of our support. As such there is no guaranteed support on implementing the methods listed on this page and other pages (Page 2, Page 3 etc.).
  
 
= How to add a wordpress.org style pagination =
 
= How to add a wordpress.org style pagination =
Line 205: Line 207:
 
'''1.''' Ensure that [http://codex.wordpress.org/Using_Permalinks pretty permalinks] are enabled. Create a Page titled ''Movies Page''. Do not enter any content in the Page. Just enter the title and publish.
 
'''1.''' Ensure that [http://codex.wordpress.org/Using_Permalinks pretty permalinks] are enabled. Create a Page titled ''Movies Page''. Do not enter any content in the Page. Just enter the title and publish.
  
'''2.''' Create a copy of page.php present in your child theme directory and rename it as page-''movies-page''.php. If page.php is not present in the child theme, copy it from parent Builder directory. page-movies-page.php is the custom template which will automatically be used for display of the Page titled ''Movies Page'' ([http://codex.wordpress.org/File:Template_Hierarchy.png Reference]).
+
'''2.''' Create a copy of '''index.php''' present in your child theme directory and rename it as page-''movies-page''.php. If index.php is not present in the child theme, copy it from parent Builder directory. page-movies-page.php is the custom template which will automatically be used for display of the Page titled ''Movies Page'' ([http://codex.wordpress.org/File:Template_Hierarchy.png Reference]).
  
 
'''3.''' Edit page-movies-page.php.
 
'''3.''' Edit page-movies-page.php.
Line 213: Line 215:
 
<pre class="brush:php;">
 
<pre class="brush:php;">
 
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=92&paged=$paged"); ?>
 
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=92&paged=$paged"); ?>
 +
<?php // set $more to 0 in order to only get the first part of the post
 +
global $more;
 +
$more = 0; ?>
 
</pre>
 
</pre>
  
Line 346: Line 351:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
Update: This can also be done using hooks. See [http://ithemes.com/forum/topic/29810-what-is-a-right-builder-hook-to-place-script-before-a-content-module/ this forum] post for an example.
  
 
=How to add category nicenames in body class=
 
=How to add category nicenames in body class=
Line 665: Line 672:
  
 
Save Settings.
 
Save Settings.
 +
 +
'''Update on May 29, 2012'''
 +
 +
[http://ithemes.com/forum/topic/28164-image-flicker-on-hover/page__view__findpost__p__130337 An alternative CSS3 solution (forum topic)]
  
 
= How to show excerpt of a Page with title and its featured image in a widget =
 
= How to show excerpt of a Page with title and its featured image in a widget =

Revision as of 23:13, July 5, 2012

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

WARNING: All the entries here are only for the purpose of documenting (mostly) my (Sridhar Katakam's) findings and discoveries of using plugins and doing other customizations in Builder which in general are beyond the scope of our support. As such there is no guaranteed support on implementing the methods listed on this page and other pages (Page 2, Page 3 etc.).

Contents

How to add a wordpress.org style pagination

1. Install and activate WP-Paginate plugin. While on the plugins page in WP admin, click on Settings link for the plugin.

Set

a) Pagination Label: blank

b) Previous Page: &laquo; Previous

c) Next Page: Next &raquo;

Wp-paginate-settings.png


Save Changes.

2. Edit all those theme template files (of Builder child theme that's currently active) in which you would like to replace the default Builder navigation links with your custom ones powered by WP-Paginate plugin.

The main one would be index.php. The others are archive.php, page.php, page_sitemap.php, search.php and single.php. Note: Not all these files might be present in your child theme. If you wish to make changes to a file that is not present in the child theme, then you should copy it from the parent Builder directory into child theme directory and make changes.

Replace

<!-- Previous/Next page navigation -->
				<div class="loop-utility clearfix">
					<div class="alignleft"><?php previous_posts_link( __( '« Previous Page', 'it-l10n-Builder' ) ); ?></div>
					<div class="alignright"><?php next_posts_link( __( 'Next Page »', 'it-l10n-Builder' ) ); ?></div>
				</div>

with

		<!-- Previous/Next page navigation -->
		<?php if(function_exists('wp_paginate')) {
			wp_paginate();
		} ?>

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

.wp-paginate {
	font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif !important;
}

.wp-paginate a {
	background: #FFFFFF !important; 
	border: 1px solid #ccc !important; 
	color: #21759B !important; 
	margin-right: 3px !important; 
	padding: 2px 4px !important;
	font-size: 10px !important;
	line-height: 22px !important;
}

.wp-paginate a:hover, .wp-paginate a:active {
	color: #D54E21 !important;
}

.wp-paginate .current  {
    background-color: #328AB2 !important;
    border: 1px solid #328AB2 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
	font-size: 10px !important;
}

.wp-paginate .prev, .wp-paginate .next {
	border: none !important;
	color: #2583AD !important;
	padding: 0 !important;
}

.wp-paginate .next:hover {
	border-bottom: 1px solid #D54E21 !important;
}

Note:

1. If you would like to display WP-Paginate navigation at the top of Posts page as well, paste

<!-- Previous/Next page navigation -->
	<div class="paging-top clearfix">
	<?php if(function_exists('wp_paginate')) {
		wp_paginate();
	} ?>
	</div>

immediately above

	<?php if ( have_posts() ) : ?>

and add the following at the end of your theme's style.css:

.paging-top {
	margin-bottom: 1em;
}

How to hide the display of Sexy Bookmarks in widget content

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

.widget-content .shr-bookmarks {
    display: none !important;
}

Forum thread: http://ithemes.com/forum/index.php?/topic/11466-sexy-bookmarks-and-builder/

Update: One of our users reported:

there is extra padding under each widget content area as though it's making room for SB but not displaying it

The solution is to change in Sexy Bookmarks options: "animate-expand multi-lined bookmarks" to NO

Source: http://ithemes.com/forum/index.php?/topic/14363-deleting-social-sharing-icons-from-widget-content-areas/#p66932

Update (January 18, 2012): Here is our developer's explanation on the cause of this problem. It's not just Sexy Bookmarks, but other plugins like Yet Another Related Posts Plugin also does this.

Vertical menu with sub menus expanding on mouse hover

Demo: http://screenr.com/sLb

1. Install Pixopoint Menu Plugin.

2. Drag the items (usually Categories or Pages) that you would like to show in the vertical menu at the plugin's settings page under "Main menu items". If none of the menu items children should be visible by default, i.e. the menu should be collapsed initially, expand the item and tick "Single dropdown?".

Pixopoint1.png

3. Go to Settings tab and disable stylesheet. Enable arrow mark-up.

4. Install PHP Widgetify plugin.

5. Go to Appearance -> Widgets. Drag the PHP Widgetify widget into widget area where you want the vertical menu to appear and paste the following:

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>

How to show n number of posts on front page only

If you would like to have a certain number of posts shown on the front page while keeping the number of posts shown in other views like categories and archives to the number defined for "Blog pages show at most" at Settings -> Reading, follow this:

1. Make a copy of child theme's index.php as name it as home.php. If the child theme does not contain index.php, copy it from parent Builder directory.

2. Edit home.php

Add

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("posts_per_page=3&paged=$paged"); ?>

[This code is set to show 3 posts (the most recent ones). Change the value of posts_per_page from 3 to the number of your choice]

above

<?php if ( have_posts() ) : ?>

How to show posts from a specific category on front page only

If you would like to restrict posts from a specific category on the front page while not affecting the posts shown in other views like categories and archives, follow this:

1. Make a copy of child theme's index.php as name it as home.php. If the child theme does not contain index.php, copy it from parent Builder directory.

2. Edit home.php

Add

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=3&paged=$paged"); ?>

[This code is set to show all posts from category 3. Change the value of cat from 3 to ID of your desired category]

above

<?php if ( have_posts() ) : ?>

How to show posts from certain category on a separate Page

The instructions below outline how to have all posts from a category named Movies (ID = 92 ) on a Page titled Movies Page (slug = movies-page).

1. Ensure that pretty permalinks are enabled. Create a Page titled Movies Page. Do not enter any content in the Page. Just enter the title and publish.

2. Create a copy of index.php present in your child theme directory and rename it as page-movies-page.php. If index.php is not present in the child theme, copy it from parent Builder directory. page-movies-page.php is the custom template which will automatically be used for display of the Page titled Movies Page (Reference).

3. Edit page-movies-page.php.

Add

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=92&paged=$paged"); ?>
<?php // set $more to 0 in order to only get the first part of the post
			global $more;
			$more = 0; ?>

[This code is set to show all posts from category 92. Change the value of cat from 92 to ID of your desired category]

above

		<?php while ( have_posts() ) : // The Loop ?>

Update

If you would like to just show linked post titles on the Page, follow this:

Linked-post-titles.png

Edit page-movies-page.php.

Delete

<!-- post content -->
						<div class="entry-content clearfix">
							<?php the_content(); ?>
						</div>

Change

								<h1 class="entry-title"><?php the_title(); ?></h1>

to

								<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

Builder and Gravity Forms

To ensure that Gravity Forms plugin's styling gets applied in Builder (or any other WordPress theme), ensure that "Output CSS" is set to Yes in the plugin's settings.

Source: http://ithemes.com/forum/index.php?/topic/12965-builder-gravity-forms-css-conflict-for-validation-messages/

How to let visitors control font size

There's a plugin called WP-chgFontSize which does not seem to be supported any more. It allows users to dynamically change the font size. Unfortunately it does not seem to work in our testing (see this).

A working alternative is using the method provided here.

Font-size.png

Follow these steps (Note: tested only on Default child theme)

1. Paste this code in a text file and save it as textsize.js. Upload this file to "js" directory (create one, if it doesn't exist) under the child theme.

2. Add the following before closing PHP tag in child theme's functions.php:

function my_theme_scripts() {
  
  if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   
   wp_register_script('custom_script',
       get_bloginfo('stylesheet_directory') . '/js/textsize.js');
   // enqueue the script
   wp_enqueue_script('custom_script');
}
}   
 
add_action('init', 'my_theme_scripts');

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

#textsize {
	opacity: 0.4;
	float: right;
	margin-right: 0;
	margin-top: 3px;
	padding: 0;
	width: 155px;
}

#textsize:hover {
	opacity: 1;
}

#textsize a {
	text-decoration: none;
}

4. Paste the following HTML wherever (for example: in a text widget or HTML module's text area) you want it to appear on the site:

<p id="textsize">
Font size: <a href="index.php" onclick="changeFontSize(1);return false;" title="Increase font size">A+</a>  <a href="index.php" onclick="changeFontSize(-1);return false;" title="Decrease font size">A-</a>  <a href="index.php" onclick="resetFontSize(); return false;" title="Default font size">A</a>

How to add a string of text at the top of Posts page?

Blog-page-title.png

Edit the PHP file that's being used by the Posts page. This is usually child theme's index.php. If the layout used by the Posts page has an extension applied, it could be functions.php or index.php inside the extension's directory.

Add the following immediately above <?php if ( have_posts() ) : ?>

	<?php if(is_home()) { ?>
		<div class="blog-title">This is my blog page</div>
	<?php } ?>

then add the following at the end of your theme's style.css (as an example):

.blog-title {
	font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', arial, sans-serif;
	clear: both;
	color: #2C445E;
	font-weight: normal;
	font-size: 2.3em;
	line-height: 1em;
	text-shadow: 1px 2px 0px #CDCA71;
	margin-bottom: 1em;
	text-align: center;
}

Update: This can also be done using hooks. See this forum post for an example.

How to add category nicenames in body class

Category-body-class.png

In Builder (and in many other themes) by default the body class of a single post page does not contain the categories under which the post has been categorized.

If you would like to apply a specific background to all single post pages that belong to say, "Recipes" category then by using the following code "recipes" will be one of the classes that gets applied to body class. Therefore we can target any element on a single post page belonging to "Recipes" category by prepending the CSS selector with "body.recipes".

Add the following before closing PHP tag in child theme's functions.php:

// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}

add_filter('body_class', 'category_id_class');

Source: http://codex.wordpress.org/Function_Reference/body_class#Adding_More_Classes

Note: In Builder, category/categories are present for post class by default.

How to delete comment author link in Builder

Before: Comment-author-link-before-2.png

After: Comment-author-link-after.png

1. Copy comments.php from parent Builder theme directory into the child theme directory. Edit this file.

Replace

<?php wp_list_comments(); ?>

with

<?php wp_list_comments( array( 'callback' => 'builder_comment' ) ); ?>

2. Edit child theme's functions.php. If the child theme does not have functions.php, create a new file having opening and closing PHP tags, name it as functions.php and upload it to child theme directory.

Add the following before closing PHP tag:

if ( ! function_exists( 'builder_comment' ) ) :
/**
 * Template for comments and pingbacks.
 *
 * Used as a callback by wp_list_comments() for displaying the comments. *
 * 
 */
function builder_comment( $comment, $args, $depth ) {
	$GLOBALS['comment'] = $comment;
	switch ( $comment->comment_type ) :
		case '' :
	?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
		<div id="comment-<?php comment_ID(); ?>">
		<div class="comment-author vcard">
			<?php echo get_avatar( $comment, 32 ); ?>
			<?php printf( __( '%s <span class="says">says:</span>', 'builder' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author() ) ); ?>
		</div><!-- .comment-author .vcard -->
		<?php if ( $comment->comment_approved == '0' ) : ?>
			<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'builder' ); ?></em>
			<br />
		<?php endif; ?>

		<div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
			<?php
				/* translators: 1: date, 2: time */
				printf( __( '%1$s at %2$s', 'builder' ), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)', 'builder' ), ' ' );
			?>
		</div><!-- .comment-meta .commentmetadata -->

		<div class="comment-body"><?php comment_text(); ?></div>

		<div class="reply">
			<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
		</div><!-- .reply -->
	</div><!-- #comment-##  -->

	<?php
			break;
		case 'pingback'  :
		case 'trackback' :
	?>
	<li class="post pingback">
		<p><?php _e( 'Pingback:', 'builder' ); ?> <?php comment_author(); ?><?php edit_comment_link( __( '(Edit)', 'builder' ), ' ' ); ?></p>
	<?php
			break;
	endswitch;
}
endif;

Source: Twenty Ten theme

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

li.comment p {
	margin-bottom: 1.5em;
}

How to make a div always stick to the bottom of screen

The steps below outline how this method can be applied in Builder to have a div always stick to the bottom of screen.

Sticky-footer.png

1. Add the following before closing PHP tag in your child theme's functions.php:

add_action('builder_finish', 'add_custom_footer', 0 );
function add_custom_footer() { ?>
 
<div class="footer">
	<p>Copyright © 2011</p>
</div>
 
<?php }
Replace
<p>Copyright © 2011</p>
with HTML/PHP code to show whatever you want to display in the sticky footer.

2. Edit your site's layout(s) and add a new HTML module at the end (as the last layout). Paste the following in module's text area:

<div class="push"></div>

Set "Remove Wrapper DIVs" to Yes.

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

/* To make a div always stick to the bottom of screen */

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.builder-container-outer-wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}

.footer, .push {
    height: 142px;
}

.footer {
    background: url("http://ryanfait.com/sticky-footer/footer.jpg") no-repeat 0 0;
    margin: 0 auto;
    position: relative;
    width: 700px;
}

.footer p {
	margin-top: 0;
	margin-bottom: 0;
}

Change background and width of .footer in the above to your desired values.

How to show comment form and comments list on Posts page

1. Edit your child theme's index.php. If it is not present, copy index.php from parent Builder directory into the child theme directory and edit it.

2. Replace

<?php comments_template(); // include comments template ?>

with

<?php global $withcomments; $withcomments = true; comments_template(); // include comments template ?>

3. [Optional] Delete the lines that display text similar to "Comments (0)". These would be:

<?php do_action( 'builder_comments_popup_link', '<span class="meta-comments">· ', '</span>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>

and

<?php do_action( 'builder_comments_popup_link', '<div class="alignright"><span class="comments">', '</span></div>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>

Source.

How to place banner/google ad on top of Rotating Images

Screenshot

Ad-on-top-of-rotating-images.png

Steps

1. Add a widget bar module having widget width of 100% in layout.

RI-wbm.png

Save the module's settings.

2. Below that add a HTML module with your ad code wrapped in
<div id="google-ad">
and
</div>
.

Ex.:

<div id="google-ad"><script type="text/javascript"><!--
google_ad_client = "ca-pub-1097062987503577";
/* 468x60, created 12/30/08 */
google_ad_slot = "4793151765";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>

WARNING: It might be against Google's TOS to place ads on top of static image/rotating images. Please get this clarified before you proceed further with the rest of this article if you are planning to use Google's ads.

Set Remove Wrapper DIVs to Yes.

Mms-html-module-ad.png

Save the module's settings.

Save the layout.

3. At Appearance -> Widgets, drag Rotating Images widget into the widget area of widget bar module added in step 1.

Dragging-widget-into-widgetarea.png

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

.builder-module-1 .widget, .builder-module-1 .builder-module-sidebar  {
	padding: 0;
}

#google-ad {
	position: absolute;
	right: 0;
	top: 50px;
	margin-right: 1em;
}

.builder-container  {
	position: relative;
}

Note: Change "1" in .builder-module-1 to the position of widget bar module in which Rotating Images has been placed.

How to create a widget bar section having more than 5 sidebars

See http://ithemes.com/forum/index.php?/topic/12248-ionic-green-add-and-extra-widget-to-5-multi-widget/#p57377

How to add hover effects for images like in Ionic

Visit Ionic demo site to observe the hover effect.

1. Add the following before closing PHP tag in child theme's functions.php:

wp_enqueue_script( 'jquery' );

2. Go to My Theme -> Settings.

Click on Analytics and JavaScript Code.

Paste the following in the text area under List any JavaScript or other code to be manually inserted in the site's footer just above the </body> tag in the input below.:

<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery("img").hover(
					function () {
						jQuery(this).stop().fadeTo("fast", 0.7);
					},
					function () {
						jQuery(this).stop().fadeTo("fast", 1);
					}
				);
			});
		</script>

Save Settings.

Update on May 29, 2012

An alternative CSS3 solution (forum topic)

How to show excerpt of a Page with title and its featured image in a widget

2011-06-26 08-37-59.png

While it is possible to use Query Posts Widget plugin, it will not give us complete control like the code method below.

1. Install and activate PHP Widgetify plugin.

2. Go to Appearance -> Widgets. Drag a PHP Widgetify widget into the widget area. Paste the following:

<?php if ( have_posts() ) : ?>
<?php query_posts( 'pagename=why-custom-framing' ); ?>
		<?php while ( have_posts() ) : // The Loop ?>
			<?php the_post(); ?>
		<div class="widget-post">
			<?php /*the_author_posts_link();*/ ?>
			<?php /*the_time(__('l, F j, Y', 'Builder'));*/ ?>

<h4 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
			
			<?php if (has_post_thumbnail()) { ?>
			<div class="widget-thumbnail">
				<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'widget-thumbnail' ); ?></a>
			</div>
			<?php } ?>			
			
			<!--post text with the read more link -->
			<div class="post-content">
				<?php the_excerpt(); ?>
			</div>
		</div>
	
	<?php endwhile; // end of one post ?>
	
	<?php else : // do not delete ?>
		<?php do_action( 'builder_template_show_not_found' ); ?>
	<?php endif; // do not delete ?>

In the above, why-custom-framing is the slug of the Page whose excerpt should be displayed in the widget.

Php-widget-show-page.png

Reference: http://codex.wordpress.org/Class_Reference/WP_Query#Post_.26_Page_Parameters

3. Add the following before closing PHP tag in child theme's functions.php:

		add_image_size('widget-thumbnail', 100, 100, true);

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

.widget .widget-thumbnail {
    float: left;
    margin-right: 1em;
}

.widget .post-content {
    clear: none;
}

How to add 'Leave a Comment' link to the left of Comments(#) in Posts page

Screenshot:

Leave-a-comment.png

Steps:

1. Edit child theme's index.php.

Change


					<?php do_action( 'builder_comments_popup_link', '<div class="alignright"><span class="comments">', '</span></div>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>

to

<?php do_action( 'builder_comments_popup_link', '<div class="my-alignright"><span class="my-comments">', '</span></div>', __( 'Comments %s', 'it-l10n-Builder' ), __( '(0)', 'it-l10n-Builder' ), __( '(1)', 'it-l10n-Builder' ), __( '(%)', 'it-l10n-Builder' ) ); ?>
					<div class="alignright"><a href="<?php the_permalink() ?>#respond">Leave a Comment</a>  •</div>

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

.meta-bottom .my-alignright {
    margin: 0 0 1.5em 0.5em;
    float: right;
    text-align: right;
}

How to stop Builder internal code from appearing in page source code

Builder-code-in-source.png

If code similar to above appears when you view the source of your Builder site, edit child theme's functions.php and remove this line:

echo "<!-- " . print_r( $fields, true ) . "-->\n";

How to link the content of a widget to a URL

Wrap the content of widget with
<div onclick="location.href='http://target-url.com/'" style="cursor:pointer;">
and
</div>

Example.

How to automatically add a sub menu indicator to 1st level menu items in nav bar

Before: Jquery-submenuindicator-before.png

After: Jquery-submenuindicator-after.png

jQuery Method

Note: This method works for all 4 types of navigation modules (Builder Settings Pages, Builder Settings Categories, WordPress Pages, Custom Menu).

1. If child theme's functions.php already does not have the following, add it before closing PHP tag:

		wp_enqueue_script( 'jquery' );

2. Go to My Theme -> Settings, click on 'Analytics and JavaScript Code'. Paste the following in the text area under 'List any JavaScript or other code to be manually inserted in the site's footer just above the </body> tag in the input below.':

<script type="text/javascript">
			jQuery(document).ready(function() {
jQuery(".builder-module-navigation li:has(ul)").addClass("arrow");
});
</script>

Note: If you would like this to work only for a specific navigation module, replace ".builder-module-navigation" with # followed by module's ID like so:

<script type="text/javascript">
			jQuery(document).ready(function() {
jQuery("#builder-module-4e12b7145bfa8 li:has(ul)").addClass("arrow");
});
</script>

Scroll down the page and save settings.

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

.builder-module-navigation li.arrow {
	background: url("http://k.min.us/ibDuJC.gif") no-repeat center right;
}

Note: You might want to specify the URL of your desired sub menu indicator image in the above.

PHP Method

Note: This method does not work in a navigation module. It only works when wp_nav_menu() is used like in a HTML module or a PHP widget.

1. Add the following before closing PHP tag in your child theme's functions.php:

class Arrow_Walker_Nav_Menu extends Walker_Nav_Menu {
    function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
        $id_field = $this->db_fields['id'];
        if (!empty($children_elements[$element->$id_field])) { 
            $element->classes[] = 'arrow'; //enter any classname you like here!
        }
        Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

2. Edit your layout, add a HTML module, paste the following code and enable PHP:

<?php wp_nav_menu( array('walker' => new Arrow_Walker_Nav_Menu, 'menu' => 'Main Menu', 'menu_class' => 'builder-module-navigation') ); ?>

Change 'Main Menu' in the above to the name of your custom menu.

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

a.

.meta-bottom .my-alignright {
    margin: 0 0 1.5em 0.5em;
    float: right;
    text-align: right;
}

b.

[Optional - tested in HeatWave child theme] Also add the following:

.builder-module-1 .builder-module-navigation {
	height: 30px;
	margin-left: 0;
	border-left: none !important;
	border-right: none !important;
}

Change '1' in '.builder-module-1' in the above to the position of HTML module in the layout from top.

Meta

Source: http://stackoverflow.com/questions/3558198/php-wordpress-add-arrows-to-parent-menus

Forum topics:

  1. http://ithemes.com/forum/index.php?/topic/9881-submenu-indicator/
  2. http://ithemes.com/forum/index.php?/topic/15843-arrow-on-menu-to-indicate-more-items/

How to add Register and Log in links at the top of your Builder site

Highlighted links will change to Site Admin and Log out for admins

1. Edit your child theme's functions.php.

Add the following at the end (before closing PHP tag, if present):

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

function add_custom_header() { ?>
	<div id="my_custom_header">
		<ul id="headerlinks">
			<?php wp_register(); ?>
			<li><?php wp_loginout(); ?></li>
		</ul>
	</div>	
<?php }

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

#headerlinks li
{
	display: inline;
	list-style-type: none;
	padding-right: 20px;
}

#my_custom_header {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#headerlinks {
	float: right;
	position: absolute;
	right: 0;
}

3. At Settings -> General, place a tick mark in "Membership: Anyone can register" box.

If you would like to show the links in a 100% wide horizontal bar at the top of site,

So you want a login bar, ha?

use this PHP:

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

function add_custom_header() { ?>
	<div id="my_custom_header_wrapper">
		<div id="my_custom_header">
			<ul id="headerlinks">
				<?php wp_register(); ?>
				<li class="last"><?php wp_loginout(); ?></li>
			</ul>
		</div>
	</div>	
<?php }

and this CSS:

#headerlinks li
{
	display: inline;
	list-style-type: none;
	padding-right: 20px;
}

#my_custom_header_wrapper {
	background: #DDDDDD;
	height: 30px;
}

#my_custom_header {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#headerlinks {
	float: right;
	position: absolute;
	right: 0;
	margin-top: 4px;
}

li.last {
	padding-right: 0 !important;
}

jQuery Mega Menu in Builder

jQuery Drop Down Mega Menu Widget plugin will allow you to quickly and easily create drop down mega menus from any WordPress custom menu. It has 8 built-in skins (styles).

For the purpose of this tutorial, let's add a 1-column widget bar module in our layout. Next go to Appearance -> Widgets and drag a jQuery Mega Menu widget into the widget area.

JQueryMegaMenu-widget.png

When we check the site (having BuilderChild-Default as the active theme), the sub menus will not appear by default.

Jmm-menu-before.png

and depending on the child theme being used, there could be padding around the widget.

Jmm-firebug1.png

To remove unwanted spacing around widget, the following has been added at the end of child theme's style.css:

#dc_jqmegamenu_widget-3 {
    padding: 0; /* To remove the padding around widget - needed only in some child themes */
}

#builder-module-4e2cfbc65ee6f .builder-module-sidebar {
    padding-top: 0; /* To remove the top padding for the sidebar - needed only in some child themes */
    padding-bottom: 0; /* To remove the bottom padding for the sidebar - needed only in some child themes */
}

To make the submenus appear, we need to:

  1. Set position of the widget as absolute and specify its width.
  2. Set the height for one of widget's parent div.

So the final CSS would be:

#dc_jqmegamenu_widget-3 {
    padding: 0; /* To remove the padding around widget - needed only in some child themes */
    position: absolute;
    width: 1000px; /* Set this to width of layout in the case of 1-column widget bar module or whatever is the width of sidebar in which this widget is present */
}

#builder-module-4e2cfbc65ee6f .builder-module-sidebar {
    padding-top: 0; /* To remove the top padding for the sidebar - needed only in some child themes */
    padding-bottom: 0; /* To remove the bottom padding for the sidebar - needed only in some child themes */
    height: 40px; /* This value can be obtained by going to Computed tab in Firebug when this div is selected. See Screenshot A below. */
}

In the above the ID of widget and layout must be changed to those on your site.

Screenshot showing fully working jQuery Mega Menu in Builder

Screenshot A:

Jmm-firebug2.png

That's it!

Note: Instead of setting position of widget as absolute, we can set absolute position for either #menu-menu-1 or #dc_jqmegamenu_widget-3-item above it or #dc_jqmegamenu_widget-3. Remember to set the height for the chosen element's parent.

Jmm-firebug3.png

This principle also applies when using similar dropdown menu plugins like Pixopoint. See # 4 at http://ithemes.com/forum/index.php?/topic/10927-help-with-custom-navigation/#p52256

How to add social media icons floating at top right

Adding-social-icons-site1.png
Adding-social-icons-site2.png

Note:

  • The icons will appear through out the site. It is not possible to restrict them to certain layouts when using this method.
  • Please upload the png images to your own server and use them.

1. Edit your child theme's functions.php.

Add the following at the end (before closing PHP tag, if present):

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

function add_social_icons() { ?>
	<div class="socialmedia-buttons-container">
		<div class="socialmedia-buttons">
			<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>
			
			<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>
			
			<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>
			
			<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>		
		</div>
	</div>	
<?php }
Adding-social-icons-editor.png

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

/* Custom Styles For The Social Media Widget Icons */

.socialmedia-buttons-container {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

.socialmedia-buttons {
	float: right;
	position: absolute;
	right: 0;
}

.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;
}

.socialmedia-buttons a:hover {
	text-decoration: none;
	border: 0;
}
.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;
}

Source: http://wordpress.org/extend/plugins/social-media-widget/

///**********************************************************///

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

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox