Architect FAQ and Tips and tricks

From IThemes Codex
Revision as of 23:43, March 2, 2011 by Ronald (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

How to enable WordPress 3 navigation using a Child Theme

In order to preserve your original theme, you can use Child Themes to apply the modifications required to enable WordPress 3 menus in your Architect theme, without having to modify any of the original theme files. Download a Child Theme for Architect, that includes all the required modifications. Unzip and upload the Child Theme to your themes folder, and activate it, just as you would activate any other theme. It is assumed that your base Architect theme is located in a folder named "Architect" (case sensitive).

How to enable WordPress 3 navigation manually

Alternatively, you can apply the changes manually to each file, and follow the steps listed below. Make a backup copy of the theme files that you will be changing, in case the result is not as expected.

modify functions.php

Add the following code to your functions.php

// register navigation menus if WordPress version supports it
add_action( 'init', 'ithemes_register_menu' );
function ithemes_register_menu() {
        if ( function_exists( 'register_nav_menu' ) ) {
        // Add 3.0+ menu support
        add_theme_support( 'menus' );
        // This theme uses wp_nav_menu() in one location.
        register_nav_menu( 'primary', __( 'Primary Menu' ) );
    }
}

if ( ! function_exists( 'wp_nav_menu' ) ) {
    function wp_nav_menu( $args ) {
            call_user_func( $args['fallback_cb'] );
    }
}

function ithemes_navigation() {
    wp_nav_menu( array('theme_location' => 'primary', 'fallback_cb' => 'ithemes_render_menu'));
}

function ithemes_render_menu() { ?>

    <?php global $wp_theme_options; ?>
    <?php /* A link back to the homepage ... unlesss the user chose to omit it */ ?>
    <?php if ( in_array( 'home',(array) $wp_theme_options['include_pages'] ) ) : ?>
            <li class="home <?php if ( is_home() ) { echo 'current_page_item'; } ?>"><a href="<?php echo get_settings('home'); ?>">Home</a></li>
    <?php endif; ?>

    <?php /* Lists pages, excludes pages selected in theme options */ ?>
    <?php if ( ! empty( $wp_theme_options['include_pages'] ) ) : ?>
            <?php $include = implode( ',', (array) $wp_theme_options['include_pages'] ); ?>
            <?php $my_pages = "title_li=&sort_column=menu_order&include=$include"; ?>
            <?php wp_list_pages( $my_pages ); ?>
    <?php endif; ?>

<?php }

modify header.php

Replace all code inside the <ul id="nav"> and the closing </ul> with the following code:

          <?php ithemes_navigation(); ?>

modify style.css (optional)

The current dropdown menu in Architect doesn't allow more than 1 level dropdown navigation. If you do want to have multiple level dropdown, add the following code to the stylesheet. If you do NOT need additional navigation levels, there is no need to add this code.

#nav li ul ul {
	margin: -33px 0 0 201px;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover,
#nav li.sfhover { 
	position: static;
}

How to create a page template without sidebars

First, create a new page template (http://codex.wordpress.org/Pages#Page_Templates)

Name it whatever you want, let's say that

<?php
/*
Template Name: Page No Sidebars
*/
?>

makes sense. Copy the contents of the page.php file in your template, leaving the code described above intact.

Your template should now look like this:

<?php
/*
Template Name: Page No Sidebars
*/
?>
<?php get_header(); ?>

<div id="content">
	<div id="content_wide">
		  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  		<h1><?php the_title(); ?></h1>
		
  		<?php the_content(__('Read more'));?>
  		<div style="clear:both;"></div>
		<?php endwhile; else: ?>	
		  <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
		<?php endif; ?>
	</div>
	<?php get_sidebar(); ?>
</div>

<!-- The main column ends  -->

<?php get_footer(); ?>

Change the following code (marked above): <div id="contentleft"> to <div id="content_wide"> and

Remove the following code (marked above), at the bottom of the template: <?php get_sidebar(); ?>

Finally, modify your style.css. What you need to do is COPY all markup for the #contentleft div, rename that to #content_wide, and only change the width (or just take it out since we are using full width anyway). As it is pretty obvious I will only list the new #content_wide markup. Add this code to the bottom of your style.css:

#content_wide {
	float: left;
	width: 540px;   <===== delete this line (or change width to 880)
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 20px 20px;
	}

#content_wide p img {
	border: none;
	margin: 0px 10px 0px 0px;
	}

#content_wide ol {
	margin: 0px 0px 0px 5px;
	padding: 0px 0px 15px 0px;
	}

#content_wide ol li {
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
	}

#content_wide ul {
	list-style-type: square;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 15px 0px;
	}

#content_wide ul li {
	list-style-type: square;
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
	}

Now go into your Write Page panel, and select the "Page No Sidebars" template.


Back to the main Architect page

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox