'''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 21:

Line 25:

Save Changes.

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.

+

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

+

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.

'''Update''' (January 18, 2012): [http://ithemes.com/forum/topic/22371-widgets-display-unwanted-related-posts-content/page__view__findpost__p__105841 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 =

= Vertical menu with sub menus expanding on mouse hover =

Line 185:

Line 199:

<pre class="brush:php;">

<pre class="brush:php;">

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

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

+

</pre>

+

+

= 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 [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 '''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]).

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.

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

+

+

[[Image:2011-06-26 08-37-59.png|800px|none]]

+

+

While it is possible to use [http://justintadlock.com/archives/2009/03/15/query-posts-widget-wordpress-plugin Query Posts Widget] plugin, it will not give us complete control like the code method below.

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

+

+

<pre class="brush:php;">

+

wp_enqueue_script( 'jquery' );

+

</pre>

+

+

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

+

+

<pre class="brush:html;">

+

<script type="text/javascript">

+

jQuery(document).ready(function() {

+

jQuery(".builder-module-navigation li:has(ul)").addClass("arrow");

+

});

+

</script>

+

</pre>

+

+

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:

+

+

<pre class="brush:html;">

+

<script type="text/javascript">

+

jQuery(document).ready(function() {

+

jQuery("#builder-module-4e12b7145bfa8 li:has(ul)").addClass("arrow");

+

});

+

</script>

+

</pre>

+

+

Scroll down the page and save settings.

+

+

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

+

+

<pre class="brush:css;">

+

.builder-module-navigation li.arrow {

+

background: url("http://k.min.us/ibDuJC.gif") no-repeat center right;

+

}

+

</pre>

+

+

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.

<u>Note</u>: 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.

+

+

[[File:Jmm-firebug3.png|800px|thumb|none]]

+

+

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 =

+

+

[[File:Adding-social-icons-site1.png|800px|thumb|none]]

+

+

[[File:Adding-social-icons-site2.png|800px|thumb|none]]

+

+

<u>Note</u>:

+

+

* The icons will appear through out the site. It is not possible to restrict them to certain layouts when using this method.

'''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.'''

Revision as of 00:13, July 6, 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.).

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;

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.

Vertical menu with sub menus expanding on mouse hover

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?".

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.

[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:

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).

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

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.

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

How to add category nicenames in body class

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:

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.

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.

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

jQuery Method

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

jQuery Mega Menu in Builder

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.

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

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

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:

Set position of the widget as absolute and specify its width.

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:

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.