Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

_S WordPress Theme Customization

Hi everyone!

This forum contest is designed to test off a person's front-end and back-end WordPress skills with a small project customizing the _S Underscores theme. In this contest you will start with a completely blank WordPress theme. Then use your front-end CSS skills to edit the main style.css file to design the best looking site you can. With your backend skills you can use the functions.php to enhance the functionality of your theme.

After you've watched the video, please read the details below carefully:

Instructions:

  1. First, download the _S Underscores theme from (http://underscores.me/)[http://underscores.me/] and install on a live server that you can link to
  2. Add whatever content you like using Posts and Pages, no custom post types. Set whatever settings you like, no plugins though.
  3. Style the site to the best of your ability editing only the main style.css file. No including external CSS ;)
  4. You can add code to the functions.php file, but you must be able to understand and explain what the code is doing.
  5. No editing any template files besides the style.css and functions.php

Rubric

  • 20% - Site architecture, content
  • 60% - style.css customization
  • 20% - functions.php functionality

Due Date: All entries must be submitted by Sunday 13th at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.

How to Submit Respond below with a link to your site and a bullet list breakdown of the customizations you did.

Prize: The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Pro on us! :) We'll announce the winner on Monday, June 30th and reveal the next contest.

Heather Newton
Heather Newton
13,598 Points

Can you clarify the dates for this contest? Is it due by July 13th at 11:45p with the winners to be announced on July 30th?

16 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Alright everyone, it's time to announce the winner of the _S Theme Customization contest!

First, let me thank the three folks who entered the contest:

You all followed the instruction and spirit of the contest well and each produced great sites based on the restrictions.

The prize, however, goes to Alex, with Adel at a close second.

At first, I had picked Adel's entry as the winner. However, I saw a fairly significant bug in the main menu not responding well at handheld device size (http://cl.ly/WZTc & http://cl.ly/WaMf) and because of this went with my original second pick, Alex, as the final winner.

I want to thank again all of you for entering as well as give you an opportunity to steer the next contest. This first contest involved both front and backend skills, however, the next contest is only going to test one of these. So, which direction do you want to go?

Front-end WordPress contest or Back-end WordPress contest (Respond to this comment thread specifically, rather than main comment thread)?

Danielle Hill
Danielle Hill
26,062 Points

Hi Zac! I vote for a Front-end challenge for the next WordPress contest.

good work Alex :) congratulation

Andrew Rowberry
Andrew Rowberry
3,579 Points

can we upload font/image files to the theme?

<p>Hi all,</p>

Here is mine Personal Blog & CV.

DOLA Theme

Customizations <br>

  • Built with Sass.
  • Responsive.
  • Easy to customize, all colors with sass variables.
  • Add 5 shortcode "Dropcap","Mark","Skill bar","Contact form","Callout".
  • Well structured sass (colors.scss, function.scss, mixins ,fonts, layout'header footer...' ,typography, UI, button, media queries....')
  • work on all modern browsers .

Function.php customizations

  • 5 shortcode .
  • Filter to change site title and change the titel to profile image.
  • Support featured image.
  • Add google fonts and icons font (font_awesome).
  • Change the footer.
  • Add favicon

Data base connection error ?

It works fine for me ! Alex CHAVET

Yep I confirm it's back ! Nice wordpress man !

Am I allowed to use Sass?

Andrew Rowberry
Andrew Rowberry
3,579 Points

i dont see why not since Sass is really just editing the style.css

i hope to do it before that day . just time ^_^ .

could you correct the link for other ,, thanks

Andrew Rowberry
Andrew Rowberry
3,579 Points

can we add additional markup to the index.php?

Does that mean we cannot change the content contained within the markup?

ie. Images, titles, any ipsum text etc

UPDATE: Never mind, I just read the Original Post. It has all the information I need. Thank you!!

David Scanu
David Scanu
20,160 Points

After reading this post, I started theming my own blog because I got a couple of article I want to share. You got me digging into _S and that is a very good thing ! I may not finish before the 13th but it is a very good excercice !

Is there any way we can show more "meta" informations like author, date, comments and categories without touching the index.php file ? Same thing for the footer, how can I add categories, links or social links ?

As we get a custom version of the theme, and we are uploading it manually do we have to work on a child theme ? The stylesheet is already well organized, is it better to modify the lines directly or to create an "Edits" section at the bottom ? Thanks for your help

Andrew Rowberry
Andrew Rowberry
3,579 Points

I just downloaded wordpress from wordpress.org then downloaded the _s underscores theme. Then Threw the theme into the wordpress themes folder then activate it inside wp-admin. Zac Gordon has lots of great videos on how to upload wordpress from localhost to server. It looks like the pre-existing styles in style.css are just boilerplate styles, I would just add on top of the pre-existing styles and edit them as needed.

Karen de Graaf
Karen de Graaf
14,350 Points

This is what the creators say about the theme "Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for." So no need for a child theme!

can we use icons-font like font awesome ?

Paul Yorde
Paul Yorde
10,497 Points

Do we still use widgets to be styled and changed in style.css and functions.php? Also, once I've created a function, does that mean I can use it inside Wordpress ( as long as I'm not touching the theme files?)

I'm looking forward to working on my entry for this contest!

Seth Barthen , what do you think, do you want to throw your hat in the ring too?? :)

Seth Barthen
Seth Barthen
11,266 Points

I can give it a shot! Thanks for the shout out :D

Please any one can answer me ,can we use icons-font like font awesome / Google font ? i finished my design i need to know if it is a possible to make the final setup !

Montalvo Miguelo
Montalvo Miguelo
24,789 Points

are allowed font face google fonts???

Andrew Rowberry
Andrew Rowberry
3,579 Points

My Contest Entry-- rwwb.us/mycontest

  1. Created responsive grid layout.
  2. Added CSS animation to title.
  3. Add colors and content, change font sizes.
  4. Add category and text widgets, style and position them.
  5. Wasn't sure if we could upload font files so i created a javascript function in the text widget that appends link elements, and sets the href attribute to the google font CDN's.

Hi guyz, Here's my entry : http://drink-eat-andco.com/code_challenge/Wordpress-Challenge/ I'm synchronising everything with github now so you'll be able to see the background ;)