#2 Using The HTML5 Build Script With A WordPress Theme – Part 2 Of 2

Posted on April 12, 2011 by Jay

In part 2 of the HTML5 Build Script + WordPress tutorial we’ll go through the changes we need to make to the build script so that it works nicely with WordPress. It’s actually not too taxing, but there are a few gotcha’s.

If you want to jump straight to the code there’s a link below to my blank WordPress theme, based on Starkers by Elliot Jay Stocks, but with added HTML5 Boilerscript stuff + a working Build Script.

HTML5 Boilerplate WordPress Theme with Build Script

N.B. I’ve made a few tweaks here and there, for example I’ve included Ryan Fait’s Sticky Footer, Andy Clarke’s 320 and up principle for CSS3 Media queries, etc. Feel free to strip these out – just use Cmd + F to look for a comment prefix of =Jay

This entry was posted in HTML5, WordPress and tagged ,
  • 3552han

    nice video.. very helpful – but your second video is missing.. or link is broken.

    • Anonymous

      Hi, thanks v much for the comment. I fixed the link a few days ago, let me know you have any more problems.

      Jay

  • WiseWordsFromWoo

    Now I assume you are building on your system and then uploading to the server. I have been studying BoilerPlate for the last two days (weekend fun!) and assume that after done uploading to the server and when making changes in the future I would have to develop on my localhost and then rerun buildscript to get a new version and then reupload?

    • Anonymous

      Yes that’s right, you have to develop locally and then upload the contents of the publish folder to your site. The next video I will do (sometime this week hopefully), I’ll talk about a good standard way to upload the Publish folder, because even if you make a small change you’ll have to re-upload several files due to the way the references in header and footer are updated.

      If you’re not used to developing locally, although it’s a pain to set up – there’s no going back once you’re used to it. I’d like to do a streamlined version of this great tutorial by Chris Coyier in future – http://css-tricks.com/video-screencasts/86-mamp/

      Let me know if you have any more questions, I’ll try and answer them.

      Jay

      • WiseWordsFromWoo

        Great. I have a local host but like seeing sites live because I use VM to do crossbrowser checking so I wanted to know when to add live (unless you have a great local crossbrowser checker). So basically I could setup my wordpress structure for boilerplate online then when ready run it boilerplate locally and then reupload all with wordress and boilerplate. alright. got it. (tell me if I’m wrong). You talked about adding 320 and up. I’m a little confused because I’ve read Andy Clarke’s 320 and up and he’s talks about it being integrated or integrating it will little or no sweat. So I’m confused on whether it already has 320 and up added? I know it doesn’t contain the all the 320 files so in assumption I would assume no. I’m try to wrap my head around making a setup I can reuse.

        • WiseWordsFromWoo

          Secondly I understand that wordpress is dynamic (which I know boilerplate doesn’t do php which isn’t a big deal.) Although if wordpress is dynamic and boilerplate is something you have to run locally then how would it work if you blog? Wouldn’t that be an issue cause you would constantly be uploading new photos so I would assume you would have to update boilerplate once a month? This is where I get confused.

          • WiseWordsFromWoo

            Sorry for the conversation on your wall. lol I realized that you do have Media Queries in the css although don’t see the IE fixes adding in the 320 and up. confused I was.

          • Anonymous

            Not sure what you mean by IE fixes…

          • WiseWordsFromWoo

            IE fixes as in the 320 and up .js extensions Andy Clark provides. I need to look into biolerplate tonight and learn where exactly to put my new jquery files.

          • WiseWordsFromWoo

            Another comment on the WordPress upload/ deal is when building a site for clients I usually make posts with featured images and use it as cms primarily.

          • Anonymous

            I was actually in touch with a guy on GitHub that put forth the idea about compressing the PHP as well. From what I understand, Paul Irish doesn’t really work with WordPress, so it probably didn’t occur to him to compress the PHP. I’m sure it’s possible, and Paul seemed interested in working it into the core Boilerplate template. I expect it will be packaged into the next release.

            Boilerplate will compress all images that are in your theme (so example all the images on my theme of this site are compressed), but when you add images into POSTS, these images are stored in wp-content/uploads, which is outside the Build Script scope. You could add these folders in manually via project.properties file which I talk about in the video, but the Build Script fails if you add more than one image folder directory. It may be possible, but to be honest you won’t save THAT much space compressing the odd image in your blog post. Plus, if you already use ‘Save for Web & Devices’ when exporting from Illustrator / Photoshop, your images are already heavily compressed. Don’t get me wrong, compress images where you can – but I think it’s probably more hassle than it’s worth compressing post images.

            As far as I’m concerned the best reason to use Boilerplate is the combination of CSS/JS compression and cache busting.

        • Anonymous

          Hi Woo, I think it’ll be easier if I reply to your comments one by one!

          I use VMWare Fusion to cross browser check and I spent all of last Saturday trying to find a way to run MAMP locally across my VM, but with no luck. These three articles seemed like they would get me somewhere, but in the end I just gave up…

          http://forums.macrumors.com/showthread.php?t=487635

          http://seansperte.com/entry/Setting_Up_a_Killer_Local_Web_Development_Environment_on_a_Mac_with_MAMP_an/

          http://communities.vmware.com/thread/125707

          To be honest I’m not THAT bitter that I couldn’t get it working – it’s probably a good thing to view code on a real server every now and again because sometimes the Build Script gives me a few hiccups when it compresses things.

          In terms of WordPress structure, Boilerplate only really works if you work on a local server, because then you can edit code uncompressed for the sake of your sanity, before compressing it and sending it to your Live server. I basically have 3 versions of my sites at all times – one local version, one version on a subdomain, and the actual Live version – that way I can test the site properly before pushing the code Live.

          As for Andy Clarke’s 320 and up, from what I understand you need to code everything for the smallest possible screen first, then using media queries you work your way up so that extra styles are only loaded in when screens get bigger. It’s not a huge deal really, just a little more efficient. Therefore I’ve given a few examples of CSS3 Media queries in my template, that start with smaller screens; It’s just a prompt really, so that I remember to start with the smallest screen first. There seemed to be a load of other stuff in Andy’s template that were to do with his personal workflow, so I’ve only included the core idea.

      • http://twitter.com/toddhgardner Todd H. Gardner

        You don’t have to upload manually. Add a new target to the ANT build script for uploading to your server and use something like this:

           
               
           

        For large projects, consider zipping the publish directory first, uploading, then unzipping on the server with a remote SSH command. ANT is an incredibly flexible scripting engine.

        • http://twitter.com/SparrwHawk Greenwich

          Todd, this sounds great. Could you DM me on Twitter @SparrwHawk:twitter and we could perhaps IM each other so you can walk me through it. I’m more of a designer than a programmer and do not have experience with this kind of thing (although I’d like to get in to programming more).

          If we can get this working I’d love to post another vid so people who want to get their hands dirty have an alternative to FTP’ing the files.

          Thanks,

          Jay

  • Anonymous

    Jay, I’ve used your WP Theme for a current project. I’ve used Boilerplate and the build script before, but never with WordPress. However, I don’t have 27 min to watch your video – is there a text version or notes? Thanks for the work you’ve done!

    • Jay

      Hi Dave,

      Glad you liked the theme! Considering the shortest build script vid on the html5boilerplate.com site is 40 mins, I don’t think 27 mins is too bad! I considered writing all my vids in note form as well but then I realised it would take me an absolute age. One of the reasons I decided to do a video blog rather than written blog was for speed reasons. I hope to release a vid every week on average.

      To be honest, if you understand how the build script works then you don’t really need to understand what I’ve done to the WordPress theme, I’ve mostly just changed the references. One thing that might help is if you Cmd + F through the all the files looking for ‘=jay’. I normally prefix comments beginning with =jay whenever I make modifications to files.

      Thanks, Jay

  • Andre Deutmeyer

    Just wanted to thank you for the videos. They were very easy to follow along with and really helpful for getting started with bringing wordpress and HTML5Boilerplate together.

    If you or anyone else is interested I think I managed to get the html compression working on php files (but all it really seems to do is strip out comments). You just have to make some additional modifications to the build.xml file.

    I just pushed everything I did to github so if you are interested in checking out the changes you can see them here: https://github.com/dremonkey/NakedCompass. I documented the changes in the README file.

    • Anonymous

      Thanks Andre, glad you found the vids helpful. I expect the next version of HTML5 Boilerplate might include php compression since it was being discussed in the forums and Paul Irish was enthusiastic. If you get some success you should definitely share it with him!

      Jay

      • drebabels

        where are these forums you speak of? can’t seem to find them. 

        • Anonymous

          Sorry, I meant the GitHub comments – here’s the thread – https://github.com/paulirish/html5-boilerplate/pull/394#issuecomment-923598

          • drebabels

            ahhh… thanks. btw I think I unintentionally messed up your blog layout. I sent you a tweet with the screenshot, but on http://www.jaygeorge.co.uk/2-html5-build-script-wordpress-2/ because of my disqus user bio… all the content is pulled way way left… like off the screen left. The offending span class is dsq-commenter-bio.

          • Simon Pritzkat-Gerthenrich

            Meanwhile compression of php files seems to be possible with the build script: http://goo.gl/wpH3L > see “Minifying HTML in a PHP based project”

            But unfortunately the script breaks by compressing this simple line of code

            <script src="/library/js/modernizr-2.0.min.js”>

            This will cause a blank published file:(

            Any ideas how to fix this? To me this is so strange, ’cause the b.-script has no problems with parsing this line:
            <link rel="stylesheet" href="/style.css?v=2″>

            BTW: The script also breaks by parsing the php lang-attribute from word-press, but I can live with an hard coded lang-attrib in this case
            instead of

  • http://twitter.com/ColeGeissinger Cole Geissinger

    These tutorials are great. I’ve been very interested in using both of these together and these tutorials have help shed some light for me. The only thing that raises a flag for me is the way javascript (or styles) are being included into the theme.

    The recommended way is to use the the wp_enqueue_script or wp_enqueue_style functions in your functions.php

    The main style.css seems to usually be placed in the header.php instead of using the functions so that’s fine. But I’m curious if there’s a way to get the build script to update the js and css files in the functions.php? That way, for the dev’s that prefer to use this method can still use this great functionality on their WP themes.

    I’d like to think it would be as simple as pointing to that file, but things usually don’t work like that lol.

  • http://twitter.com/ColeGeissinger Cole Geissinger

    These tutorials are great. I’ve been very interested in using both of these together and these tutorials have help shed some light for me. The only thing that raises a flag for me is the way javascript (or styles) are being included into the theme.

    The recommended way is to use the the wp_enqueue_script or wp_enqueue_style functions in your functions.php

    The main style.css seems to usually be placed in the header.php instead of using the functions so that’s fine. But I’m curious if there’s a way to get the build script to update the js and css files in the functions.php? That way, for the dev’s that prefer to use this method can still use this great functionality on their WP themes.

    I’d like to think it would be as simple as pointing to that file, but things usually don’t work like that lol.

    • drebabels

      Cole it is possible. What you need to do is in your config/project.properties you add functions.php as one of the file.pages you want to have the build script optimize. The css should work out of the box because all it does is find a reference to your style.css and replace it with the minifies/concatenated version. It won’t however change any other css files.

      But for the javascript to work you will have to modify the regex starting on line 599 in the build.xml file.

      One of the other things you will have to look out for is that by default wordpress adds a query string with a version number to the end of your path. This basically defeats part of the purpose of the build script… so to prevent wordpress from adding the query string you have to pass in NULL as the version number when calling wp_enqueue_script.

      • Xander

        The version number is required for jquery. This is because of the logic of using enqueue_scripts.
        wp_enqueue_scripts takes a version number, so that when a plugin uses a version other then the version which should be loaded, it will take your jquery version as the one to use.
        This way you wont have the problem of having 2 jquery files loaded or scripts that require a specific version of jquery.
        It would be great if you could use something like NULL, both in the default.properties and wp_enqueue_scripts. 
        If you could, please explain this in a other video. So that people learn it the way it is supposed to.. through functions.php. Great video! 

        ps: @slightly offtopic- consider using sublime text with SFTP, so you could sync the publish folder directly with a remote folder. And use git in your workflow so you dont always have to start with a Starkers or whatever theme.
        Then you can download your own template from a repository. This will give you version control on your own code template. Which you can modify and improve. 
        This worklow can be all managed from sublime text. The Fetch package can make the workflow even better.

        Thanks.

  • http://twitter.com/ColeGeissinger Cole Geissinger

    These tutorials are great. I’ve been very interested in using both of these together and these tutorials have help shed some light for me. The only thing that raises a flag for me is the way javascript (or styles) are being included into the theme.

    The recommended way is to use the the wp_enqueue_script or wp_enqueue_style functions in your functions.php

    The main style.css seems to usually be placed in the header.php instead of using the functions so that’s fine. But I’m curious if there’s a way to get the build script to update the js and css files in the functions.php? That way, for the dev’s that prefer to use this method can still use this great functionality on their WP themes.

    I’d like to think it would be as simple as pointing to that file, but things usually don’t work like that lol.

  • http://twitter.com/ColeGeissinger Cole Geissinger

    These tutorials are great. I’ve been very interested in using both of these together and these tutorials have help shed some light for me. The only thing that raises a flag for me is the way javascript (or styles) are being included into the theme.

    The recommended way is to use the the wp_enqueue_script or wp_enqueue_style functions in your functions.php

    The main style.css seems to usually be placed in the header.php instead of using the functions so that’s fine. But I’m curious if there’s a way to get the build script to update the js and css files in the functions.php? That way, for the dev’s that prefer to use this method can still use this great functionality on their WP themes.

    I’d like to think it would be as simple as pointing to that file, but things usually don’t work like that lol.

  • http://twitter.com/ColeGeissinger Cole Geissinger

    These tutorials are great. I’ve been very interested in using both of these together and these tutorials have help shed some light for me. The only thing that raises a flag for me is the way javascript (or styles) are being included into the theme.

    The recommended way is to use the the wp_enqueue_script or wp_enqueue_style functions in your functions.php

    The main style.css seems to usually be placed in the header.php instead of using the functions so that’s fine. But I’m curious if there’s a way to get the build script to update the js and css files in the functions.php? That way, for the dev’s that prefer to use this method can still use this great functionality on their WP themes.

    I’d like to think it would be as simple as pointing to that file, but things usually don’t work like that lol.

  • http://twitter.com/ColeGeissinger Cole Geissinger

    These tutorials are great. I’ve been very interested in using both of these together and these tutorials have help shed some light for me. The only thing that raises a flag for me is the way javascript (or styles) are being included into the theme.

    The recommended way is to use the the wp_enqueue_script or wp_enqueue_style functions in your functions.php

    The main style.css seems to usually be placed in the header.php instead of using the functions so that’s fine. But I’m curious if there’s a way to get the build script to update the js and css files in the functions.php? That way, for the dev’s that prefer to use this method can still use this great functionality on their WP themes.

    I’d like to think it would be as simple as pointing to that file, but things usually don’t work like that lol.

  • http://www.facebook.com/ludovic.henin Ludovic Henin

    Thanks a lot, well explained with all the details, that make the difference … I want more ! ;-)

    • Anonymous

      Thanks Ludovic, I’m glad you found this useful. I’ll be posting a few more videos next month hopefully when I get a bit more free time.

  • http://twitter.com/thathurtabit Stephen Fairbanks

    Has anyone tried using the Build script that ships with HTML5 Boilerplate 2.0 inside a WordPress theme? There seems to be some changes to the way it concatenates and publishes the .css, so instead of ‘style-001.css’ it now shows as (for example) ‘efe0c8d6b6732c6476c17da7fb949f4df3b6922f.css’ – meaning WordPress no longer has a style.css file in its root… which obviously messes things up.

    Any solutions?

    • Jay

      Hi Stephen, I haven’t tried this out yet. But to be honest, if you’re using Boilerplate with WordPress I really recommend you try out W3 Total Cache which essentially does the same thing as the Build Script but without you needing to get involved in any Terminal. I have a video on it here.

    • Michel

      It seems to be working if your stylesheet is in a subdirectory (css), but no longer if it is in the root directory (errors during build).

      • http://twitter.com/thathurtabit Stephen Fairbanks

        Doesn’t the stylesheet need to be in the main root directory if WordPress is to use it?

        • fb16

          Anyone solved this? Please, could you give an hint, if that is the case?
          Thank you

  • Javier

    As Stephen said the new build script replaces the style.css name with a hash so it’s no longer named style.css, this can easily be changed in the build.xml file but what I’m more interested to know is how to keep the top comment block in the style.css since it’s necessary so WP detects the theme.

  • Pingback: Using the H5BP build script with WordPress « Theo Pak

  • Adam Kochanowicz

    I’m surprised I’m the only one to point this out.

    I get a “Build success” when I follow these instructions, but every single file it tries to minify/compress gives the error 

    “java.io.FileNotFoundException: /Users/adamkochanowicz/Documents/veganfm/wp-content/themes/twentyeleven/publish/publish/[filenamehere]”

    What could be causing this? Why is it looking in “publish/publish”?

    this comes after “[echo] Minifying any unconcatenated css files…”

  • Mark Weston

    Hi Jay,

    I’m very late watching this but Brilliant video! Sure when I have a go there’s going to be a few hurdles but you’ve worked a lot out here. Are you still using this without too many problems with the new releases of h5bp?

    4 months ago, someone pointed out the fact that the build script will strip out the CSS comment at the top of style.css which is required for WP to pick up theme info in the admin panel (http://codex.wordpress.org/Theme_Development#Theme_Stylesheet). I take it that you just paste that comment back in, no fancy solution? ;)

    Also you discuss the style.css file needing to be in the root of the theme, and that this requires you to alter the default properties build config. Then later, you amend header.php to drop the dynamic writing of the stylesheet name so that the build script can update it properly. Why not just change that path to include the /css directory i.e. /css/style.css ? WP does seem to have updated the way it outputs the stylesheet now though, just bloginfo( ‘stylesheet_url’ );

    Thanks a lot,

    Mark.

    • jaygeorge

      Hey Mark, glad you enjoyed. But to be honest I havent’ used the Build Script since last June. I just use the W3 Total Cache WordPress plugin now, since that does most of what the Build Script does, although I may try it again some day.

      I guess you could change where the stylesheet is kept, but I was more inclined to bend the Boilerplate than bend WP, since I don’t really want to unlearn the default way that WordPress does things, but you could probably argue differently.

  • http://glitchtank.com bobby iacobelli

    Amazing! My workflow needs this so badly but its just some of the most fatally BORING material i’ve been at odds with in a while, but this managed to communicate it clearly enough for the concepts to really stick. Very relieved that I no longer have to watch build tutorials and can finally apply this stuff  So thank you very much and I look forward to more of your posts!

  • http://www.reonysstudio.com Reony Tonneyck

    Okay, so it seems like the only thing that isn’t working for me is the link references to my stylesheets are not updating. It’s not adding the version number/updating the link to the minified version. I even tried running it with a default HTML5 Boilerplate template, and it still does this. I saw that you had it working correctly. I even made sure that I have index.html in the file.pages parameter. What’s funny is that in the intermediate folder, it was updated correctly. What is the purpose of this folder anyway?

    Do you know what I need to change/add to get this working? Thank you