Builder Plugin-related Customizations

(Difference between revisions)
Jump to: navigation, search
Line 154: Line 154:
  
 
'''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.
 
'''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.
 +
 +
 +
=Shopp =
 +
 +
[http://shopplugin.net/ Shopp] is an e-commerce plugin that adds a feature-rich online store to your WordPress-powered website or blog.
 +
 +
Shopp works out of the box in Builder without the need to edit any template files.
 +
 +
'''The steps below outline how Shopp can be set up in Builder''':
 +
 +
'''1.''' After Shopp has been installed and activated, it will create four placeholder pages.
 +
 +
[[File:Shopp-placeholder-pages.png|690px|thumb|none]]
 +
 +
Each of these pages include Shopp-specific shortcodes that are replaced with dynamic content generated by Shopp.
 +
 +
'''2.''' Go to Shopp -> Settings, Continue to Shopp Setup...
 +
 +
Go through the various settings and fill them out. Refer to links at the bottom of [http://docs.shopplugin.net/Installation this] page for details on these settings.
 +
 +
'''3.''' Presentation Settings:
 +
 +
Make sure you have saved the settings that have been entered in the previous options thus far, if any, before proceeding further.
 +
 +
a) Click on ''Use Custom Templates'' button.
 +
 +
b) Create a directory in your active theme (Builder child theme) named ''shopp''. You can either use a FTP client or your hosting cPanel file manager for this.
 +
 +
[[File:Creating-shopp-dir-in-child-theme.png]]
 +
 +
c) Reload the Presentation Settings in the WordPress/Shopp admin and click ''Install Theme Templates'' button.
 +
 +
At this point, Shopp will make a copy of the built-in default templates into the newly created shopp directory within your active theme.
 +
 +
d) Tick ''Enable theme templates'' and save changes.
 +
 +
'''4.''' Now you are ready to add products. Go to Shopp -> Products. Click Add New. Enter the details and save the product.
 +
 +
[[File:Products Builder Test Site WordPress 2011-12-03 17-53-00.png|497px|thumb|none]]
 +
 +
Note: After a product image has been added, if its thumbnail does not appear i.e., if it looks like:
 +
 +
[[File:Product-image-missing-thumbnail.png]]
 +
 +
go to Shopp -> Settings -> System and uncheck ''Enable Flash-based uploading'' next to ''Upload System''. Save changes.
 +
 +
You will have to edit the products and add images again.
 +
 +
'''Screenshots'''
 +
 +
<u>Shop page (Products listing page)</u>
 +
 +
[[File:Shop- -Builder-Test-Site-2011-12-03-18-23-09.jpg|744px|thumb|none]]
 +
 +
Live Demo: http://sridhar.internal.ithemes.com/shop/ (Dummy site, do not place orders)
 +
 +
<u>Product page</u>
 +
 +
[[File:Shop-Catalog-Products-Nike-Men-Downshifter-4-MSL-Black-Sports-Shoes- -Builder-Test-Site-2011-12-03-18-35-09.jpg|508px|thumb|none]]
 +
 +
<u>Cart page</u>
 +
 +
[[File:Cart- -Builder-Test-Site-2011-12-03-18-42-53.jpg|776px|thumb|none]]
 +
 +
 +
[http://webdesign.com/web-design-courses/under-the-hood-with-shopp-videos/ Replay videos of Under the Hood with Shopp training webinar]
 +
 +
  
 
=Yoast Breadcrumbs=
 
=Yoast Breadcrumbs=

Revision as of 09:48, July 30, 2013

Contents

Easy Custom Content Types

Easy Content Types, a commercial plugin provides an extremely easy to use and intuitive interface for creating custom post types, taxonomies, and meta boxes.

Here are some general tips on using Easy Custom Content Types for WordPress in Builder.

1. Do not use Post name permalink structure. Day and name works fine.

2. Go to plugin's settings and tick the first two under "Post Type Templates". You might also want to tick the option under "Taxonomy Templates" if you plan on using custom taxonomy archives.

2012-03-01 10-32-06.png

3. Create your Post Types.

Ex.:

2012-03-01 10-44-56.png

The URL of archive listing of entries from a CPT is: http://yoursite.com/cptslug

Ex.: http://localhost/builder/testimonials/

The URL of single CPT entry is: http://yoursite.com/cptslug/entrytitle

Ex.: http://localhost/builder/testimonials/awesome-service/

4. Check child theme directory using a FTP client or cPanel file manager. If single-<cpt>.php has not been automatically created, copy/upload single.php from parent Builder into the child theme and rename it as single-<cpt>.php.

Ex.:

2012-03-01 10-39-45.png

5. Create any necessary Meta Boxes and Meta Fields.

Ex.:

2012-03-01 10-58-00.png
2012-03-01 10-58-18.png

6. To display Meta Field in template files like single-<cpt>.php, use

<?php												
global $post;												
echo get_post_meta($post->ID, 'ecpt_clienturl', true);
?>

In the above replace "ecpt_clienturl" with the name of your field.

7. To display a Meta Field in LoopBuddy layout, use "Custom Field" tag and enter the field name in "Meta Key" text input.

2012-03-01 11-11-28.png

8. If comments area is not appearing in single CPT entry pages on the site, go to My Theme -> Settings -> Comments. Uncheck the CPT, save settings, re-check it and save settings.


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/

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


Sexy Bookmarks

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.


Shopp

Shopp is an e-commerce plugin that adds a feature-rich online store to your WordPress-powered website or blog.

Shopp works out of the box in Builder without the need to edit any template files.

The steps below outline how Shopp can be set up in Builder:

1. After Shopp has been installed and activated, it will create four placeholder pages.

Shopp-placeholder-pages.png

Each of these pages include Shopp-specific shortcodes that are replaced with dynamic content generated by Shopp.

2. Go to Shopp -> Settings, Continue to Shopp Setup...

Go through the various settings and fill them out. Refer to links at the bottom of this page for details on these settings.

3. Presentation Settings:

Make sure you have saved the settings that have been entered in the previous options thus far, if any, before proceeding further.

a) Click on Use Custom Templates button.

b) Create a directory in your active theme (Builder child theme) named shopp. You can either use a FTP client or your hosting cPanel file manager for this.

Creating-shopp-dir-in-child-theme.png

c) Reload the Presentation Settings in the WordPress/Shopp admin and click Install Theme Templates button.

At this point, Shopp will make a copy of the built-in default templates into the newly created shopp directory within your active theme.

d) Tick Enable theme templates and save changes.

4. Now you are ready to add products. Go to Shopp -> Products. Click Add New. Enter the details and save the product.

Products Builder Test Site WordPress 2011-12-03 17-53-00.png

Note: After a product image has been added, if its thumbnail does not appear i.e., if it looks like:

Product-image-missing-thumbnail.png

go to Shopp -> Settings -> System and uncheck Enable Flash-based uploading next to Upload System. Save changes.

You will have to edit the products and add images again.

Screenshots

Shop page (Products listing page)

Shop- -Builder-Test-Site-2011-12-03-18-23-09.jpg

Live Demo: http://sridhar.internal.ithemes.com/shop/ (Dummy site, do not place orders)

Product page

Shop-Catalog-Products-Nike-Men-Downshifter-4-MSL-Black-Sports-Shoes- -Builder-Test-Site-2011-12-03-18-35-09.jpg

Cart page

Cart- -Builder-Test-Site-2011-12-03-18-42-53.jpg


Replay videos of Under the Hood with Shopp training webinar


Yoast Breadcrumbs

How to implement in Builder

Yoast Breadcrumbs on WordPress.org

Determine where you want the breadcrumbs to appear and edit the appropriate template file(s) in child theme. Use this image as a reference. If a particular file is not present in the child theme directory, copy it from parent Builder directory.

Generally speaking, these are the files that you will be modifying: page.php (for static Pages), single.php (for single post pages), index.php (for Posts page) and archive.php (for category pages).

Let's consider Kepler child theme as an example and that we want to add breadcrumbs to all Pages.

Edit page.php.

Below

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

add

<?php if ( function_exists('yoast_breadcrumb') ) {
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

#breadcrumbs {
    color: #D0ECF3;
    margin-top: 0;
}

#breadcrumbs a {
    color: #FFFFFF;
}

Note: The above CSS code might have to be adjusted depending on the child theme.

This should result in
2012-06-26 21-36-17.png
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox