WordPress & PHP (CCW Part 3)

Working with UA’s WordPress Theme

UA’s WordPress theme makes use of an options panel which is located inside the WordPress dashboard. This allows for a more hands off the code type of customization. There are play by play instructions on how to use the theme located on UA’s Web Guide, http://webguide.ua.edu/wordpress.html, so we won’t be covering that.

What we will be discussing is what a WordPress Theme is composed of and how the system works to display information.

WordPress file organization/main editable pages

When you’re looking through WordPress files, you might want to know which are relatively safe to bring up and edit code wise.

WordPress takes a theme and chops it up so that it can mix and match- separating elements in a way that allows all pages to make use of common parts. (Think of it like a Mr. Potato Head.)

For example: Your header should be the same on every page- regardless of the content. Thus, WordPress takes the header and creates a file called header.php which should contain all your header elements. When you call up a page in your browser, the PHP in the content part of the page calls ‘get_header’ and so the header appears at the top of your page.

Main structural elements:

index.php                your main ‘blog’ page and default home

statichome.php     a homepage that does not have blog style content rotating on it (optional- you make it)

single.php                the base page for all your blog pages or ‘posts’

page.php                  the base page for all your ‘pages’

sidebar.php            where your sidebar is located

header.php             where your primary horizontal navigation is located

footer.php               where your footer is located

The footer, header, and sidebar will generally have your links and navigational elements. The index, statichome, single, and page will have your content. 

Content structure/hierarchy is shown below.

Structure of a completely built WordPress page is shown below.

The header will contain all your CSS, just like normal as well as your horizontal navigation.

The content page will have php linking it to the header, sidebar, and footer. The content page shown here happens to be the blog index page.

The sidebar contains your secondary links and can be placed within your content page where ever you want it to appear.

The footer will contain all your animation scripts such as JavaScript and its libraries.

PHP in WordPress

This is not a programming course, so we’re not going to dive into the proverbial PHP pool. However, that being said, I do want to give you a few helpful scripts and explain what they do. Why? Well, if you choose to have a ‘statichome.php’ that will do some things in connection with WordPress’ database- well, it just won’t fly the HTML way.

This is where PHP template tags come in. For a complete list, please refer to the WordPress Codex: http://codex.wordpress.org/Template_Tags

Template tags are used within your blog’s .php template pages to display information dynamically or otherwise customize your site. What most tags will do is pull information out of the database. Other tags arrange structure- such as the “get_header” or “get_footer” tags that attach those elements to a page.php or single.php.

Referencing

WordPress has its own database for managing content and information. In order to access the information, a PHP script is needed to make the browser load the info from the database.

In order to reference things housed in the database without knowing the entire location of the object, we use:<?php bloginfo(); ?>

This PHP gets information from the WordPress database.

A practical example and most likely the only time you’ll really use this is for images:

<img src="<?php bloginfo("template_url"); ?>/images/name.jpg" />

Elements you might like to customize display on

Some elements you might want to customize display on would be the date and time.

<?php the_date (); ?>                             <?php the_time(); ?>

You might want something short like “Thu, 21 Dec 2034” or a little longer as in “Thursday 21, December 2034”. So where are the above two examples used? They can be used anywhere- but mostly you’ll see them as ‘date posted’ in blog posts or news releases.

How to use:

<?php the_date (‘m-d-Y‘); ?>        displays:    month-day-year   ex:  08-03-2034

<?php the_date (‘M  d, Y‘); ?>     displays:    month day, year   ex:  Aug 03, 2034

<?php the_date (‘F j, Y‘); ?>       displays:    month day, year   ex:  August  3, 2034

<?php the_time(‘D, g:i a’);  ?>    displays:    day, hour:minutes am/pm  ex: Tue, 9:45 am

<?php the_time(‘l, G:i’);  ?>        displays:    day, hour:minutes  ex: Tuesday, 17:45

For more information on formatting date and time, see: http://codex.wordpress.org/Formatting_Date_and_Time

Within WordPress’ Control Panel

Most organizational customization can be easily achieved within the control panel. One of the major adjustments you’ll make in the control panel is deciding your site’s style.

Site Styles

There are 3 kinds of website homepages available: Blog Style, Static Homepage, or a combination of the two.

Blog Style
By default, WordPress will display the homepage of your website as a blog. For many themes the default will be to use a blog-style homepage.

Static Homepage
If you would like to use a static homepage to give your website a traditional website feel, there are several steps you must take:

1. Login to your WordPress account and create a new page called ‘statichome’. Only fill in the title box. Leave the rest of the page blank.
2. To the right is a section called ‘Attributes’. Under ‘Template’ select ‘Static Home Page’ and publish the page.
3. Make a new Page called ‘blog’ and publish. (Once again, only fill in the title box, and this time do not make any changes in the ‘Attributes’ section.)
4. Under ‘Settings’ on the main left toolbar, select ‘Reading’.
5. Select ‘static page’ and set the front page as ‘statichome’ and the posts page as ‘blog’. Then save the changes.

Now when you visit the actual site, your static homepage will show up as the index instead of the blog page.

Static Homepage with Blog Page
If you decide to use a static homepage, but you still want to have a blog on your site elsewhere, all you need to do is include an absolute link to your blog within your main or side navigation. You can find this link by going to the ‘blog’ page that you created above.

Advertisement