WordPress template editing Adding custom menu, sidebar, layout etc.

You can edit a WordPress template so that it is just a HTML file which inserts the body text, but you can use some powerful tools that make the template easier to edit, and more dynamic.

Custom Menu

You can use a custom menu to make the header links, sidebar links, footer links, or other list of links to pages.

You can add, remove, reorder these links in the WordPress admin section, so no need to sift through code, or edit HTML.

Just go to the admin section, click on Appearance -> Menus
Click the + to make a new menu
add a name
in the left hand side, you can choose what pages you want to add
then drag the items to reorder them

To print a menu, use:

<?php wp_nav_menu( array('menu' => 'Menu Name' )); ?>

This will print an unordered list of the menu items.

You can display them next to each other, change the colour of the current page, and more fancy things using CSS.

Custom Sidebars

You can add different things to the sidebar using widgets

WP-admin -> Appearance -> widgets

You can add a text widget to add your own HTML

This code can be added to your sidebar.php file to print the widgets


 <?php
 if ( 'content' != $current_layout ) :
 ?>
 <div id="secondary" role="complementary">
 <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

<aside id="archives" class="widget">
 <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
 <ul>
 <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
 </ul>
 </aside>

<aside id="meta" class="widget">
 <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
 <ul>
 <?php wp_register(); ?>
 <li><?php wp_loginout(); ?></li>
 <?php wp_meta(); ?>
 </ul>
 </aside>

<?php endif; // end sidebar widget area ?>
 </div><!– #secondary .widget-area –>
 <?php endif; ?>

Custom site layouts and structures

You can have different structures to your site. one page with no sidebars, one or two sidebars etc.

Just make different “page.php” files for each layout type, and you can set them in the page settings for each page.

just add
 <?php
 /*
 Template Name: Snarfer
 */
 ?>

To your custom template

For more info: See the WordPress page on this topic

Custom CSS and Javascript in your Admin Section of WordPress

If you edit files in the admin folder of WordPress – you will lose all changes when you upgrade to a new WordPress version, so just add this to your functions.php file in your current WordPress theme.

/* ADDMING CSS TO ADMIN AREA OF WORDPRESS */
function custom_admin_css() {
 echo '
 <style type="text/css">
 #footer{background:#acacac;}
 </style>
 ';
}
add_action('admin_head', 'custom_admin_css');
/* end - ADDMING CSS TO ADMIN AREA OF WORDPRESS */