Builder Tips and Tricks

(Difference between revisions)
Jump to: navigation, search
(Create your own blog index page in Builder)
(Create your own blog index page in Builder)
Line 1: Line 1:
== Create your own blog index page in Builder ==
+
== 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.
 
* '''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''': [http://codex.wordpress.org/Function_Reference/query_posts 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
 
* '''How''': [http://codex.wordpress.org/Function_Reference/query_posts 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

Revision as of 16:27, November 10, 2010

Contents

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
    • create a page template,
    • upload to your WordPress site,
    • write a new page (no need to add content),
    • select the newly created page template,
    • and publish the page.

Your page template should look something like this:

<?php
/*
Template Name: Generic Blog Index Page
*/
?>
<?php

function render_content() {
	
?>

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

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( current_theme_supports( 'post-thumbnails' ) ) : ?>
            <?php the_post_thumbnail( array( 125, 125 ), array( 'class' => 'thumb' ) ); ?>
        <?php endif; ?>
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <?php the_time( __( 'l, F j, Y', 'it-l10n-Builder' ) ); ?>
        <?php the_content_limit( 250, "more »" ); ?>
    <?php endwhile; ?>

    <div class="alignleft"><?php previous_posts_link('« Previous Page') ?></div>
    <div class="alignright"><?php next_posts_link('Next Page »') ?></div>
<?php endif; ?>

<?php

}

add_action( 'builder_layout_engine_render_content', 'render_content' );

do_action( 'builder_layout_engine_render', basename( __FILE__ ) );

?>

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's functions.php.
function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
    $content = get_the_content($more_link_text, $stripteaser, $more_file);
    $content = apply_filters('the_content', $content);

   if (strlen($_GET['p']) > 0) {
      echo $content;
   }
   else if ((strlen($content)>$max_char) && ($space = strpos($content, " ", $max_char ))) {
        $content = substr($content, 0, $space);
        echo $content = $content . " <a href='"; the_permalink(); echo "'>".$more_link_text."</a>";
   }
   else {
      echo $content;
   }
}

(Note: 95% of the code is based on this plugin by Alfonso Sanchez-Paus Diaz and Julian Simon de Castro).

Add a full width Header and/or Footer to your Builder theme

  • Why: Because you want to
  • How: Detailed instructions in this article.

Use a 100% width background for one or more modules

  • Why: You have a design that requires that one or more modules have a background wider than the layout width.
  • How: Using just CSS, the width of the container and the modules can be expanded to 100%; however, it will be difficult to style specific modules this way. The solution is to first remove the width limitation of both the layout container and each module's outer wrapper and then add a new div that constrains the module content to a specific width and centers it again.

Add the following function to your child theme's functions.php.

<?php

function custom_remove_container_width( $fields ) { 
    foreach ( (array) $fields['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_filter_container_outer_wrapper_attributes', 'custom_remove_container_width', 20 );

function custom_remove_module_width( $fields ) {
    /* add module specific rules here */
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}
add_filter( 'builder_module_filter_outer_wrapper_attributes', 'custom_remove_module_width', 20 );

function custom_add_open_module_wrapper( $fields ) { 
    $width = apply_filters( 'builder_get_container_width', 0 );
    
    echo "<div class='builder-module-limit-width-wrapper clearfix' style='width:{$width}px;margin:0 auto;'>\n";
}
function custom_add_close_module_wrapper( $fields ) { 
    echo "</div>\n";
}
add_action( 'builder_module_render_contents', 'custom_add_open_module_wrapper', 0 );
add_action( 'builder_module_render_contents', 'custom_add_close_module_wrapper', 20 );

?>

Note that the '<?php' and '?>' lines only needed to be used if the code is added inside of existing '<?php' and '?>' tags.

The following screenshot shows Builder Child Default after this code was added to a new functions.php file.

Builder-tip-full-width-module-backgrounds.png

The "add module specific rules here" comment in the custom_remove_module_width function above marks an area that could be used to limit the full-width background to specific modules. For example, the following modification of the custom_remove_module_width function results in only the Navigation modules getting full-width module backgrounds.

function custom_remove_module_width( $fields ) { 
    if ( 'navigation' !== $fields['module'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

To use full-width backgrounds on all modules other than Content and Image modules, use the following modification.

function custom_remove_module_width( $fields ) { 
    if ( in_array( $fields['module'], array( 'content', 'image' ) ) ) 
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}

If a specific module is the one to get the full-width background, the module's GUID can be used to test for the right module.

function custom_remove_module_width( $fields ) { 
    if ( '4bc3c9b3bbf52' !== $fields['guid'] )
        return $fields;
    
    foreach ( (array) $fields['attributes']['style'] as $index => $rule ) { 
        if ( preg_match( '/^width:/', $rule ) ) 
            unset( $fields['attributes']['style'][$index] );
    }
    
    return $fields;
}
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox