Adaptive Blog Theme: From HTML & CSS to WordPress

12 Posts

Word of warning: this Session is not for the faint-hearted! Throughout the course of nearly fifty screencasts Adi Purdila will walk you through conception and completion of an entire WordPress blog theme. You'll start out on the first section (Adaptive Blog Theme: From Photoshop to HTML & CSS), translate the design into an adaptive HTML and CSS build, then jump to this section where you'll rig everything up with WordPress.

There's rarely a better way of learning web design than to watch over someone's shoulder for the duration of a complete project; this is your chance to do just that.

Posts in this series
  • Theme Development
    Adaptive Blog Theme: From Photoshop to WordPressAdaptive wordpress thumb 00
    Continuing on with the Webdesigntuts+ session "From Photoshop to WordPress", we commence the WordPress portion here on Wptuts+. You can start from the beginning of Adi Purdila's session, "Adaptive Blog Theme: From Photoshop to WordPress", covering everything from setting up a baseline grid in Photoshop, working with adaptive layouts, to refining your coding workflow. Once you've completed that part of the session, come back here to proceed with Beginning Theme Development.Read More…
  • Theme Development
    Adaptive Blog Theme: Beginning Theme DevelopmentAdaptive wordpress thumb 01a
    We're picking up where the Webdesigntuts+ Adaptive Blog Theme session left off. Now we take the adaptive HTML and CSS build, and turn it into a WordPress theme.Read More…
  • Theme Development
    Adaptive Blog Theme: The Loop and TemplatesAdaptive wordpress thumb 02
    Let's move on to cover The Loop, and using the Theme Unit Test XML Data to populate your WordPress install.Read More…
  • Theme Development
    Adaptive Blog Theme: Sidebars and SearchesAdaptive wordpress thumb 03
    Most themes need a sidebar area for displaying additional information to the main content. It's also generally required to have some form of search. Adi will take us through adding these elements to our Adaptive WordPress theme.Read More…
  • Theme Development
    Adaptive Blog Theme: Singles, Authors, and CommentsAdaptive wordpress thumb 04
    When creating a theme for a blog, especially if you may have multiple authors, it's important to include an area with your posts for author details. You also, of course, want to encourage discussion, so today we'll be covering display of comments, and customising the comment form.Read More…
  • Theme Development
    Adaptive Blog Theme: Page TemplatesAdaptive wordpress thumb 05
    Not all content on a blog is in posts. We need page templates for archives, a page template that's full width, and we're even going to go over a more sophisticated template that deals with a contact form and validation.Read More…
  • Theme Development
    Adaptive Blog Theme: Listing Search Results, Archives, and a 404Adaptive wordpress thumb 06
    Showing search results, archives, and 404 pages are all very important parts of a website, and therefore WordPress theme. It doesn't often get a lot of coverage or emphasis, so today we'll be focussing on that exclusively.Read More…
  • Theme Development
    Adaptive Blog Theme: Custom WidgetsAdaptive wordpress thumb 07
    One way of adding functionality to a WordPress theme is through widgets. WordPress has a selection of useful widgets built-in, but you may want to make some custom widgets to suit your theme.Read More…
  • Theme Development
    Adaptive Blog Theme: ShortcodesAdaptive wordpress thumb 08
    Shortcodes are a popular feature for themes, and are often a great way to display certain kinds of information that may need special treatment. The optimal way to implement shortcodes is through a plugin, and that's exactly what be covered in today's video.Read More…
  • Theme Development
    Adaptive Blog Theme: Theme OptionsAdaptive wordpress thumb 09
    You've read about using the Theme Customizer before here on Wptuts+, but today we're up to the part in the Adaptive Blog Theme where we get to show you a really nice practical example. Utilising the Theme Customizer for your theme's options page is a robust and future-proof way to give your theme flexibility.Read More…
  • Theme Development
    Adaptive Blog Theme: Localization and PolishingAdaptive wordpress thumb 10
    This is the final part of this incredible series! We have a bit of polishing off to do inside our functions.php file, including thumbnails sizes, wp_enqueue_scripts, etc. as well as a brief look at POEdit and localization.Read More…
  • General
    Adaptive Blog Theme: Session Complete!Adaptive preview
    We've reached the end of our Adaptive Blog Theme Session - what a session it's been! If you've followed along from the beginning; starting off in Photoshop, through to HTML, CSS and ultimately into WordPress development, hats off to you. If you've yet to dive in, take a look at what's in store for you..Read More…