We've already been working locally at a local domain (v10.whatup). Now it's time to get started moving into WordPress. We're going to keep working locally at a local domain, but we're going to start using the already working local install of CSS-Tricks I have (css-tricks.whatup).

We start by just duplicating the existing WordPress theme in the wp-content/themes/ folder and renaming the that theme folder "CSS-Tricks-10". Might as well give ourselves a base to work with. A quick guess: maybe 50% of the code of this theme will change. There is a good bit of code that just doesn't need to change, like the templates that create special RSS feeds.

We change the bare minimum of things to activate this new theme: the screenshot.png file so we can visually see which theme we are activating and comments at the top of the style.css file that is the meta data to identify the theme.

Then we activate the theme. It's a mess, as expected, but now we're ready to start making our static mockup into our final product: a real live WordPress site.

Comments

  1. Bert
    Permalink to comment#

    Hi Chris,

    I really enjoy the videos, especially the special soundeffects every now and then :)
    One little remark though. I understand why you do it (time saving), but i think it’s a bit disappointing that you didn’t build the website from scratch. I mean from the very basic installation of WordPress and up…

    Gr. Bert

    • Chris Coyier
      Permalink to comment#

      This series is very specifically about a REdesign, and the challenges unique to that. I have done a course on WordPress theming from scratch (available here) so I kinda didn’t want to re-tread that ground.

  2. Krsiak Daniel
    Permalink to comment#

    Hi Chris,

    this comment reminds me that you are really a good WP guy.

    I believe that a lot of people would enjoy more free videos here on css-tricks.com rather than those paid ones on lynda.com

    I know you did some 3 or so videos on WP from scratch, photoshop, html, wp … but I guess they are older and people would enjoy those you to revisit and update the workflow.

    Show what is new and also there are more and more questions in forums so also a new category for WordPress only would be a good idea too.

    A bunch of new folks would be “dragged” to your site I feel if you did more of WP things here.

  3. Caparico
    Permalink to comment#

    Chris, I have to agree with Bert, and express my slight disappointment regarding your choice not to expose the whole WP theming process from scratch.
    That Lynda.com course you are referring us to is a little dated, and considering the newer WP versions that have been released since then, surely the way you do things today has changed a fair amount.

    Absolutely loving the rest of this series, and the final site that it came to be.

  4. FLDLVL
    Permalink to comment#

    Ever thought about mini paid series? Like a podcast, but lets say 5 dollars for a nice walk-through, from the beginning. I’m not sure if you get residual income from the lynda series? While Lynda is great, i’d rather support you directly.

  5. marinade
    Permalink to comment#

    I agree, I would probably go and invest in that Lynda Course, but part of the reason why I came to this redesign was to learn the LATEST STANDARDs. Please please do a new updated WP theme building series for free or paid whatever I don’t care I need one ASAP , por favor :)

  6. Ida Benedetto
    Permalink to comment#

    The Lynda course on Creating and Editing Custom Themes is great. It got me started doing theme development professionally.

    Lynda.com pays instructors based on course views, so Chris should still get paid if you watch it (though who knows how much). Lynda has put out many courses on WordPress development, so you’ll get your money’s worth by just signing up for a month.

    For this redesign project, reusing parts of the previous theme shows efficient work flow and smart project management. I learn as much from that example as I do from watch Chris code.

    I’m super grateful to Chris for his ongoing dedication to nurturing developers and setting a standard for the industry. His Website Redesign Kickstarter campaign is one of the smarter instances of leveraging an online following. Not only is he getting paid to do something he would have done anyway, but he’s creating added benefit for the community while doing it.

  7. Nelson Hereveri
    Permalink to comment#

    I agree with Chris, this is a RE-design, focused on the design, not the infrastructure that supports it.

    I read Digging into WordPress and I was satisfied with the content of the book. Obviously not a book that covers all possibilities, but it teaches you to use the concepts to make development faster and manageable.

    We must remember that knowledge which is based on web development are so wide and deep that no tutorial or project could define himself as a complete step by step guide to build a website.

    However, it could indicate that it would have been better if each of the chapters were dealt with the issues raised, as was at first, but then Chris posted the videos very fast and, at least to me, I could not comment with the discussion in each video.

    Yet I learned a lot about some tasks and tools that have accelerated my work. Totally worth the cost.

  8. Josh Eaton
    Permalink to comment#

    In this video, you add your style.css just by @importing the css/global.css file.

    You might explain this later, but do you eventually get CodeKit to spit out your style.css file into the root of the theme directory?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.