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 gotchas.
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 gotchas.
nice video.. very helpful – but your second video is missing.. or link is broken.
Hi, thanks v much for the comment. I fixed the link a few days ago, let me know you have any more problems.
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?
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.
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.
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.
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.
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.
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.
Not sure what you mean by IE fixes…
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.
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.
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!
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
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.
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!
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.
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.
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.
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.
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.
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.
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.
where are these forums you speak of? can’t seem to find them.
Sorry, I meant the GitHub comments – here’s the thread – https://github.com/paulirish/html5-boilerplate/pull/394#issuecomment-923598
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.
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.
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,
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
Thanks a lot, well explained with all the details, that make the difference … I want more ! ;-)
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.
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?
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.
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).
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.
Doesn’t the stylesheet need to be in the main root directory if WordPress is to use it?
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…”
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.
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.
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.
Anyone solved this? Please, could you give an hint, if that is the case?
Thank you
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!
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