Twenty Eleven Child Theme: Custom Header

In a previous post about creating a child theme for Twenty-Eleven, we created a custom CSS file using the @import CSS rule.  Technically, the new CSS file is all that is needed to create a child theme in WordPress, but just changing the colors and font styles isn’t that much fun.  If it’s worth making your own WordPress child theme, it’s worth changing _everything…_starting with creating a custom header file.

Creating a custom header file for our child theme

Creating a custom header file in WordPress is even simpler than creating a custom style sheet, because this time we’ll just copy the file directly from the base Twenty-Eleven theme directly into our child theme.

  1. Go to your /wp-content/themes/twentyeleven directory and locate the file header.php
  2. Paste the header.php file to your /wp-content/themes/twentyeleven-child directory

That’s it!  Not very exciting…so let’s do some additional code modification while we’re in the new file.

Changing header image and size

Of all of the great things about the WordPress Twenty-Eleven theme, the one thing I can’t understand is why WordPress decided to make the header image so damn big!  There is the option to change the image you display to any number of provided images, or upload your own as part of the Appearance > Header menu.  But you can’t change the size…if your upload is too short, the theme will stretch it for you, distorting the image.  If your upload is too large, you’ll have to crop it. Luckily, with a minor modification we can change that.

First, go your newly created header.php file and find the following code:

What we’re going to do is use the commenting tag in HTML to “comment out” the portions of our header code that we no longer want to be active (i.e. the re-sizing feature in the Twenty-Eleven theme).  We can do this by adding the following tag (a left arrow, and exclamation point, and two dashes):

You’re not required to put in the “Comment out WordPress header checking” text as I did, but it is good practice to notate why changes have been made to your code.  A little documentation now goes a long way a year from now, when you can’t remember why you changed something! Now that we’ve got the opening tag for commenting, we need to find the end of the code we want to comment out, and put the closing tag.  Once we do this, all of the code between the commenting tags will not get executed by our browser.

The closing tag above is the two dashes, then the right arrow.  Again, you don’t have to write “End of RZ commenting out”, but it’s good for documentation.  Save your header.php file to make the completed changes.

Hey, now I don’t have ANY banner!

If you refreshed your blog at this point, you’ll realize that not only did we get rid of the massive size of the banner, we got rid of the banner overall!  That’s not the goal of this tutorial…so let’s add the banner back, except now we’ll control the sizing.

First thing you need to do is make sure you have the banner you want uploaded to your server, and that it is the size you want.  This blog is 1000 pixels wide at the body (white space), and I decided to make my banner 225 pixels tall, because that’s where the picture looked good.

Once you have your banner location, we need to add the HTML link to our image, using the image tag.  For the “alt” section, you should put a description of what your banner represents, as this will be displayed if the users browser can’t download the image.  In the “src” section, add the location of your banner file.

Once you hit save, that’s it!  You now have control over your banner image.  Yes, modifying the code in this manner disables the Appearance > Header functionality in the theme, but that’s a small price to pay to get flexibility.  If you want to change your banner in the future to show a different image, you’ll need to do so in the header.php file.  But since you’ve documented this change in your code, you’ll know where to look and what to change when that time comes…

randyzwitchdotcom-before

Before - 1000px by 288px image

randyzwitchdotcom-after

After: 1000px by 225 px


Have Social 'Influence' Scores Become Another FICO?

zwitch-klout-july-2011

Klout thinks I'm a 'Networker'

Not a day goes by without another article being published about how social media will change business forever.  Several companies have sprung up in the past several years including Klout, Twitalyzer, and PeerIndex that attempt to measure the value of social media usage, or more broadly, ‘social influence’.  As I read articles about how social influence is now used by companies to ‘Fan-gate’ or ‘Klout-gate’ their pages with special content and offers, I can’t help but draw a comparison to the ubiquitous FICO credit score.

FICO:  Likelihood a customer will go 90 days delinquent within 2 years

What was once just use to determine credit-worthiness, FICO has morphed into a way to customize car insurance rates, evaluate candidates for job openings, decide whether to rent an apartment to a tenant, etc.  While arguments have be made that there is a correlation between low FICO scores and a lot of undesirable behaviors, it’s quite another to blindly segment customers using credit attributes for non-credit purposes.  Yet this behavior happens all the time…

Social influence score:  “The probability of…”, what exactly?

The problem with trying to assign a value to social media interactions is that it’s completely business-specific.  Unlike FICO, which at least has a strict definition (ignored as it may be), social ‘influence’ can mean any number of things, depending on whether the person uses social media for work or pleasure (and in many cases, both).  Even better, the number can be gamed depending on which accounts you allow to get scored as part of your ‘influence’ (although, adding accounts only leads to increases in your score…for now).

twitalyzer-zwitch-july2011

Despite these different social influence score shortcomings, it is easy to see why companies like Audi, Subway, TNT Network, and others are willing to take a gamble that social influence (in this case, Klout score) has a correlation to something; as multi-million/billion dollar companies, the only way to get top-line growth is to experiment with new channels.  As it stands now, I’m having a hard time believing that the Klout ‘Perks’ is an effective way to market (that’s a whole ‘nother blog post!), but again, I can’t fault companies for trying.

Sanity still prevailing…

While I can see a parallel of social influence scores and FICO, luckily industry practitioners (the web analysts and marketers most likely experimenting in these new channels) are speaking out pretty loudly about understanding the positives and the cautions behind these scores.

I’m also glad to see (at least in the case of Twitalyzer), score providers participating in the conversation to discuss the issues surrounding the use of social influence scores in general.   Eric certainly has a lot of clout (pun intended!) in the web analytics community, so the message is definitely being heard there…but it’s up to all of us measurement folks to get the message out further in the marketing community on the proper usage of any model score.

Not FICO…not now, not ever

Ultimately, social influence scores will never achieve the level of widespread abuse that the FICO score has seen in the business world.  For one, there’s the voluntary nature of social media, which keeps large populations of people from ever being scored.  There’s also the fact that social influence is only calculated based on ‘affirmative’ activity (people ‘Like’ your contributions, they retweeted your articles, etc.), which cannot never be as predictive as also including negative interactions (like the FICO score does with missed payments).

But just because social influence scores probably won’t get abused in the same way, that doesn’t mean that us digital measurers should relax.  It’s up to us to make sure to keep stressing that just because companies can do something, doesn’t mean they should!  If anything, Kenneth Cole’s PR disaster should show that not all ‘influence’ is good, even if it makes your Klout score go up by 30 points!

“Without any clear strategy around what you’re going to DO with all these fans – you’re really just kind of a Facebook Marketing ho, with no direction.”  - digitalanalytics101.com

UPDATE - 10/27/2011:  With Klout making a change to their algorithm yesterday, and many heavy social media users seeing large drops in their scores, it seems like there ARE businesses and industry practitioners trying to use Klout as a pseudo-FICO score.  While my score dropped about 20% (from 51 to 40), I’m like most who see the whole “social influence” scoring as nothing more than an amusing game.


Twenty Eleven Child Theme: Creating CSS File

With the Twenty Eleven child theme directory created as “twentyeleven-child” in the ‘/wp-content/themes’ directory, we’re now ready to create the first file as part of the child theme: the CSS file.

While we could just copy the existing CSS file from the Twenty Eleven theme (style.css in the /wp-content/themes/twentyeleven directory) and modify that file directly, if we do that then we will lose track of the changes that were made relative to the original Twenty Eleven styling.  So what we’re going to do is create a new CSS file to hold our changes, with a reference back to the original CSS file.

Step 1:  Creating a blank CSS file

To start the process of creating the blank CSS file, open up your favorite plain text editor such as TextPad if you are using a PC or TextEdit if you are using a Mac.  It’s important to use a plain text editor and not a word processor such as Microsoft Word, as Word can add strange characters into your file.

So with a new, blank text document open, save this file with the name style.css.  Your file MUST be named style.css in order to work correctly.

Step 2:  Creating template/theme header

In the newly created style.css file, add the following code (including the /*  and */ characters):

/* Theme Name: randyzwitch.com
Description: Child theme for the twentyeleven theme
Author: Randy Zwitch
Template: twentyeleven */

For your theme, you can choose to put whatever you want in the “Theme Name”, “Description” and “Author” files.  The text you list here is what will be visible in the Appearance > Themes menu in the WordPress admin panel.

If you are creating your child theme based on Twenty Eleven, then you are done, as no additional changes need to be made.  Otherwise, place the directory name (with no leading or trailing slashes) of the theme are using on the “Template” line.

**Step 3:  Include “CSS import” of Twenty Eleven CSS file

**

The final step in creating the CSS file for our new child theme is to import the CSS properties from the original Twenty Eleven theme.  Note that above, I discussed that we could just copy the entire CSS file into our new file, but then we wouldn’t be able to see our changes as a stand-alone.  What we can do instead is add the following code to our new file, directly under the header we created in Step 2:

@import url(“../twentyeleven/style.css”);

It’s important to note that there can be no CSS code above this “import” line (other than the header file info).

And that’s it!  Save your newly created CSS file, and be sure that it is located in the directory ‘/wp-content/themes/twentyeleven-child’

Final comments

If you’ve done this correctly, the contents of your new CSS file should have the following format (with your information, obviously):

1
2
3
4
5
6
/* Theme Name: randyzwitch.com
Description: Child theme for the twentyeleven theme
Author: Randy Zwitch
Template: twentyeleven */

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

Technically, this is all you need to have a fully-functional “child theme” in WordPress.  To make sure that everything is working correctly, go to the WordPress admin panel and select your new theme under Appearance > Themes and hit ‘Activate’ your new theme!

For more information about creating CSS files for child themes in WordPress, go to the CSS section of the WordPress Codex on this topic.


  • RSiteCatalyst Version 1.4.12 (and 1.4.11) Release Notes
  • Self-Service Adobe Analytics Data Feeds!
  • RSiteCatalyst Version 1.4.10 Release Notes
  • WordPress to Jekyll: A 30x Speedup
  • Bulk Downloading Adobe Analytics Data
  • Adobe Analytics Clickstream Data Feed: Calculations and Outlier Analysis
  • Adobe: Give Credit. You DID NOT Write RSiteCatalyst.
  • RSiteCatalyst Version 1.4.8 Release Notes
  • Adobe Analytics Clickstream Data Feed: Loading To Relational Database
  • Calling RSiteCatalyst From Python
  • RSiteCatalyst Version 1.4.7 (and 1.4.6.) Release Notes
  • RSiteCatalyst Version 1.4.5 Release Notes
  • Getting Started: Adobe Analytics Clickstream Data Feed
  • RSiteCatalyst Version 1.4.4 Release Notes
  • RSiteCatalyst Version 1.4.3 Release Notes
  • RSiteCatalyst Version 1.4.2 Release Notes
  • Destroy Your Data Using Excel With This One Weird Trick!
  • RSiteCatalyst Version 1.4.1 Release Notes
  • Visualizing Website Pathing With Sankey Charts
  • Visualizing Website Structure With Network Graphs
  • RSiteCatalyst Version 1.4 Release Notes
  • Maybe I Don't Really Know R After All
  • Building JSON in R: Three Methods
  • Real-time Reporting with the Adobe Analytics API
  • RSiteCatalyst Version 1.3 Release Notes
  • Adobe Analytics Implementation Documentation in 60 Seconds
  • RSiteCatalyst Version 1.2 Release Notes
  • Clustering Search Keywords Using K-Means Clustering
  • RSiteCatalyst Version 1.1 Release Notes
  • Anomaly Detection Using The Adobe Analytics API
  • (not provided): Using R and the Google Analytics API
  • My Top 20 Least Useful Omniture Reports
  • For Maximum User Understanding, Customize the SiteCatalyst Menu
  • Effect Of Modified Bounce Rate In Google Analytics
  • Adobe Discover 3: First Impressions
  • Using Omniture SiteCatalyst Target Report To Calculate YOY growth
  • Google Analytics Individual Qualification (IQ) - Passed!
  • Google Analytics SEO reports: Not Ready For Primetime?
  • An Afternoon With Edward Tufte
  • Google Analytics Custom Variables: A Page-Level Example
  • Xchange 2011: Think Tank and Harbor Cruise
  • Google Analytics for WordPress: Two Methods
  • WordPress Stats or Google Analytics? Yes!
  • Building a Data Science Workstation (2017)
  • JuliaCon 2015: Everyday Analytics and Visualization (video)
  • Vega.jl, Rebooted
  • Sessionizing Log Data Using data.table [Follow-up #2]
  • Sessionizing Log Data Using dplyr [Follow-up]
  • Sessionizing Log Data Using SQL
  • Review: Data Science at the Command Line
  • Introducing Twitter.jl
  • Code Refactoring Using Metaprogramming
  • Evaluating BreakoutDetection
  • Creating A Stacked Bar Chart in Seaborn
  • Visualizing Analytics Languages With VennEuler.jl
  • String Interpolation for Fun and Profit
  • Using Julia As A "Glue" Language
  • Five Hard-Won Lessons Using Hive
  • Using SQL Workbench with Apache Hive
  • Getting Started With Hadoop, Final: Analysis Using Hive & Pig
  • Quickly Create Dummy Variables in a Data Frame
  • Using Amazon EC2 with IPython Notebook
  • Adding Line Numbers in IPython/Jupyter Notebooks
  • Fun With Just-In-Time Compiling: Julia, Python, R and pqR
  • Getting Started Using Hadoop, Part 4: Creating Tables With Hive
  • Tabular Data I/O in Julia
  • Hadoop Streaming with Amazon Elastic MapReduce, Python and mrjob
  • A Beginner's Look at Julia
  • Getting Started Using Hadoop, Part 3: Loading Data
  • Innovation Will Never Be At The Push Of A Button
  • Getting Started Using Hadoop, Part 2: Building a Cluster
  • Getting Started Using Hadoop, Part 1: Intro
  • Instructions for Installing & Using R on Amazon EC2
  • Video: SQL Queries in R using sqldf
  • Video: Overlay Histogram in R (Normal, Density, Another Series)
  • Video: R, RStudio, Rcmdr & rattle
  • Getting Started Using R, Part 2: Rcmdr
  • Getting Started Using R, Part 1: RStudio
  • Learning R Has Really Made Me Appreciate SAS