Oenology

Posts filed under Oenology

Beginning Git Cheat Sheet

Filed in Web DevelopmentTags: Git, Oenology, Themes, WordPress

Since Theme developers don't (at least, not yet) have SVN-commit access for the WordPress Theme Repository, I decided to host Oenology on GitHub. Git is an entirely different beast from Subversion, so it took me a bit to figure out exactly how to use it.

So, for the most part, this post is my own personal cheat sheet, though perhaps someone else new to Git might also find it helpful.

Initial Setup

Generate SSH Keypair:

ssh-keygen -t rsa -C "name@domain.com"

Setup local system's global Git username and password:

git config --global user.name "User Name"
git config --global user.email name@domain.com

Setting Up a Local Repository

One major difference between SVN and Git that I quickly discovered is that SVN defaults to setting up subdirectories for the working copy (/trunk) and previously tagged versions (/tags), but Git does not. So, whereas with SVN, my local repository checkout (i.e. the directory tracked by SVN) was simply a directory called /oenology, with Git, it made more sense for me to create my own subdirectories: /master for the working copy and /tags for tagged versions, and then do my Git checkout in /oenology/master.

Change path to working directory:

cd ~/<path>/oenology/master

Initialize local directory as a Git repository:

git init

Checkout the remote repository:

git remote add origin git@github.com:<username>/<repository>.git

Working With Git Repositories

Add (stage) all files in the local directory to the repository:

git add .

Commit (snapshot) all file changes in the local directory:

git commit -m "Commit Message"

Push all snapshots to the remote repository:

git push origin master

Working With Tags

Tag the current snapshot:

git tag -a "Version Number"

Push all tags to the remote repository:

git push origin --tags

Delete a tag:

git tag -d "v12345"
git push origin :refs/tags/v12345

Working With Branches

List Branches:

git branch

Create a Branch:

git branch {branch}

Switch to a Branch:

git checkout {branch}

Push a Branch:

git push origin {branch}

Merge a Branch:

git merge {branch}

Delete a Branch:

git delete -d {branch} // only deletes the branch if all changes are merged
git delete -D {branch} // deletes branch, regardless of merge state

For More Information

For more detailed help, refer to GitHub Help, and to the Git Reference.

Oenology 0.9.2 Released

Filed in Web DevelopmentTags: Oenology, Themes, WordPress

Just a quick note that Version 0.9.2 of the Oenology Theme has been released, and is now live in the Repository.

This version is a minor bugfix update, including the following changes:

  1. Fixed divide-by-zero PHP notice generated on the post attachment page when the image metadata indicates a shutter speed of zero.
  2. Fixed minor CSS image dimension bug
  3. Updated some WordPress template tags to newer versions
  4. Updated the Theme tags

As always, if you notice anything amiss, or find any bugs or issues, please let me know in the Theme Support Forum.

Oenology: How To Create a Child Theme and a Custom Page Template

Filed in Web DevelopmentTags: Oenology, Themes, tutorials, WordPress

This tutorial will explain how to use the Child Theme concept to customize a WordPress Theme. Specifically, this tutorial will explain how to create a Child Theme to hold future-proof Theme customizations, and then will explain how to build a custom Page template within that Child Theme. This tutorial is based on the Oenology Theme.

A brief background: recently, a user of the Oenology Theme contacted me, asking how to create a custom Page template. Specifically, this user wanted to have content of a particular Page display in a single, wide column with no sidebars. This customization is quite easily implemented using a Child Theme, as I will explain.

Creating a Child Theme

The first step is to create a Child Theme.

In its simplest form, a Child Theme doesn't have to be anything more than a single file: style.css. While some Child Themes are much more complex, all start with this one file. WordPress will use two critical pieces of information from the Child Theme's style.css file to do all of the rest of the heavy lifting: a header tag and a file import.

Let me show you how easy it is. In your text editor of choice, paste the following into a blank file, and save it as "style.css":

/*
Theme Name: Oenology Example Child Theme
Description: Example Child Theme based on Oenology
Template: oenology
Version: 1.0
*/

/*
THIS MUST COME FIRST!
Inherit styles from oenology parent theme.
*/
@import url("../oenology/style.css");

Congratulations! You just created your first (fully functional) Child Theme!

Here's how it works.

First, this "header tag" tells WordPress that the Theme is a Child Theme, and to use all of the template files from the indicated Parent Theme, if they are not found in the Child Theme:

Template: oenology

In other words, if we don't add an "index.php" template file to our Child Theme, WordPress will use the "index.php" template file from Oenology.

Second, this file-import tells the style sheet to import all of the styles as defined in the Parent Theme, Oenology:

@import url("../oenology/style.css");

Due to the way that inheritance works with CSS, any styles we define in our stylesheet that come after this file-import call will supercede the styles defined in the Parent Theme. (Note: the exact nature of CSS rules regarding specificity are outside the scope of this tutorial.)

And that's it! That's all the information that must be provided for a working Child Theme.

Oenology Child Theme available to be activated

The Oenology Example Child Theme listed in the Themes section of the WordPress Admin area

At this point, you could simply FTP your newly created style.css file to \wp-content\themes\oenology-example-child-theme\, and you'll see your Child Theme appear under Themes in your WordPress admin.

You could activate your Child Theme at this point, and it would work (it would just look and act exactly the same as its Parent Theme, Oenology, at this point, because we've not yet added any customizations).

But, let's make our first customizations first.

Creating a Custom Page Template

Now the real fun begins! Let's create our custom Page template.

Oenology Page template fileStart by making a copy of the "page.php" template file from the Oenology Theme. Since the custom template we want to create is a wide, one-column page, we will name our copy "page-one-column-wide.php".

Important! At this point, we are done with the Oenology Theme. Be sure not to make any changes to the Oenology Theme template files. Likewise, do not save your Child Theme's "style.css" file or any other file in the Oenology Theme directory!

Save "page-one-column-wide.php" in the same directory where you saved "style.css", and then open it in your text editor of choice.

We will make three primary changes:

  1. Change the Template name.
  2. Add a custom class to the HTML <body> tag.
  3. Remove the two sidebars.

Changing the Template Name

Look for the following at the very top of the file:

/*
Template Name: Page
*/

This tag tells WordPress what this particular Template file is. Since we are creating a new, custom Template, we need to rename this tag. (Whatever we put here will be displayed in the Add Page screen, as we'll see later.) Change this tag to the following:

/*
Template Name: Page One-Column Wide
*/

Adding Custom Class to the HTML <body> tag

Next, look for the following code (immediately following the above code):

<body id="page" <?php body_class(); ?>>

Modify it as follows:

<body id="page" <?php body_class( 'page-one-column-wide' ); ?>>

This change tells WordPress to add the CSS class "page-one-column-wide" to the HTML <body> tag. We will use this CSS class to define our custom style for our template.

Removing The Sidebars

Finally, find and delete the following code, starting around Line 53:

<!-- Begin Left Column (div#leftcol) -->
<div id="leftcol">
<?php
/*
div#leftcol contains the left column content of the three-column layout.
*/
get_sidebar('left');
/*
sidebar-left.php is the left column content. Used in all primary template page types (index.php, single.php, archive.php, search.php, page.php)
For index.php, sidebar-left and sidebar-right both appear to the right of the main content column.
For page.php, sidebar-left is to the left, and sidebar-right is to the right, with the main content column in the center.
*/
?>
</div>
<!-- End Left Column (div#leftcol) -->
<!-- Begin Right Column (div#rightcol) -->
<div id="rightcol">
<?php
/*
div#rightcol contains the right column content of the three-column layout.
*/
get_sidebar('right');
/*
sidebar-right.php is the right column content. Used in all primary template page types (index.php, single.php, archive.php, search.php, page.php)
For index.php, sidebar-left and sidebar-right both appear to the right of the main content column.
For page.php, sidebar-left is to the left, and sidebar-right is to the right, with the main content column in the center.
*/
?>
</div>
<!-- End Right Column (div#rightcol) -->

Here, we simply remove the code that adds the Sidebars to the template, so that they do not display.

That's all we need to do with the template file. Save your changes, and we will move on to styling our new Page template.

Defining CSS for Custom Page Template

Once again, open "style.css" in your text editor of choice, and look for the following line:

@import url("../oenology/style.css");

Be sure to make all additions beneath this line. This rule is very important.

Beneath this line, add the following style definitions:

#page.page-one-column-wide #extent #main {
width: 1000px;
margin-left:0px;
}
#page.page-one-column-wide #extent #main img {
max-width: 990px;
width: auto;
height: auto;
}

The first rule changes the width and margin of the main content area, so that it takes up all the space made available by the removal of the sidebars. The second rule ensures that any pictures that are added to the content will take up the full available width.

At this point, we're done make edits to Theme template files. Now the fun begins: using our new Child Theme, and custom Page Template!

Using the Custom Page Template

Using whatever method you prefer, upload the two files, "style.css" and "page-one-column-wide.php" to the following directory:

\wp-content\themes\oenology-example-child-theme\

As demonstrated previously, the Child Theme will now appear in the Themes section of the WordPress Admin area, and can be activated like any other Theme.

Once you activate the Child Theme, you won't notice any differences whatsoever on the front end:

Page Using the Default Template

Why? Because you've not made any changes to any of the default content, templates, or styles. You will need to tell WordPress to use your Custom Page Template for a Page in order to see the changes.

So, either create a new Page, or else edit the Page for which you want to use the custom template. Look for the "Template" field in the "Page Attributes" metabox (click to enlarge):

Default Page Template applied to the Page

The drop-down box lists all of the possible Page templates that can be applied to the Page. Look for our new custom Template, "Page One Column Wide" (remember, this is the same name we used in the "Name" header tag in the "page-one-column-wide.php" template file):

Selecting our custom Page Template

Select the custom template file, and then save the Page. Now, when you view the Page, you should see the custom template applied to it:

Page Using Custom One Column Wide Template

And that's it! You've just created a Child Theme, and used it to define a custom Page Template! Here are the before and after screenshots, for comparison:

Page Using the Default TemplatePage Using Custom One Column Wide Template

I've also uploaded a ZIP file containing the example files "style.css" and "page-one-column-wide.php" used in this tutorial: oenology-example-child-theme.zip. Feel free to use however you'd like!

If you have any questions, please don't hesitate to ask. Though, I would prefer that you ask them in the Oenology Support Forum at wordpress.org, where official support for the Oenology Theme is provided, rather than in the comments.

Good luck, and happy Child Theming!

screenshot

Announcing the Oenology Theme for WordPress

Filed in Web DevelopmentTags: Oenology, Themes, WordPress

Today I announce the public release of my first WordPress Theme: Oenology.

screenshot

Standard Theme Screenshot

What's In A Name?

Oenology is the study of all aspects of wine-making. Much like wine-making, WordPress Theme development is both a science and an art. Much like wine-making, WordPress Theme development is the result of a fermentation process that transforms something simple into something beautiful and complex. Much like wine-making, WordPress Theme development involves an understanding of both the "indoor" (the back-end data management) and the "outdoor" (website design) elements of the process. Much like a fine wine, a great WordPress Theme is often the result of years of study by a passionate developer.

Oenology doesn't purport to be a fine wine or even a great WordPress Theme. Rather, Oenology is designed to help others learn the art and science of WordPress Theme development. Consider Oenology as the fertile soil from which your own enjoyment and passion for WordPress Theme development can grow.

Description

Oenology is designed to be a simple, minimalist, yet feature-complete and fully documented Theme intended to serve as a base for child Themes and as an educational reference for Theme development using WordPress functions, action/filter hooks, and template tags. The Theme includes built-in breadcrumb navigation, and supports Navigation Menus, Post Thumbnails, Custom Backgrounds, Custom Image Headers, and Custom Editor Style. The Theme includes plug-and-play support for the WP-Paginate and Yoast Breadcrumbs plugins.

Support

More information is available at the official Theme site, and at the wordpress.org Theme Repository. For the time being, please use the wordpress.org Support Forums for support questions and feature requests.