Upcoming WordPress Presentations and Work Shops

WordCamp San Francisco 2012 is this Saturday! I’m super excited to attend this years WordCamp. They just published their schedule and there’s an awesome array of WordPress professionals for this year.

In celebration of WordCamp, WIMP (Web and Interactive Media Professionals - a North Bay Web and Tech group I help run) is doing a series of WordPress centric meetups and Workshops (or WIMPshops as we call them..). I’ll be speaking for all four events that will be covering a generalized WordPress meetup, followed by three hands-on, in-depth looks at WordPress and Beginner to Advanced Theme Development.

Check out the WIMP Meetup Group Page for more details on the events and to RSVP for them! The WIMPshops have limited seating so get your tickets soon!!

Upcoming WordPress Presentations

WordPress Meetup

Date: Aug 29th, 2012
Location: North Bay iHub, Rohnert Park, CA
Meetup Details: http://www.meetup.com/beawimp/events/69622152/

Intro to WordPress (WordPress Work Shop)

Date: Aug 31st, 2012
Location: North Bay iHub, Rohnert Park, CA
Meetup Detailshttp://www.meetup.com/beawimp/events/69623172/

Beginning WordPress Theme Development (WordPress Work Shop)

Date: Sept 7th, 2012
Location: North Bay iHub, Rohnert Park, CA
Meetup Detailshttp://www.meetup.com/beawimp/events/74902292/

Advanced WordPress Theme Development (WordPress Work Shop)

Date: Sept 14th, 2012
Location: North Bay iHub, Rohnert Park, CA
Meetup Detailshttp://www.meetup.com/beawimp/events/74903522/

Center the UL Tag with Floated LI Element - Quick Tip

Hey all! Today I’m gonna give a little quick tip that I find myself sharing a bit with my fellow developers. Some times we need to center an unordered list that has floated _LI _elements inside. I’ll show you the code I use to center this UL tag and clear all the floats in side so the UL.

 

Step 1 - Center the UL!

First off, here’s our HTML code.

<ul id="navigation" class="group">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
So we have our _Unordered List_ with an ID of _navigation_ and a class called _group_. This is what my HTML generally looks like for my navigation on my sites usually. NOW, we need to add some CSS to make this thing work right. Add the following CSS to your stylesheet.
#navigation { 
   /* Reset the default UL styling */
   margin:0;
   padding:0;
   list-style:none;
   background:none;

   /* center the UL */
   display:inline-block; 
   zoom:1;  /* IE fix */
   *display:inline;
}

#navigation li {
   float:left;
   margin:0 5px; /* add some spacing to the LI's */
}
The lines of CSS here will float all your _LI_'s next to each other and add some spacing, and will center your navigation to the parent element. Now you are probably satisfied here, but there's one more step we need to make before we call it quits! ## Step 2 - ??? This is a step that is normally overlooked because to the untrained eye, everything is peachy. But if we were to inspect element we'll find that the _UL_ tag has no height! This is more clear when you have a background color or image set to the parent element. The since we floated the _LI_'s we pull them from the document flow causing the parent div to collapse. We use what is known as the "clearfix". I like to rename this to group instead of adding the words clearfix to my code. So that's the class I have chosen below. Just add this to your stylesheet, and by adding the class to the parent element you'll always clear floated elements instead of adding an empty div tag. _How neat! ;)_
.group:before, .group:after, footer:after, .post:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; }

Step 3 - Profit and rejoice!

And now you can get on to bigger better things :) If you have any ideas about optimizing this or if you have an alternative trick let me know!

Quick Tip: Easy WordPress Login URL

Today I got a little quick tip. Nothing too fancy, but helpful for your clients.

For some of my clients, remembering wp-login.php or even wp-admin isn’t always easy. What I started doing a little while for some of my sites I set it up to allow URL’s like login as a valid URL to the login screen. This is great for simplicity and memorization.

The Trick…

To make this happen we have to get down and dirty with the .htaccess file. In some server setups, like a Windows Server, you probably won’t have this file. Instead, Microsoft uses what’s known as an httpd.conf file. If this is the case this tip may or may not work for you, it all depends on how your server is configured. This is outside the scope of this quick tip unfortunately and requires a tutorial of its own (which I don’t claim to be a Windows Server know-it-all, or an expert server admin), so we will not be looking into this area, sorry!

Add this line to the top of your .htaccess file (above all the WordPress stuff).

# rewrite fake login URL
RewriteRule ^login(.*)$ wp-login.php$1

The Explanation

The first line is just a comment. I try my best to always comment my code incase when I revisit I don’t have to think too hard about what’s going on in my code, or if someone else is looking at my work, they too can figure out the logic behind my code. I strongly urge commenting your code :)

The second line is the trick. We define this line as a RewriteRule and using a Regular Expression we tell it to listen for a URL called “Login“, when that URL’s requested, we’ll return the content in the file wp-login.php.

I can go into Regular Expressions but that too is an article of its own. If you find yourself doing a lot of .htaccess work, I highly suggest you get acquainted with it. Regular Expressions are also very common in programming languages to help process complex conditions so a good understanding of them is definitely a good idea :P

And that’s our quick tip! Feel free to change the quick URL to what ever you like. Just replace the word login only and you’ll be safe :)

Build A Dynamic Sub-Nav for Child Pages

Recently I was faced with building a sub-nav menu that displays all the child pages contained in that parents menu. An example would be, say we a navigation menu called “Products”, and within that menu is a list of child pages such as “Computers”, “TVs”, “Phones”. I needed to create a menu that would display all child pages of “Products” in a side bar menu. This would seem fairly straight forward in most cases, but if we add a third level to here, things get complicated.

I put together a script that will, no matter the level of child pages, always return the list child pages from the main parent.

Here’s the script –

Explanation..?

Since we are dealing with a sidebar navigation, we’ll be fetching post information outside of the loop, we need to set the $post object scope to global. This will allow us to deal with the information retrieved by this WordPress object.

Next we need to set an if statement checking if the current $post object has a Parent ID. The $post object holds all the specific information for each post. If $post does contain a Parent ID, we will run some code, if not, we run a default.

Now for the best part! If our if statement returns true with a parent ID this is the code we will run. We will use the _get_post_ancestors() function to return an array of all the Parent ID’s for the current post. We will assign a variable called $parentids so we can refer to the data in a second.

In the last line we will use the end() function to grab the last ID in the _$parentids array. The reason we do this is because the top most parent ID is always last in the array, so we will need that ID to display the child pages as we need to. Even if it returns one ID, we’ll still be able to return the correct parent ID. We then assign the end() function to a variable called $id.

If our if statement returns false, we will just grab the current posts ID and assign it to a variable called $id.

And the last line of the whole script is the WordPress function _wp_list_pages()_. This function can take a number of parameters, for the complete list, I highly suggest checking out the details at the WordPress Codex. We don’t need anything too extensive for this so we’ll be using two parameters, _titleli and _childof. Let’s dig into what these parameters are exactly.

  • title_li - This parameter will set a title to the top of your menu. Assuming you want more control over the title of the function you can set your own title and enter this parameter with an empty value to have _wp_listpages() ignore a title. I normally prefer this method so I usually add this parameter. If you want to use it, just add a value or have WordPress add one for you by omitting this line completely in the function.
  • child_of - This is the bread and butter of the script. With this parameter we can feed a post ID here to return the child pages of this post ID. If the post ID doesn’t have any children, it will just return blank.
    Now that we know what these parameters are, we can dive a little further into what we are doing. Inside the parenthesis of the _wp_listpages() function we will send a string containing our empty _titleli and _childof parameters, separating each with an ampersand. Since we don’t want to use a title we’ll define _titleli with a blank value (_titleli=). Lastly we will add _childof at the end (placement isn’t really required for it to work) and concatenate our $id variable into the value area (_childof=’ . $id). Concatenating is a PHP operator that will allow us to attach variables, functions to strings. We first need to close the string by adding the single quote after the equal sign, then use the period (.) to attach our $id variable to it.

And that’s it! Let me know what your thoughts are or if there are any questions about the script.

Creating A WordPress Child Theme

I get asked quite often about Child Themes by my fellow developers and designers. The idea behind them are pretty simple and a great solution if you are using a theme that can be updated through WordPress. Child themes work as a solution to update the original files without actually touching the theme files. By including a new file into the child theme, it will replace the parent file. For instance, by creating a new header.php we can can change the output of the source code for the parent header.php. If we don’t need to make any customizations to a template file, we simply leave that out of the child theme and WordPress will fallback to the parents file instead! This makes editing your theme very easy and allows you to future proof your theme for updates.

We’ll talk about what the requirements are and how child themes work. Let’s dig in!

The Requirements.

Each child theme resides in its own directory in your theme folder. To start we need to create a folder in there and call it what ever you want. Let’s say we’ll be creating a child theme for the Twenty Ten theme. Let’s call that, “MyTwentyTen“.

Great! Now we have an empty folder… no worries! Child themes need nothing more than a style.css! Create a style.css in the root of the child theme. Note: the file name “style.css“ is required. Now inside our style sheet we’ll add the following lines of code we call the Information Header. This code is absolutely required for all themes, just child themes have one extra feature..

/*
    Theme Name: Twenty Ten Child
    Theme URI: http://www.example.com/
    Description: Child theme for the Twenty Ten theme
    Author:  Your name here
    Author URI: http://www.example.com/about/
    Template: twentyten
*/
Go ahead and update the info to suit your needs. This doesn't only work for Twenty Ten! This can be applied to any theme you wish to customize! Here's a quick run down of what this code is doing * **Theme Name** - Theme name **(REQUIRED)** * **Theme URI** - The URL to the theme's website (optional) * **Description** - A quick over view of the theme, e.g. "My child theme for Twenty Ten" (optional) * **Author** - The theme authors name, this would be your name, not the parent theme's name! (optional) * **Author URI** - The URL to the author's website (optional) * **Template** - Folder name of the parent theme **(REQUIRED)** Right after the closing comment tag, we need to link the parents copy of the style sheet so our theme applies the right styles. Go ahead and add this code, of course if you are using a different theme, just update twentyten with the theme you are targeting
@import url("../twentyten/style.css");
This line here will import the all the styles found in the parent theme. If your theme has more than one style sheet (as some themes do), you'll need to add those too. Log into the admin area of your site and activate our child theme, everything should look exactly like the Twenty Ten theme! Our style.css should now look like this
/*
    Theme Name: Twenty Ten Child
    Theme URI: http://www.example.com/
    Description: Child theme for the Twenty Ten theme
    Author:  Your name here
    Author URI: http://www.example.com/about/
    Template: twentyten
*/

@import url('../twentyten/style.css');

Make our customizations! :D

We now have all the requirements in place, but the site doesn’t look any different! Don’t fret! Now we get into the fun part :)

Let’s start with customizing some styles. There are many adjustments we can make just by over writing some CSS! Let’s say we don’t like the placement of our H1 tag in the header of the Twenty Ten theme, which by default shows to the left. What if we want that to be right aligned? Simple! With some investigation we can uncover the css that is giving it’s placement and by updating those styles in our child themes style.css we can change all of that!

To save your self the time and risk of going insane, I highly recommend using FireBug if you use FireFox, or the Chrome Dev Tools if you use Google Chrome. These tools are great for inspecting the insides of your code (also known as the DOM), and with a few clicks of a button you can inspect what styles are effecting a particular element. This is a discussion of it’s own and I will not be covering these in-depth in this article.

Using the Chrome Dev Tools, I’ll _Inspect _the H1 tag to find what CSS styling is being applied.

As you can see, there is an ID selector called “site-title“. By creating a new ID selector in our child theme we can add to or over write these parent styles! Let’s open our child theme’s style.css and update some styles with the following code.

#site-title { float:right; width:auto; }

And that’s it!! We don’t need to copy in all the code, the CSS cascade effect will just update the properties we want to target the float property and the width property. In this code we tell the browser to align our H1 tag to the right and we “reset” the width to the width of the text.

A Few More Dirty Tricks…

So we now understand how to change the styling, but what if we want to add some code the header.php? This will need a little more comfort with HTML and/or PHP but the idea is just as simple.

Let’s open Twenty Ten’s header.php file (the parent), copy all the source code and close the document. Now, create a new header.php in the child theme and paste in the code you just copied. Once this file is created, WordPress will then start using the child theme’s header.php instead of the parent. Any adjustments you make will be reflected. If you break something, you now have a back up to fall back to on some degree :P

Let’s add some text in place of the description tag. Around line 66 (I was using version 1.3 when I wrote this) you’ll see a line of code like this

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

Update that code to look more like this

<div id="site-description">Welcome to my site!! W00t!</div>

Once you save your document refresh your browser window and it should be updated now!

What About Custom PHP Functions?

Now there is some little tricky-ness when it comes to using the functions.php file. When you create a child functions.php it doesn’t replace the parent’s functions.php :( If you duplicate all the code in the parent functions.php into the child’s, it will return PHP errors saying that you can’t re-declare some PHP functions. The parent function.php is always loaded first, so it is best to only place custom PHP code into a child theme’s functions.php.

A Quick Recap

So today we learned all about how to customize a theme without modifying the files by using a child theme. There is a lot of flexibility using this method to really change-up a theme. With just a bit of ingenuity you can really make a drastic change on a theme and still allow it to be updatable in the future :)