Getting Started With the _s Theme

There are some simple instructions in the theme readme.txt on how to get started with our new starter theme, _s, but, to be honest, I’m not exactly the most reliable readme reader myself so here are those instructions with a bit more explanation. :)

The first thing you want to do is copy the _s directory and change the name to something else. Like, say, megatherium.

Then you’ll need to do a three-step find and replace with your favorite text editor on the _s name in all the templates.

1. Search for _s inside single quotations to capture the text domain.
2. Search for _s_ for to capture all the function names
3. Search for _s with a space before it to replace all the occurrences of it in comments. (You’d replace this with the capitalized version of your theme name.)

or …

Search for:’_s’
Replace with:’megatherium’
Search for:_s_
Replace with:megatherium_
Search for: _s (note the space before the name)
Replace with: Megatherium

Then, update the stylesheet header in style.css and the links in footer.php with your own information. Next, update or delete this readme — or anything else, really. That’s it! From this point on _s is yours to do with what you will. There’s no extra theming system for you to learn, just templates, scripts, and a stylesheet for you to hack.

Make sure you poke around and look at everything though. There’s always going to be something you want to change. Which is great! I recommend forking _s on GitHub and let others take advantage of your workflow. The more we share the better we all get.

And let us know how you’re using _s. We love seeing the sites you’re building with our themes and it’d be great to hear what you’re changing in our starter theme. We might even bring those changes back into the main project!

39 thoughts on “Getting Started With the _s Theme

  1. Thanks Ian, This is great. I started playing around with it yesterday and learned a great deal from it already. I normally build custom themes for clients and I’ve always avoided building themes to be shared by the masses, but this will give me the nudge that I needed.

  2. Pingback: Getting Started with a Starter Theme « Weblog Tools Collection

  3. I did a search for ‘_s” and came up with nothing even though I could literally see it in the template, and I realized something. The problem with searching using the example above is that ‘ is curly on this site, which means it’s not going to work if copied and pasted. _s is a really creative name, but it would have been better if it were actually written in the files as the word underscore (or underscores, as is the case here) so that a simple one-step search and replace for that word would be all that’s needed.

    I decided to create a fake word and rename each instance of _s in the templates with that instead. So, from now on, all I’ll have to do is a simple one-step copy/paste.

    Be careful of those curly apostrophes and quotes! They’re not plain text y’know :)

  4. Gah. I typed ā€˜_sā€ in my comment above, but meant ‘_s’

    Still… if they’d all been named underscores instead of _s, a one step search/replace would do it every time instead of three steps of searching and replacing ‘_s’, _s_ and _s with a space in front.

    • I would do the same three step search and replace with any theme I was forking. It’s a good practice. You know you’re correctly replacing bits of text by their type and correct syntax: hyphenated lowercase, underscored lowercase, and title case in the comments. A one step search and replace isn’t actually the neatest.

  5. I’m curious:
    1. Why isn’t this theme coded in such a way that we don’t need to do this code hacking just to change it’s name?

    2. Would it be advisable not to make these code changes, and instead create a child theme – with your own name?
    Thanks for any further insight

    • _s is absolutely coded so that it can be used as a child theme — in the hopes that the theme you create with it makes a great parent theme. Why not just use _s as a parent theme? I can’t guarantee that an update won’t break child themes in the future. It’s purpose is merely to be a great theme to fork and make your own.

  6. rm says:

    Dear Ian Stewart,

    Can i use the _s as a parent theme?
    Do you know some guide that is up to-date (that’s good for SEO too) so i can get help with it…?

    • Since, _s markup is likely to change over the next year you’re better off just forking it. Your version of _s could even become your next personal parent theme.

      I don’t know of any current SEO tutorials but I recommend starting out at Yoast.com.

  7. Mary S says:

    A couple more newbie questions that I’ve tried to find the answer to, but haven’t been able to.
    1. I’m not really sure what you mean by ‘find and replace with your favorite text editor on the _s name in all the templates’. Is it just a few files that are templates or do I GREP through the whole directory?
    2. What is the distinction between a file and a file with a .new extension? Which should I be editing?
    Thanks!

  8. I did the text substitutions successfully. I ran the Theme Check plugin. I got the following warning.
    WARNING: Found wrong tag, remove from your style.css header.
    I could not notice anything irregular in the style.css file.
    Any idea what is causing this warning?

  9. Hey, great stuff,

    I wrote a short script to help copy & rename this theme, check it out:


    #!/bin/sh
    printf "What do you want to name your _s theme? "
    read -e NAME
    cp -rf _s $NAME
    find ./$NAME/ -type f | xargs perl -pi -e "s/'_s'/'$NAME'/g"
    find ./$NAME/ -type f | xargs perl -pi -e "s/_s_/$NAME_/g"
    find ./$NAME/ -type f | xargs perl -pi -e "s/ _s/ $NAME/g"

    if you want it to just rename your theme change line 4 to

    mv _s $NAME

  10. I am creating a table in the them. I know that plugins can use an uninstall hook or uninstall.php. Is there something similar for themes or child themes so the database can be cleaned up upon deactivation or deletion?

  11. Here’s a Simple Find & Replace Tip for anyone starting off:

    After downloading the _s theme, it’s recommended that you rename it in order to make it your own. So… change the _s folder name to whatever you come up with and then you have to do the ‘frightening’ three-step find and replace….

    The fastest and easiest way I’ve found to accomplish any Find and Replace is with an awesome development tool called Notepad++.

    1. Not sure why you aren’t using it yet but, download and install Notepad++ from their website. Yes, it’s Free. http://notepad-plus-plus.org/download/
    2. Open Notepad++ and press ‘Ctrl+Shift+F’ or ‘Search>Find in Files…’
    3. Type the location of your newly named _s folder into ‘Directory’ or user the ‘…’ button to browse to it. Make sure ‘In all sub-folders’ is checked off.
    4. Type your theme’s name into the ‘Replace with’ field.
    5. Finally, in ‘Find what’ you will have to follow Ian’s three-steps, press the ‘Replace in Files’ button and then ‘OK’ after each step. (ex: for the first step you will type ‘_s’ into the Find What field and then press the ‘Replace in Files’ button and then press ‘OK’. A number of how many times it was replaced will display.

    Your results should resemble:
    Ian’s step 1: 109 replaced
    Ian’s step 2: 133 replaced
    Ian’s step 3: 88 replaced

    And that’s it!
    You renamed the entire theme as your own in less than 2 minutes…

    Thanks, Themeshaper and Notepad++ both have been an awesome resource.
    I will post a more detailed how-to with pictures on my new website http://blueAntcreative.com after its redevelopment.
    Hope you found my tip helpful… Enjoy!

    • This my result for the last version (29 March 2012)
      Search for:’_s’
      Replace with:’megatherium’ : 107 107
      Search for:_s_
      Replace with:megatherium_ :133 133
      Search for: _s
      Replace with: Megatherium : 90 90
      Is it right?

    • Version 1.1 (April 24 2012)
      Search for:’_s’
      Replace with:’megatherium’ 106
      Search for:_s_
      Replace with:megatherium_ 128
      Search for: _s
      Replace with: Megatherium 90
      …is it right?

  12. Sam says:

    Did i read somewhere that Blueprint CSS is integrated with _s? I couldnt find it in the theme code.

    I suppose then that integrating a css grid framework (like 960 or blueprint) into _s would mean writing additions the theme divs and their classes, changing the theme completely…

    Any plans to integrate a grid css into _s?

  13. Thm Dzn says:

    I’m using _s as the default theme for a minor project. After working with _s for a week, I would like to share the following feedback.

    The css reset/styling lacks in usability. Text colors are way to light (gray), form elements such as check boxes or input fields have so light borders that they are barely visible.

    The HTML markup can be too verbose because it attempts to be HTML5 semantic-y. header.php is particularly afflicted by this.

    The final generated HTML outline results in two H1s because there’s one H1 in header.php (site title) and each post has another H1. I don’t see the point of having the site title as a H1.

    This is a minor point but the name _s makes the theme harder to manage, especially since underscore has special mining in PHP/Wordpress.

    Anyways, I appreciate the hard work that’s been invested in _s.

  14. Hi Ian,
    Thanks for this great work. I’m a new designer and exploring _s is teaching me a lot about how a theme is put together. Any pointers on how to best create page templates with the layouts provided? Not sure if I need to be using separate stylesheets, just different id/class names on the body of the page templates or some php function? I’m just wanting to create some basic templates with the layout css provided. Thanks again, David

  15. Jon Nemeth says:

    Thank you so much for creating such an awesome starter theme! Literally does save about 1000 hours- especially for rookies like me.

    I look forward to using _s with my projects in the future.

  16. Pingback: Start Your Own Theme with _s and Underscores.me « Weblog Tools Collection

  17. Pingback: Weblog Tools Collection: Start Your Own Theme with _s and Underscores.me | WordPress Planet

  18. Pingback: Start Your Own Theme with _s and Underscores.me | Lunarium Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s