Sean Neprud

In preparation for this weekend’s incubation, I created this outline of how WordPress is structured. WordPress is Stirfry’s CMS of choice because it is simple, flexible, and highly customizeable.

I, and many other Stirfryers, are firm believers that form and content are closely related. Understanding how WordPress works, and how a WordPress site can be structured will help to create the vision for your site. What content you provide, and how you provide it, is intrinsically related to the structure and organization of the site.

With that in mind, this may help you to develop your own website.
BACKGROUND:

• WordPress is functionally based on PHP and MySQL.  The presentation is based on HTML and CSS.
  • MySQL – This is a database that stores all of the information you enter into WordPress.  The title, content, and data (author, time, categories, etc) for each post or page are all stored in the database
  • PHP – PHP is a web programming language that can do stuff with the data in the database, and use variables, operators, control structures, and functions.  The output of PHP is HTML, which your browser then reads.
  • HTML – basic internet language.  The server throws a bunch of HTML at your browser, your browser displays a web page.
  • CSS – CSS organizes and designs the HTML.  Color, size, location, images, etc, are all determined by the CSS

Basic WordPress, or WordPress straight out of the box:

• Two kinds of content: POSTS and PAGES
  • POSTS are blocks of content that are then displayed alone or as groups on webpages
  • PAGES are content that is always on a certain webpage.  They are “static” (though they are still dynamic in the web programming sense of the word)
• Posts are shown in reverse chronological order on the homepage.  You can view a single post, or you can click on various archives of posts to see only posts of that type, such as by date, a certain category, or a certain tag.
• WordPress often creates a list of the pages you create.
  The header, footer, and sidebar(s) remain the same on every webpage of your site.  Only the content area changes.
• Themes change how your site looks.
• Conceptually, this format creates a website where the most recent post is the most important, and the older a piece of content is, the less important it becomes.
  • This is similar to TV, radio, magazines, newspapers, and serialized content

Building Blocks of WordPress

• There are four default regions on a WordPress page: Header, Footer, Sidebar(s), and content.  You can add regions other than these.
• The Loop is a basic engine of WordPress.  It collects posts from the database and displays them.  The front page is a loop of all your posts.  An archive of a category, date, tag, etc, is a Loop of posts of just that type.
• Templates:
  • A template is a PHP file that describes what information is contained in a certain page or element
  • Every webpage has a template. index.php is the template for the main page, page.php is the template for your pages, archive.php is the template for looking at a category or date archive, etc.
  • Many regions have a template.  header.php, sidebar.php, footer.php are templates for the content in those regions of the webpages, comments.php describes content of that region, etc. The individual posts do NOT have a template to decribe their content. This is done in the Loop.
  • A theme is just a collection of templates and a CSS file.
  • You can create custom templates to extend WordPress beyond it’s default content presentation
• Metadata:
  • Content has metadata attached, such as author, time, and very importantly, category and tag.  You can use metadata to organize and display content.
  • Categories and Tags allow for a 2-D organization of content (which can be limiting)
  • Categories can have custom templates, not sure about tags.

Customizing WordPress

• It is easy to customize the supplied building blocks
• It is harder to add new building blocks to Worpress
• Plugins can add new building blocks
• Most (all?) changes are done by modifying the theme templates and CSS file.