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.

  • 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!
  • 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