tutorial Archives

Feb 27 2013

How To Create Full Screen Background Images In WordPress

Posted by Brock Nunn | Tutorial, Video, WordPress | One Comment

As the internet changes into a more fluid experience, with websites being accessed from tablets, smartphones, laptops, kiosks and even cars, a trend has started to emerge. In an era wherein “Intentional Layout” is dying off, designers must find new ways to provide visual interest. Commonly, this search has led to the use of images. Because, hey, images are interesting by their very nature. In this post, I will show you how to replace your current WordPress background tool with the incredible WordPress Background Manager plugin. Read More

Aug 01 2012

Twitter Bootstrap: How to Load Sites Faster With BootstrapCDN

Posted by Brock Nunn | Tutorial, Twitter Bootstrap | 3 Comments

Hello and welcome again to our ongoing series focusing on Twitter Bootstrap. By now we have covered in detail what Bootstrap is as well as how to design a unique and responsive homepage using the front end framework.

Today, let’s take some time to talk about a great new way to access bootstrap for any of your projects. Content Delivery Networks play an important role for the global web. Instead of downloading website files from a single hosted location, a CDN allows for users to quickly access site files from a large distributed system of servers deployed across multiple data centers around the world. This type of distribution leads provides for easier access to common files, increased security for your site as well as speed.

Twitter Bootstrap is already a great front end framework and it is increasing in popularity among web developers and designers. So it starts to make sense that we begin treating bootstrap like some of its CDN hosted bretheren like jQuery, jQuery UI, Dojo and more. So the very cool people at NetDNA decided to do us all a favor and provide a Twitter BootstrapCDN platform.

Using BootstrapCDN developers and designers can access the vital Bootstrap CSS, JavaScript and image files over a high-powered CDN that even includes SSL access.

To get going, simply link up your CSS files in the same way you normally would in the hea of your document like this.

It is a good idea to link up a local stylesheet after the BootstrapCDN link in order to provide a semantic method of modifying incoming bootstrap styles.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" />

Then, in the foot of your document simply link up the JavaScript portion of bootstrap like this.

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>

Now that we have successfully linked the CDN files to our head and foot areas of a webpage. Let’s discuss a bit more about why it is a good idea to obtain common files from a Content Delivery Network like NetDNA or Cloudflare.

The advantage of using files hosted on a CDN include:

It increases the parallelism available.
(Most browsers will only download 3 or 4 files at a time from any given site.)
It increases the chance that there will be a cache-hit.
(As more sites follow this practice, more users already have the file ready.)
It ensures that the payload will be as small as possible.
(CDN providers can pre-compress the file in a wide array of formats (like GZIP or DEFLATE). This makes the time-to-download very small, because it is super compressed and it isn’t compressed on the fly.)
It reduces the amount of bandwidth used by your server.
(CDN providers are basically offering free bandwidth.)
It ensures that the user will get a geographically close response.
(CDN providers have servers all over the world, further decreasing the latency.)
(Optional) They will automatically keep your scripts up to date.
(If you like to “fly by the seat of your pants,” you can always use the latest version of any script that they offer. These could fix security holes, but generally just break your stuff.)

Credit: John Gietzan

Start getting that extra little performance boost by using the CDN versions of Bootstrap and other common files.

Jul 09 2012

WordPress Slideshow Tutorial: How To Add a WP Orbit Slider

Posted by Brock Nunn | Tutorial, WordPress | 3 Comments

Sometimes it is nice to add some interactivity to your pages. A Home, About or Gallery page can spice up user interaction with the addition of a slideshow, for example. You might assume that cool javascript tricks such as this are out of reach for beginners. However, today I am going to show how you can integrate a great looking slider on your site all with a few simple clicks (and without writing a single line of code).

Step 1: Go Fetch

First, lets take some time to go to the WordPress plugin page for the WP Orbit Slider. Once there, you can read through some of the documentation, faq’s and more. When diving into the use of any plugin, it is a good idea that you familiarize yourself with its area on the WordPress plugin repo as you may find tips that could save a bunch of time.

Step 2: Install

Next, lets get the orbit slider installed on your WordPress blog. We could download the plugin straight from the repo, upload it via FTP and then install it manually. However, thankfully WordPress has a built-in area to take care of that for you.

Log into the WordPress dashboard, then find the plugins page. Next, click “Add New” at the top of the page. Search for the plugin by typing “WP Orbit Slider” into the search field.

Once the plugin has been found in the search, simply click “Install Now”. Pretty easy right? Once you have become familiar with this process, the entire WordPress Plugin Repository will become your virtual playground; experiment and have some fun!

Step 3: Setting Up The Slider

Next, we can set up the slider to display on any page that you would like but first we need to add a few slides. To begin adding slides to your new slider simply head back to your WordPress Dashboard. Now, locate the item on your navigation sidebar that says “Slides”, click and jump into the slides main page. Just as with the plugins before, we can now begin to add new slides to our slideshow. If you would like a bit more of a walkthrough, check out the video below for a step by step introduction to adding slides to our slider, declaring them as featured images and adding a descriptive title.

Step 4: Start Sliding

Finally, we can add our WP Orbit Slider to the desired page. To do this simply head over to the lucky page within your WordPress dashboard admin. Select “edit” and within the editor place the slider by typing in this shortcode

[orbit-slider]

Now, click on the Publish button and voila! Your new slideshow should be working in full force now. At any time, you may add this slider to another page. It is up to you!

I hope that you have found this tutorial to be an insightful look at how even a WordPress beginner can pull off professional level results with the help of a really neat plugin. Do you need some extra help setting up a site of your very own? Don’t hesitate to let us know via our contact page.

Jul 03 2012

Understanding The CSS Box Shadow

Posted by Brock Nunn | Tutorial | No Comments

Well, its all downhill from here…

I say that with my tongue firmly planted in my cheek of course, however that is exactly what I felt when I was learning CSS over four years ago. You see, when I first began in web design, I had learned how to create a few regions, fill them with static content and upload them to a server hoping that my kind clients enjoyed the result. When I found the box shadow property something clicked for me. CSS could go beyond solid colors and rote layouts; using newer CSS3 techniques I could accomplish effects that I thought only existed deep down in a photoshop document.

Simple? Maybe, but a keen knowledge of the box-shadow property can take a design from “C+” to “A” quality quickly. The key is simple… “ABS” or “Always Be Subtle.” In this tutorial, I would like to take you through a few of my favorite uses, techniques and tips.

Getting Started:

So let’s get started with the basics, a simple box shadow on a “<div>” element.

<div class="shadow"> <h2>Call Me Content!</h2> </div>

Perfect! Notice how the numbers in the CSS code control the outcome of the shadow.

First Number: Direction Left or Right
Second Number: Direction Up or Down
Third Number: Blur
Fourth Number: Spread Radius ( We’ll talk about that one later.)

Integrate RGBA:

Remember, it is not often that a real shadow completely obscured the object behind or under it. So, with that in mind it would make sense for us to integrate the RGBA color property since the “A” stands for “Alpha” or “Alpha Transparency”.

<div class="shadow"> <h2>Call Me Content!</h2> </div>

The Floating Box!

Now that we have covered the basic box shadow and integrated RGBA, let’s pull the shadow off to one single side of our element achieving the floating or hovering effect (just imagine the rumble of the enterprise warp core on the div) ((Too nerdy?))

<div class="shadow">

<h2>Call Me Content!</h2>

</div>

Conclusion

There you have it. A basic understanding of the box-shadow property that you can use right now in your projects. Remember, an eye towards subtlety is key with shadows. Late at night it can become tempting to just want to put box-shadows on every element on the page. Resist!

Jul 02 2012

WordPress Loop Part 2: Dig Deeper into the Loop With Template Tags

Posted by Brock Nunn | Tutorial, WordPress | No Comments

So, you have worked your way through the first part of our series on the WordPress loop! By now, you should have a good understanding of the basic functionality it provides. Let’s dig a bit deeper and find out what we can do to make our custom loop sing.

The Basic Layout:

So, we have the basic loop in place. This loop simply opens the door to new posts using the “if have posts” expression, and closes the door using the “endwhile endif” expressions.

Handy Tags (Bookmark This One):

Template tags are what you can use to alter the way that the loop displays your content. After all, in our original loop, we only tell WordPress that we would like some ice cream (or posts) however, we have yet to say anything about the flavor. That’s where template tags come in. These tags sit within your Wordpress loop markup and serve as custom content calls for anything that WordPress is able to display.

The tags shown above are simplistic in nature, and there are many more of them to understand. However, let’s analyze the tags that we have here. Our “the_title();” tag when set between perhaps a pair of “<h2></h2>” html tags would render out an appropriately sized title for your theme. Likewise, if you were to place the “the_content” or “excerpt” tags in an area that you had a desire to see post content or a summary respectively, they would fetch that content and place them in your loop.

Note: The majority of template tags do not work outside of the loop.

Tags in action: A Working Loop

Now that we understand how tags work, I would encourage you to start experimenting with the possible combinations. There are tags to fetch just about any post or page related data that you can think of. Let’s take a look at what a full WordPress loop looks like in action.

This loop would fit very well on a “single.php” or even an “index.php” if you wanted to show full length posts. As you can see at the beginning of this block of code, we initiate the loop. Then define an area for our post details, think of it as your meta information section for the post. Within this section we declare the post title, then follow up with a list of meta information including categories, the date on which the post was written and the author. After our meta area, we follow up by displaying our post content. At the end of the code we clean up shop by ending our while statement, then ending our if statement to complete the loop.

I hope that this article will encourage you to dive into your theme files and play around with the loop. I promise, it is not nearly as scary as you would think. Next we will dive into grabbing posts from a specific category or author. Thank you for reading. If you would like to download our demo code file, click the button below.

Demo Files

Jun 12 2012

What is the WordPress Loop?

Posted by Brock Nunn | WordPress | No Comments

The WordPress loop is an essential building block when a web designer or developer begins to better understand how WordPress works and moreover, how they might manipulate a theme to fit the needs of a web site. The loop is a very simple concept to grasp once you understand its necessity. The loop tells WordPress to go get the content that you need. It is that simple, but lets take a stroll through some code to see exactly how it works in practice.

Relax: It’s easier than you think!

In order to get the loop going, we just need to accomplish a few simple tasks.

Begin The Loop
Do something to display the content we want
Close the loop (simple right?)

In order to perform these actions we will need to ask WordPress to play fetch! This is called the “Query”. So in order for us to get the correct content on the correct page the incredible guys and gals at WP ask that we just tell them what we are looking for. So without further ado, lets take a look at some code.

Begin the loop:

[crayon lang=”php”][/crayon]

ask WordPress to play fetch! …

So, in this simple line of PHP we are up to a few things, and it might be easiest to understand if we just look at it like a sentence. This statement first checks if posts exist on our website. Once we have found that there are posts, then we tell WordPress that as long as posts exist, we would like to display those posts.

Do Something About It!

Next, we would tell WordPress exactly what content we would like to be displayed from those posts. For instance, we could include items like our post title <?php the_title(); ?> or maybe our post content <?php the_content(); ?>.

After we have displayed all of our desired information we just need to close up shop (and tidy up a bit). It is always best practice, if not now entirely essential to close the WordPress loop in a clean manner, in case we want to fire up another content loop anywhere else in the page.

So to clean up, we will use the following code to stop our query.

[crayon lang=”php”]

[/crayon]

This snippet of code will essentially end our loop. Lets walk through this code step by step. <?php endwhile;else: ?> allows for us to tell WordPress to stop repeating the content loop of the queried posts. In the middle of that snippet you will find a helpful PHP bit that provides a helpful error message for users, just in case we didn’t have any posts related to our query. This type of message is a huge help in places such as search pages. After close out our cash register by ending our while statement, we simply turn out the lights by ending our “if” statement.

So our full beginners loop might look a lot like this.