MM2213 Intermediate Web Design :: Art Institute

Week 10: Advanced Topics

Advanced WordPress Topics

The following advanced topics are just an overview. You should know they exist, even if you may not be quite ready to dive in. You will not have any class assignments related to these five topics, althugh you are wecome to try one or more technique out for your final project.

Custom Menus

en.support.wordpress.com/menus

If you have a theme that supports the Custom Menus feature, you can customize your navigation menu. This allows you to:

  • Change the order of pages
  • Nest pages to create sub-menus
  • Display posts on multiple pages by creating category pages
  • Add posts, tag archives, and custom links to your navigation menu

wordpress custom menus

Creating a New Menu Region

You can use your functions.php file to register a new menu area. Here's an example of what you might add to your functions.php file to create this new menu area:

function register_my_menus() {
    register_nav_menus( array( 'header-menu' => __( 'Header Menu' ) ) );
}
add_action( 'init', 'register_my_menus' );

The first bit of red text is WordPress's slug name for the menu area. You can use a different slug, being sure to avoid spaces or special characters.

You will see your new menu area available under Appearance > Menus, and you can add a custom menu to it. The second bit of red text above is what appears in the Theme Locations box on this page (you can see mine matching this name in the screenshot above.) You can change that too.

Finally, put the menu in place in your template somewhere. For example, you might put this code into your header.php file (make sure that the bit in red matches your slug above):

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Creating a Child Theme

codex.wordpress.org/Child_Themes

A WordPress child theme is a theme that:

  • inherits the functionality of a parent theme
  • allows you to modify, or add to, the functionality of that parent theme

child theme wordpress style sheet

Custom Post Types

codex.wordpress.org/Post_Types

WordPress can hold and display many different types of content. There are five post types that are readily available to users or internally used by the WordPress installation by default. These are the two most familiar two us:

  • post
  • page

A Custom Type is a Post Type you define. These can be treated differently from your standard post types. Some examples:

  • place
  • event
  • product

Custom Fields

codex.wordpress.org/Custom_Fields

WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data. This meta data can be displayed on the front end, or hidden. Examples:

  • admission
  • website link
  • business hours

Custom Taxonomies

codex.wordpress.org/Taxonomies

A taxonomy is a way to group things together. WordPress has three built in taxonomies. You've used these two already:

  • category
  • tag

Custom taxonomies are an extremely powerful way to group various items in all sorts of ways. Some examples:

  • people
  • venue type
  • age group

Wrap Up Your Site Design

You've already worked on arranging and styling the following theme files:

  • archive.php
    a catch-all page for category listings or other post listings (ie. tags, by date, by author)
  • comments.php
    the comment box area for single posts and pages
  • footer.php
    content for the footer, and the closing body and html tags
  • header.php
    content for the header, and the opening html and body tags, as well as the head element
  • index.php
    the home page
  • sidebar.php
    content for the sidebar, either dynamic or hard-coded
  • single.php
    an individual post page
  • style.css
    styling for all site elements

Now add your special touch (and the site branding/styling) to the remaining theme files:

  • 404.php
    what shows when a page does not exist as written in the address bar
  • archives.php
    a listing of post archives by month, by subject, and by tag
  • page.php
    a static page

Dropbox go to eCompanion

Upload the following by the end of of final class session:

Week Assignment File Name
9 & 10 Home Page theme.zip

Assignment Details

Home Page

Style and configure index.php (or customized home page file) for your theme. Your home page should have at least:

  • site ID
  • basic navigation
  • text and/or image content telling us what the site is (don't get too wordy!)
  • footer/copyright

ZIP up the whole theme folder and submit it.

If you created a custom template for the home page alone, please leave a comment as to what settings need to be in WordPress for it to work.