10 Things about WordPress Theme Modification


10 things to know about WordPress theme modification.

1. Widgets enable drag and drop functionality for content or plugins (usually sidebar / footer)

This is a bit basic, but I still find that a lot of people don’t exactly know what widgets are – or how they can use them. Your WordPress theme has to support widgets, but if you go to “Appearance->Widgets” in your WP dashboard admin, you’ll see that areas that you can drag and drop widgets to. WordPress natively has some core widgets available (like pages, categories, tags, recent posts), and a lot of plugins have their own widgets as well.

2. A WordPress theme can have unlimited “widgetized areas”

The concept of widgets is simple, and most people are used to seeing widgets in the sidebar(s) or footer. What you may not know is “widgetized areas” are added by the theme developer, and you can (literally) add a widgitized area “anywhere you want”, and you can have as many as you want. The WordPress Codex page for Widgetizing Themes is a great reference.

Let’s say (as an example) that your footer wasn’t widgitized, and you wanted to be able to drag and drop widgets to it.

You would edit the ‘functions.php’ file of your theme to contain this code to register your new footer widget (of course the before and after values may vary depending on your theme):

# Footer Widget
if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Footer Widget',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
		'before_widget' => '<div>',
        'after_widget' => '</div>',
    ));

Then you would add this code to your ‘footer.php’ file to find and show the appropriate widget(s) when the footer is called for a page:

<?php // Widgetize the Footer

	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Widget') ) : ?>
<php endif; ?>

3. Widgetized areas can be “conditional” (for specific conditions or pages)

Sometimes you may want widget(s) to be displayed only under certain conditions. Like a widget just for the homepage, or just for specific posts or category or tag pages. This when you use WordPress Conditional Tags.

In this case you would use the same code in your ‘functions.php’ file to register your widgetized area, but then you would add the conditional statement(s) code to the area where you are calling the widgetized area in theme code. Using the previous example, if it was the footer and you only wanted to display that on the footer widget on the homepage, this would be the code:

<?php // Widgetize the Footer ONLY for the homepage

  if (is home() {

	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Widget') ) : ?>
<?php endif; ?>

  } else {
  }

4. WordPress 3.0+ adds custom “menu” functionality (like widgets, but for navigation)

WordPress menus (navigation menus) were introduced in WP 3.0+. Here’s the Navigation Menus page in the WordPress Codex. Much like widgets, menu areas can be added anywhere inside a WordPress theme by first registering them in ‘functions.php’ and then adding them to theme page code. You can also “conditionally” add them using the exact same methods presented in the widgetized area examples.

5. Core theme files are index.php, single.php, page.php, header.php, footer.php, style.css

Some WordPress themes are really complex, and others have but a few files. If you are ‘tech curious’, it behooves you to dig a little deeper inside your WordPress theme and see how it works. For those of you that tinker a bit, here are some brief details about some of the most important files within every WordPress theme.

index.php: The ‘index.php’ file is the default of all WordPress themes. When loading your theme, if WordPress can’t figure out which theme file to use, the default is always index.php. For instance, when WordPress loads your homepage the first file it looks for is ‘home.php’. If you don’t have one ‘index.php’ is used. For archive pages WordPress looks for ‘archive.php’ – if your theme doesn’t have one it defaults to ‘index.php’.

single.php: The ‘single.php’ file is what is used for all posts within your WordPress web site. If you want to permanently add something to all posts sitewide, this would be the theme file to edit.

page.php: The ‘page.php’ file is the one that is used in your WordPress website to display all static paged pages (like your About page, Contact page, etc.). If you wanted to modify all your static pages sitewide,this is the file you would edit.

header.php: Generally speaking the ‘header.php’ file is for the basic HTML code that starts all webpages in your site, in addition to the display of the top portion of your page. You could modify the header of all pages sidewide by editing this one file.

footer.php: The ‘footer.php’ is the reverse of the header, it’s for the bottom of all pages and also the closing HTML code for each webpage. You can modify the footer of all pages sitewide by changing this one file.

sidebar.php Your theme may have more than one ‘sidebar.php’ file (or it could be called something slightly different), but generally speaking the sidebar is for your right/left sidebars within your web pages.

6. You can create custom headers, footers, and stylesheets to be used in certain conditions

Once again I’ll take you back to WordPress Conditional Tags. Using a conditional tag statement in your WordPress theme code, you could actually create and use multiple headers, footers, and even stylesheets in your WP theme code.

Let’s say as an example, you wanted a different header for the homepage than the rest of the site (like we do).

This is very simple, in your index.php do something like this:

<?php

  if (is home() {

	get_header(home);

  }  else {

	get_header();

  }

Then all you have to do is save your ‘header.php’ file as ‘header-home.php’, make the changes you want, and upload it to your theme directory. You can do the same with your footer, sidebars, stylesheet, etc.

Here are some references in the WordPress Codex:

function reference: get_header
function reference: get_footer
function reference: get_sidebar
function reference: get_stylesheet

7. Custom theme page “templates” can be used and then assigned to display for specific pages

There are many instances where you might want one particular page to look differently, or have different functionality. Maybe you want a series of pages to be this way. You can create a ‘page template’ based on your theme, and then assign it to be used only when you want.

Here’s how you accomplish it:

1. Download a copy of your ‘page.php’ file from your theme and “save-as” something else like ‘page-test1.php’.

2. Open the file in a text editor (like Notepad) and edit the top adding the following code:

<?php
/*
Template Name: Test 1
*/
?>


<p style="text-align: justify;">Then upload this file to your WordPress theme folder, and edit any static page from your dashboard.  On the right side under “Page attributes” you’ll see a dropdown that says “Template”, and it should have a new entry called “Test 1″.  Select it and update the page, and when displayed that theme template file will be used.</p>
<p style="text-align: justify;">You can make as many theme page templates as you want for specific pages, and then assign them to different pages on the edit screen.</p>
<strong><em>8. You can control how many posts “the_loop” shows</em></strong>
<p style="text-align: justify;">Most people with WordPress websites are just used to the fact that nearly every archive type page (homepage, category, tag, archive pages) all list “10″ posts at once.  First you should know (if you don’t already) that “the_loop” is the chunk of code that gets these posts in all WordPress theme pages.  View the <a href="http://codex.wordpress.org/The_Loop">WordPress Codex page on the_loop</a>.</p>
<p style="text-align: justify;">What you may not know is that you don’t have to specifically have the_loop on these pages (or a template page) – you can instead use the <a href="http://codex.wordpress.org/Function_Reference/WP_Query">‘wp_query’ function</a> to show any range of specific posts you want like this:</p>

//retrieve only specific pages

<?php
$args = array(
	'post_type' => 'page',
	'post__in'  => array( '595', '33', 44 )
);
$the_query = new WP_Query( $args );
?>

//display posts by author

$query = new WP_Query( 'author=123' );

//display posts by several authors

$query = new WP_Query( 'author=2,6,17,38' );

//posts from a specific category

$query = new WP_Query( 'cat=4' );

//posts for a specific tag

$query = new WP_Query( 'tag=cooking' );

You can also use wp_query to just show a portion of your last posts (like we do in the header of this blog) like this:

<?php
   $recentPosts = new WP_Query();
   $recentPosts->query('showposts=3');
?>

<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
   <li><a href="<?php the_permalink(); ?>"></li>
   <?php endwhile; ?>
</a>

9. You can control the display of each post (content or excerpt)

Each WordPress theme page that has the_loop in it has a function that gets the actual listing of posts. When you see the function the_content that means show full post content. You can just change that to the reference the_excerpt (change the word content to excerpt in the code), and those pages will show excerpted posts instead of the full post content.

If you want to change to excerpts, for example on your homepage – change this in index.php. If you want to change this on your archive pages, change this in archive.php. If you want to change your search results to excerpts change this in search.php, etc.

10. Small modifications can alter meta info and navigation for posts

Don’t be afraid to start altering your WordPress theme. Download a copy to your local desktop, and the go to “appearance->editor” in your WordPress dashboard and start mucking around!

Check out this portion of our theme code for this site:

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

            <?php while(have_posts()) : the_post(); ?>
            <div class="the-loop">
              <h2 class="title"><a href="<? the_permalink(); ?>"></h2>
              <p class="post-meta">Filed under:
                <?php the_category(' &amp;bull; '); ?>
                | </a><a href="<?php comments_link(); ?>">0) Comments',
'(1) Comment','(%) Comments'); ?>

                </a></p>
              <div class="post-content">

                <?php the_excerpt(); ?>
                <p>
                  <?php edit_post_link(); ?>
                </p>

                <div class="cleaner"></div>
              </div>
            </div>
            <?php endwhile; ?>

Can you tell what’s what? Here’s some helpful links that you can get started with in the WordPress codex while reading the code above and figuring out what’s what:

the_post function
the_permalink function
the_category function
the_title function
comments_number function
edit_post_link function

Source: www.jtpratt.com

abdee

a husband & father who like to blogging, learn to code, wordpress enthusiasm, little bit twitter and facebook, winning eleven fan, eager to move forward for better knowledge.

Related Posts Plugin for WordPress, Blogger...