Plugin related and other generic customizations in Builder

(Difference between revisions)
Jump to: navigation, search
m (How to delete comment author link in Builder)
(Added "How to make a div always stick to the bottom of screen")
Line 393: Line 393:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
= How to make a div always stick to the bottom of screen =
 +
 +
The steps below outline how [http://ryanfait.com/sticky-footer/ this] method can be applied in Builder to have a div always stick to the bottom of screen.
 +
 +
[[Image:Sticky-footer.png|800px|none]]
 +
 +
'''1.''' Add the following before closing PHP tag in your child theme's functions.php:
 +
 +
<pre class="brush:php;">
 +
add_action('builder_finish', 'add_custom_footer', 0 );
 +
function add_custom_footer() { ?>
 +
 +
<div class="footer">
 +
<p>Copyright &copy; 2011</p>
 +
</div>
 +
 +
<?php }
 +
</pre>
 +
 +
Replace <pre class="brush:html;"><p>Copyright &copy; 2011</p></pre> 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. Paste the following in module's text area:
 +
 +
<pre class="brush:html;">
 +
<div class="push"></div>
 +
</pre>
 +
 +
Set "Remove Wrapper DIVs" to Yes.
 +
 +
'''3.''' Add the following at the end of your child theme's style.css:
 +
 +
<pre class="brush: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;
 +
}
 +
</pre>
 +
 +
Change background and width of .footer in the above to your desired values.

Revision as of 01:47, April 11, 2011

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 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, functions.php in blog extension (if applicable) and functions.php in magazine extension (if applicable).

Replace

		<!-- Previous/Next page navigation -->
		<div class="paging 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/

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() ) : ?>

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

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

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

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox