WordCamp Seattle 2012
One of the best thing about WordPress is the online community and the many ways one can learn how to use WordPress as a blogging platform or as a CMS. WordCamps are always a lot of fun and a great way to meet other developers and bloggers. This year, I’ve been fortunate to have been selected as one of the speakers at WordCamp Seattle. Check out the schedule and come and say hi.
Integrate JQuery Masonry in your WordPress theme
Floating divs can be quite frustrating at times. When these are added side by side, they usually stack as best as they can but they create gaps.
Leveraging JQuery Masonry can help us achieve a much better layout and it’s integration in a WordPress theme is pretty easy. If you’re not familiar with this technique, jQuery masonry allows you to flow blocks of content similarly to a mason wall. It’s pretty neat and there are many great WordPress themes that incorporate it.
Stop Building Sites In Subfolders? I disagree.
Drew McLellan wrote an interesting article on March 9, 2011. Of course a year later, comments are closed (as they should be unless you want to get daily viagra offers) and I couldn’t add my thoughts, so I thought I would explain why I build sites in a subfolder on the live server.
Drew specifically talks about Perch. I’ve never worked with Perch or any CMS other than WordPress, so perhaps his article is spot on. But when developing WordPress sites, I favour developing in a subfolder on the client’s server.
If the client has an existing site, I create a new subfolder, set up a fresh installation of WordPress, including a database and start working there. I’m a big fan of the BackWPup plugin and set that up during development as well, that way there’s a backup of the theme and database if anything goes wrong.
When it’s time to go live, WordPress provides a simple step to give WordPress it’s own directory. No files but two need to be moved to the root directory and WordPress takes care of the urls. So there’s no danger or messing about with links and losing any page relationships.
By working on a temporary server, I’ve learned the hard way that no two servers are the same. Just last week, I proceeded to set up WordPress on a client’s hosting provider only to find out that they are running a lower version of PHP than required. I’m glad I found that out sooner rather than prior to launching. Now the client has time to look into new hosting.
Additionally, you might not believe this, but clients sometimes disappear and never provide copy. Gasp! Shocking I know. This happens to me at least once a year. I set up the site, make sure everything is ready to go, give the keys to the client and then wait until they tell me they are ready to go live and everything goes quiet. By having them on a subfolder on their live server, the ball is in the court and I don’t have to maintain a temporary site on my server.
I build on average 50 WordPress sites a year and this is my workflow. It makes sense when working with WordPress. What are your thoughts?
Vancouver WordPress Meetup: Building custom sliders
I had the privilege of presenting at yesterday’s WordPress Meetup and had a great time. Live coding is always a bit risky, but there were no major glitches and I think that the material was well received.
I’m not sure what I was thinking when I put all of the material on a usb stick. Turns out, all but one 50 attendees were either on an iPad or an old school notepad. The material should be shared with everyone anyway, so I thought I would summarize it here.
The theme used as the basis of all of my work is what I call the BLM basic starter theme and can be downloaded on github.
Using this theme, I striped it down a bit more to create a portfolio which you can view at portfolio-demo.
This portfolio contains two sliders and I’ve split them into two tutorials.
Part 1 – Addendum: Tutorial
As mentioned yesterday, these series of tutorial were put together as part of my teaching material. I teach a 12 week WordPress class at Langara and this material would be covered most likely in week 6 or 7 depending on the students.
One slider uses wp_get_attachement_image() while the other uses custom post types allowing to demonstrate both techniques.
The slider used is Nathan Searles Slides which is very good. Another slider to look at is Chris Coyier’s Anything slider. If you are looking to insert a video in your slider, he provides an example.
Finally for those of you who want to go responsive, have a look at Flex slider and go ahead, re-size your browser, you know you want to.
Have a look at these resources, play around and let me know if you have any questions. I’d be more than happy to help.
Build a custom image slider using a Custom Post Type
In a previous tutorial, I showed you how one can build a custom image slider using the wp_get_attachement_image function(). This method works very well, but of course there are more than one ways to build a slider. The method of choice will depend on your functionality requirement.
The wp_get_attachement_image function() is great if you want to create a slider out of one post and multiple attachments. For example, portfolio pieces would fall in that category.
But what if instead you wanted a slider to feature multiple posts, with one image each, which would link to different pages? The slider itself would work the same way, but you’ll need to set your back-end a bit differently and use a different loop in your template.
This tutorial will show you how this can be done using a custom post type. Here’s a sneak peek at the demo site. The files used to create the theme as well as the slider snippet can be downloaded here.
Three ways to give your WordPress site a full screen background image
New design techniques are popping up everyday and now that there are less bandwidth issues, designers have been incorporating full screen background images in their design more and more.
If you wanted to do that yourself but didn’t know how, here are a few techniques ranging from super-easy to advanced.
Super easy plugin solution
The Simple Full Screen Background Image WordPress plugin allows you to easily upload and set a full screen image as the background of your website. Once installed and activated, you’ll see in your Appearance section a new area called, Fullscreen BG Image. You can then browse for your image, upload it and insert it like you would for a blog post. Once uploaded, the plugin will do the rest and make sure that it re-sizes to fit your browser. You may need to play with the size and resolution, but using this plugin couldn’t be easier.
Build a custom fade in fade out slideshow
In my previous blog post, I provided a step by step tutorial on how to build a custom image slider into your WordPress. This was achieve by using Nathan’s awesome slideshow plugin. Digging a bit deeper in his code and website, I discovered that he’s also included fade in fade out transition.
If you’ve downloaded the material, took a stab at the tutorial and wish to use this transition effect instead of a slider action, all you need to do is replace the jQuery function in your header with the following:
<script>
jQuery(document).ready(function($){
$('#slides').slides({
preload: true,
preloadImage: 'http://yourthemepath.com/images/loading.gif',
effect: 'fade',
play:5000,
crossfade: true,
fadeSpeed: 500,
generatePagination: false
});
});
</script>
You also no longer need the next and previous arrows.
Build a custom image slider on your home page using built-in WordPress functions
Image sliders are quite popular and add a nice visual element to any website. You could use a plugin to add one to your site, but wordPress has all of the functionality built-in for you to integrate one in any theme of your liking. If you’re a theme developer, you’ll want to follow along and add this code snippets to your collection.
I recently created a site for my colleague and very good friend Barbara. You’ll see that her home page has a very simpler slider. If we ignore the header, sidebar and footer, this page is very simple. In the following tutorial, I’ll walk you through each step and show you how to integrate a slider like this.
Continue reading »
A five year old’s take on branding.
Companies spend thousands of dollars on branding and logos. Ohio-based identity designer Adam Ladd showed his 5-year-old daughter popular logos and asked her to comment on them. Some of these are most likely familiar to her and thus her comments aren’t surprising, but others are very interesting. This video reminds us that we can learn so much from children.
Transferring a domain can be an adventure. Learn how to make it less painful.
One of my WordPress colleagues, Kathryn Presner writes an interesting newsletter full of web design tips. Her latest one discusses the process one should take to transfer a domain name from one registrar to another:
First, avoid doing a domain transfer when you’re very close to your renewal date. Give yourself lots of time, just in case something goes awry. A month is great – two weeks should be doable. A week is really cutting it close.
Be sure the domain is unlocked before starting the process, or your transfer will be denied. Domains are usually kept locked to prevent unauthorized transfers, so when you’re ready to initiate a transfer make sure to go into your domain control panel and unlock it.
Make sure the contact email in your current account is up-to-date. Much of the transfer process relies on email notifications at every step, and if you’re not getting notifications at the right address, it throws a huge wrench into the works. On the flip side, some registrars will deny a transfer if you’ve changed any registrant details within a few months of renewal, so be sure to look through your registrar’s transfer FAQ before changing any contact information.
For most types of domains, you will need a special code from your current registrar. Because nothing is simple in the world of domain transfers, the code goes by many different names: EPP, authorization code, AuthInfo code, transfer key, transfer secret, and so on. Not only that, but simply locating it may not be obvious! You may have to look around for a while to find it – and take note that some registrars provide it directly in your control panel, while others will only email it to you. Again, if you get stuck, your registrar’s transfer FAQ may provide clues.
Keep an eye on your email after you’ve submitted the transfer request and when you get an email from your new registrar, be sure to choose the option to accept the transfer. You should also get an email from your old registrar and/or see a note in your control panel that a transfer is pending, at which point you can manually approve the transfer by logging into your control panel and clicking in the right place. If you don’t complete both these steps, your transfer will be either delayed by several days or blocked entirely.
Make a note of any services you may be using from your current registrar, such as domain parking, forwarding, email, custom DNS, or others. You will need to ensure that your new registrar offers the same services, and then once the transfer goes through, set up the equivalent services again. Be aware that there may be a time lag between when a service stops at your old registrar and when you can re-start it at your new registrar.
I know it seems like a lot to remember. Once you’ve done this a few times, it does go faster, but it’s always a bit of a rigamarole. Good luck to all in your domain-transfer adventures!
For more great web design tips make sure you subscribe to Zoonini’s newsletter or browse through back issues.