10 Things to Know about WordPress Theme Modification

10 Things to Know about WordPress Theme Modification

I think any WordPress website owner that’s ‘tech curious’ should start doing their own theme modifications. You don’t have to be a PHP coder, you just need to know some basic HTML and have a little problem solving common sense.

Download a copy of your WordPress theme to your local desktop, and start opening the files and figuring out how everything works, using the tips and guidelines below – in addition to the WordPress Codex.

This post is part of the:
100 Things you Need to Know about WordPress Series given by Anthony Montalbano and myself at WordPress Ann Arbor.

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' => '

', 'after_title' => '

', 'before_widget' => '
', 'after_widget' => '
', ));

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:






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:






  } 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:



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:





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.

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.

8. You can control how many posts "the_loop" shows

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 WordPress Codex page on the_loop.

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 'wp_query' function to show any range of specific posts you want like this:



//retrieve only specific pages

 '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:



query('showposts=3');
?>

have_posts()) : $recentPosts->the_post(); ?>
	
  • 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:

    
    
                
                
    
    
    
    

    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

    About The Author

    John Pratt

    John Pratt has been working online as a digital marketer and project manager for more than 20 years. His online passions include WordPress, SEO, digital strategy, content marketing, affiliate marketing, and hacking technology. You can contact me here. Read about how I spend my spare time here.

    Shares