== Limit the content of a post that is displayed on a blog index page ==

== Limit the content of a post that is displayed on a blog index page ==

−

* '''Why''': In some cases, <tt>the_content()</tt> or <tt>the_excerpt()</tt> just don't fit your requirements.

+

* '''Why''': In some cases, <code>the_content()</code> or <code>the_excerpt()</code> just don't fit your requirements.

* '''How''': Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following [[function]] to your [[Child Theme|child theme's]] [[functions.php]].

* '''How''': Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following [[function]] to your [[Child Theme|child theme's]] [[functions.php]].

Note: See http://ithemes.com/forum/topic/31075-getting-fatal-error/page__view__findpost__p__144435 for updated code.

== How to have full width (100% wide background) modules ==

== How to have full width (100% wide background) modules ==

−

The following applies to all themes other than Americana (and its color variants) and Blueprint. All the modules in Americana and Blueprint child themes are full width by default.

+

=== When using responsive-ready child themes ===

+

+

These child themes have version number of at least 4.0. The current list of responsive-ready Builder child themes can be seen [http://ithemes.com/codex/page/Builder_Features#List_of_responsive-ready_Builder_child_themes here].

+

+

Add the following at the end of child theme's <code>functions.php</code> (WP dashboard -> Appearance -> Editor):

+

+

<pre class="brush:php;">

+

add_theme_support( 'builder-full-width-modules' );

+

</pre>

+

+

'''Note''':

+

+

# For simplicity sake, we say "full width modules". Technically speaking, it is not the modules that become full width, but their background wrappers.

+

# Few child themes like Expansion and all its color variants have the above line in their <code>functions.php</code> out of the box. In such cases, do not add it again.

+

# All custom CSS code should be placed at end of child theme's style.css.

+

+

{| class="wikitable"

+

|+ '''Before & After screenshots showing the effect of adding above line of code in Default child theme'''

+

! scope="col" | Before

+

! scope="col" | After

+

|-

+

| [[File:My Test Site 2013-01-01 10-49-01.png|475px|thumb|none]]

+

|| [[File:My Test Site 2013-01-01 10-49-27.png|475px|thumb|none]]

+

+

|}

+

+

==== Structural change as a result of adding above line of code ====

+

+

<u>Before</u>

+

+

<pre class="brush:css;">

+

.builder-container-outer-wrapper {

+

max-width: 960px;

+

width: 100%;

+

}

+

</pre>

+

+

(where 960 is the layout width)

+

+

<u>After</u>

+

+

<pre class="brush:css;">

+

.builder-container-outer-wrapper {

+

width: 100%;

+

}

+

</pre>

+

+

Note: In [http://ithemes.com/forum/topic/35775-full-width-modules-with-responsive-turned-off-builder-4011/#entry165354 few cases], we have observed that <code>.builder-container-outer-wrapper</code> isn't automatically becoming 100%. This can be observed using Firebug. In such cases, the following CSS should be used:

+

+

<pre class="brush:css;">

+

.builder-container-outer-wrapper {

+

width: 100% !important;

+

}

+

</pre>

+

+

==== How to set background of full width modules ====

+

+

===== All modules =====

+

+

If you would like to set the same background to every module of all layouts, i.e., throughout the site in a single shot, use the following sample CSS:

+

+

<pre class="brush:css;">

+

.builder-module-background-wrapper {

+

background: gray;

+

}

+

</pre>

+

+

[[File:My Test Site 2013-01-01 11-42-10.png|475px|thumb|none]]

+

+

===== A specific module based on its ID =====

+

+

If you would like to set a background to a specific full width module, use the following sample CSS:

+

+

<pre class="brush:css;">

+

#builder-module-50842a8824755-background-wrapper {

+

background: yellow;

+

}

+

</pre>

+

+

where 50842a8824755 is the ID of module in question.

+

+

[[File:My Test Site 2013-01-01 11-19-53.png|800px|thumb|none]]

+

+

The easiest way to obtain the CSS ID is by using Firebug. Below screenshot shows where <code>builder-module-50842a8824755-background-wrapper</code> can be found.

+

+

[[File:2013-01-01 11-15-31.png|800px|thumb|none]]

+

+

===== A specific module based on its position =====

+

+

It is also possible to set background of a full width module based on its position in the layout from top. For example, the following sample CSS sets yellow background to top most modules of all layouts i.e, throughout the site.

+

+

<pre class="brush:css;">

+

.builder-module-1-background-wrapper {

+

background: yellow;

+

}

+

</pre>

+

+

[[File:2013-01-01 11-35-10.png|800px|thumb|none]]

+

+

===== All modules of a certain type =====

+

+

It is also possible to set background of full width modules based on '''module type'''. For example, the following sample CSS sets yellow background to all widget bar modules in all layouts i.e, throughout the site.

+

+

<pre class="brush:css;">

+

.builder-module-widget-bar-background-wrapper {

+

background: yellow;

+

}

+

</pre>

+

+

[[File:My Test Site 2013-01-01 11-38-02.png|432px|thumb|none]]

+

+

=== When using non responsive-ready child themes ===

+

+

The following applies to all themes other than Acute (and its color variants), Americana (and its color variants), City Church, Blueprint, Scooter, Kepler, Lucky 7, Thinner, Traverse. All the module wrappers in these said child themes are full width by default.

Note:

Note:

Line 93:

Line 208:

'''3.''' To observe a module becoming full width, set a background color or image or both.

'''3.''' To observe a module becoming full width, set a background color or image or both.

In this method we are going to add code to functions.php that will make outer wrappers of all modules full width.

In this method we are going to add code to functions.php that will make outer wrappers of all modules full width.

Line 547:

Line 680:

[http://d.pr/iH9x Before] -> [http://d.pr/bdwr After]

[http://d.pr/iH9x Before] -> [http://d.pr/bdwr After]

−

Code in functions.php:

+

'''Code in functions.php''':

<pre class="brush:php;">

<pre class="brush:php;">

Line 622:

Line 755:

}</pre>

}</pre>

−

If you would like to apply different styles to different modules of the same type when using this method, use Module Styles.

+

If you would like to apply different styles to different modules of the same type when using this method, use [http://ithemes.com/codex/page/Builder_Features#Custom_Module_Styles Custom Module Styles].

Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.

Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.

The builder_comments_popup_link action triggers the builder_comments_popup_link() function by default. This function calls the comments_popup_link() function of WordPress but it also ensures that the link should be shown. For instance, the link should not be shown if the comments have been disabled for that content type per Builder's settings, if both comments and pings are disabled, or if a password is required in order to view the content and it has not been entered yet.

+

+

So keeping that call in place is very important. It can still be customized in the same way a comments_popup_link() function call is customized. Let's break out the arguments to see how that is done:

+

+

<pre class="brush:php;">

+

<?php

+

do_action(

+

'builder_comments_popup_link',

+

'<div class="alignright_comments"><span class="comments">',

+

'</span></div>',

+

__( 'Add Your Comment %s', 'it-l10n-Builder' ),

+

__( '(0)', 'it-l10n-Builder' ),

+

__( '(1)', 'it-l10n-Builder' ),

+

__( '(%)', 'it-l10n-Builder' )

+

);

+

?>

+

</pre>

+

+

Now let's see that listing again while replacing the arguments with their meaning:

+

+

<pre class="brush:php;">

+

<?php

+

do_action(

+

action name,

+

content to add before link,

+

content to add after link,

+

template which has %s replaced with the output from comments_popup_link,

+

comments_popup_link argument zero comments,

+

comments_popup_link argument one comment,

+

comments_popup_link argument more than one comment,

+

);

+

?>

+

</pre>

+

+

So if you know how to modify comments_popup_link, you should now see how you can modify this action call.

+

+

Note that all the __( 'text', 'it-l10n-Builder' ) stuff is just for translation purposes. So __( '(%)', 'it-l10n-Builder' ) just means '(%)'.

+

+

'''Usage Example'''

+

+

To have an image and the words "Add your Comment" with the image and text being a link:

+

+

Since the comments_popup_link() arguments are the ones added to the link, to add an image to the link, we need to modify those arguments. Here's a quick example:

Of course, this adds the folder icon and not a comment icon, but hopefully you can see what we are doing here and use it to add your own image. Note that get_bloginfo( 'template_directory' ) returns the base URL to the Builder directory. To get your child theme's directory URL, you can use get_bloginfo( 'stylesheet_directory' ).

Search engine results might show links from your site leading to attachment pages which are not really that useful to the visitors. If you would like to have these links redirect to their corresponding post pages, follow this:

+

+

Duplicate ''image.php'' from Builder Parent theme into your child theme directory, then replace the entire content of image.php (the one in your child theme directory) with:

Ex.: If the page URL is http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/, visit http://ithemesbuilder.com/how-to-add-easy-social-icons-in-the-wordpress-navigation-menu/?builder_debug=1 and view the page source. It should show Builder specific info like this:

+

+

[[File:2012-04-03 20-25-50.png|697px|thumb|none]]

+

+

== How to remove Header widget ==

+

+

Adding the following code in child theme's functions.php at the end (before closing PHP tag, if present) will remove Builder's Header widget from Appearance -> Widgets.

+

+

<pre class="brush:php;">

+

function unregister_some_widgets() {

+

unregister_widget('BuilderHeaderWidget');

+

}

+

add_action('widgets_init', 'unregister_some_widgets', 1);

+

</pre>

+

+

== How to set up print stylesheet such that only the content gets printed ==

The solution if floating is desired is to ensure that the floated element has a width associated with it. In order to prevent breaking the fluidity of the video, width should be set with a max-width and a width of 100% as shown below.

Create custom blog page template for Builder

Why: Although builder generates a blog index page using the content module, in some cases you might want to create your own listing of blog posts. Perhaps to select posts only from a specific category, or for whatever other reasons you can think of.

How: query_posts is a WordPress function that allows you to write your own WordPress loop. In Builder, the easiest way to create such a blog page is to

Important Note 1: the actual content part (post header, date and content) is simplified, refer to the Child Themes index.php to see how it is actually coded for that specific Child Theme.
Important Note 2: the content is displayed using the_content_limit(250, "more »") (see highlighted line), a function described in another tip on this page. You can use the_content() or the_excerpt(), depending on your requirements.

Limit the content of a post that is displayed on a blog index page

Why: In some cases, the_content() or the_excerpt() just don't fit your requirements.

How: Using a new function allows you to specify the number of characters you want to display on the blog index page, and what to use as the "more" text. Add the following function to your child theme'sfunctions.php.

The easiest way to obtain the CSS ID is by using Firebug. Below screenshot shows where builder-module-50842a8824755-background-wrapper can be found.

A specific module based on its position

It is also possible to set background of a full width module based on its position in the layout from top. For example, the following sample CSS sets yellow background to top most modules of all layouts i.e, throughout the site.

.builder-module-1-background-wrapper {
background: yellow;
}

All modules of a certain type

It is also possible to set background of full width modules based on module type. For example, the following sample CSS sets yellow background to all widget bar modules in all layouts i.e, throughout the site.

.builder-module-widget-bar-background-wrapper {
background: yellow;
}

When using non responsive-ready child themes

The following applies to all themes other than Acute (and its color variants), Americana (and its color variants), City Church, Blueprint, Scooter, Kepler, Lucky 7, Thinner, Traverse. All the module wrappers in these said child themes are full width by default.

Note:

1. PHP code given in the sections below should be put in your child theme's functions.php. If this file does not exist, create a new blank file, paste the code in between <?php and ?>, save it as functions.php and upload it to the child theme directory.

2. To set width of specific module(s) full width, the module(s) should be targeted by its/their GUID. The easiest method to obtain GUID of a module is by inspecting the module via Firebug.

In the example shown in the above screenshot, GUID of the module is: 4d14470049da5

3. To observe a module becoming full width, set a background color or image or both.

If you would like to apply different styles to different modules of the same type when using this method, use Custom Module Styles.

Ex.: Let's say there are two widget bar modules in the layout and using the above method, both would become full width. Now if you would like to set red background to one of these widget bar module and green to another, then you have to create two custom module styles for these and use them.

To see how these are implemented, observe functions.php and style.css of Blueprint or Americana child theme.

The overall idea is this:

Register the new module style using builder_register_module_style() function

Add a new style rule in child theme's style.css. For the selector name use a class with the name of module style and append "-outer-wrapper" at end.

To change widget titles from the default h4 to any other heading tag

How to extend sidebar and/or content background so they reach till the bottom

Create a 1px tall image and set it to vertically repeat as background for .builder-module-content. This image can either be created from scratch or by taking a screenshot of the site and editing in Photoshop.

The 10 min video below shows how this can be done. It shows how to create an image in Photoshop which can be set using CSS as background for Builder's content module so the sidebar(s) and element (the actual content) appear to extend all the way to the bottom.

Links to specific customization requests

Designing a widgetized footer

Positioning images at a fixed location in all widgets

Setting up Go To Top named anchor

builder_comments_popup_link action explained

The builder_comments_popup_link action triggers the builder_comments_popup_link() function by default. This function calls the comments_popup_link() function of WordPress but it also ensures that the link should be shown. For instance, the link should not be shown if the comments have been disabled for that content type per Builder's settings, if both comments and pings are disabled, or if a password is required in order to view the content and it has not been entered yet.

So keeping that call in place is very important. It can still be customized in the same way a comments_popup_link() function call is customized. Let's break out the arguments to see how that is done:

Now let's see that listing again while replacing the arguments with their meaning:

<?php
do_action(
action name,
content to add before link,
content to add after link,
template which has %s replaced with the output from comments_popup_link,
comments_popup_link argument zero comments,
comments_popup_link argument one comment,
comments_popup_link argument more than one comment,
);
?>

So if you know how to modify comments_popup_link, you should now see how you can modify this action call.

Note that all the __( 'text', 'it-l10n-Builder' ) stuff is just for translation purposes. So __( '(%)', 'it-l10n-Builder' ) just means '(%)'.

Usage Example

To have an image and the words "Add your Comment" with the image and text being a link:

Since the comments_popup_link() arguments are the ones added to the link, to add an image to the link, we need to modify those arguments. Here's a quick example:

Of course, this adds the folder icon and not a comment icon, but hopefully you can see what we are doing here and use it to add your own image. Note that get_bloginfo( 'template_directory' ) returns the base URL to the Builder directory. To get your child theme's directory URL, you can use get_bloginfo( 'stylesheet_directory' ).

How to redirect attachment links to corresponding posts

Search engine results might show links from your site leading to attachment pages which are not really that useful to the visitors. If you would like to have these links redirect to their corresponding post pages, follow this:

Duplicate image.php from Builder Parent theme into your child theme directory, then replace the entire content of image.php (the one in your child theme directory) with:

The solution if floating is desired is to ensure that the floated element has a width associated with it. In order to prevent breaking the fluidity of the video, width should be set with a max-width and a width of 100% as shown below.