The basic WordPress loop looks something like this:

<?php while ( have_posts() ) : the_post(); ?>

<!--This is “inside the loop”. This is where you can do stuff, like display the title, content, etc-->

<?php endwhile; // end of the loop. ?>

To understand the WordPress Loop and how it works, try imagining a circular race track. Now imagine there’s a little dude, let’s call him Marv, running around the track. At the starting line there’s a coach who hands a packet of data from the database to Marv every time he makes a lap. This data includes all the info about a post: title, content, date of publication, etc. Marv will keep running laps, as long as the coach still has packets of data to give him.

In this analogy the starting line would be the beginning of the while statement:

<?php while ( have_posts() ) : the_post(); ?>

When Marv reaches the “endwhile” he starts all over at the starting line.

Posts vs Pages

Whenever I train someone to use WordPress for the first time, they often have trouble understanding the difference between posts and pages. Should you ever need to explain it, understanding how the Loop works can help you better understand the differences.

A normal Page in WordPress will have a Loop that only runs a single time. That is to say, Marv gets his packet of info, and runs around the track only once. A Post, on the other hand, is designed to be displayed either by itself (similar to a page) or in a list with other posts. On the traditional WordPress homepage (index.php), for example, Marv will run around the track until he reaches the limit set in the reading settings, or until he has displayed all the posts in the database (the coach has run out of packets to give him).

Inside the Loop

If you’re browsing the WordPress codex, or looking for answers on the forums, you’re likely to encounter the term “inside the loop”. Certain WordPress functions will not work unless they are called from inside the loop. Conversely, there are some functions that only work from outside the loop. This can be confusing if you don’t really understand the Loop in the first place. “Inside the loop” simply refers to any code that is executed after the “while” and before the “endwhile”. In my analogy, this would mean the time from when Marv leaves the starting line to when he completes the lap.

Custom Loops

By default the Loop inside the index.php file of a WordPress template will display a list of most recent posts. When you visit a category page the Loop will display a list of posts within a certain category. On a tag page, the Loop will display a list of posts with a certain tag. But you aren’t limited to using these default loops.

With WP_Query, you can create a custom Loop based on a list of arguments. These arguments can include parameters such as category and tag, but also post type and even custom meta fields. In the racetrack analogy, this would mean you can tell the coach what sorts of packets he should give to Marv.

Conclusion:

Understanding the WordPress Loop is vital to understanding WordPress development. While this is a very basic description, I hope it helps to foster that understanding.

The post Get Loopy with WordPress appeared first on graphicgeek.net.

Consider the following code:

<div id="content">
<div class="excerpt">
<h2>Here is an awesome title</h2>
Here is a content excerpt....</div>
<div class="excerpt">
<h2>Here is an awesome title</h2>
Here is a content excerpt....</div>
<div class="excerpt">
<h2>Here is an awesome title</h2>
Here is a content excerpt....</div>
</div>

Nothing fancy here but, as you can see, the same chunk of code is repeating. But with a function, I could accomplish the same outcome by putting the repeated code into a function, like this:

<?php function showExcerpt() { ?>
<div class="excerpt">
<h2>Here is an awesome title</h2>
Here is a content excerpt....</div>

<?php } ?>
<div id="content">
<?php showExcerpt(); ?>
<?php showExcerpt(); ?>
<?php showExcerpt(); ?>
</div>

This is a very basic example to demonstrate how you might use a function. Let’s take a look at what all this gibberish actually does. We start with the basic syntax for creating a function named, showExcerpt:

<?php function showExcerpt() { ?>

This function will do everything after the opening bracket { until it reaches the closing bracket } (shown on line 6). Notice what immediately follows the bracket is “?>” which allows us to switch from PHP to HTML. At the end of the function, we switch back into PHP with another “<?php”.

Once the function is created, we can call it as often as we want. In this case, we simply called it 3 times between the content div. Note, I could just as easily done this:

<div id="content">
<?php 
showExcerpt(); 
showExcerpt(); 
showExcerpt(); 
?>
</div>

Functions can also do a magic trick programmers like to call “accepting arguments”. This doesn’t mean they enjoy debating religion or politics. Rather, it means you can pass some information to function each time you call it.

Say I want to create a function that automatically wraps a word or piece of text in a span tag. I could do the following:

<?php 
function spanWrap($text) {
echo ‘<span>’;
echo $text;
echo ‘</span>’;
 }
?>

This creates a function that accepts an “argument”, or a variable named $text. It then outputs an opening span tag, followed by the variable, and then a closing span tag. So if I were to do this:

This <?php spanWrap(‘word’); ?> is wrapped in a span tag.

The output to the browser would be:

This <span>word</span> is wrapped in a span tag.

The PHP language has a large library of predefined functions. WordPress also includes a large selection of its own functions. The most commonly used of these are called Template Tags. These are used for tasks like displaying the title, content, or excerpt of a page or post. There are also a number of conditional tags, which are functions that return true or false depending on certain conditions.

Conclusion

When I first started developing WordPress sites, all the code in a template file was very confusing. Hopefully this basic rundown of functions will make it easier for you to understand what you’re looking at when dig into your own WordPress theme.

The post Basics of PHP: functions appeared first on graphicgeek.net.

One reason WordPress has become so popular, is that it allows you to get a website up and running in less time than it takes to get a table at Denny’s, even if you have no design skills or experience with web development. Just run the install (most web hosts offer some type of “one click” install), grab one of the hundreds of free themes available in the WordPress repository, and you’re off to see the wizard.

If you are like me, however, a pre-made template never does exactly what you want it to do. If you really want to take advantage of everything WordPress has to offer, you’ll want to customize your theme, or maybe even create your own.

Whatever you want to accomplish, chances are you can find a tutorial or a discussion forum somewhere online that will point you in the right direction. The drawback to using this method is that you may or may not always understand what you find, even if you can get it working.

Having learned much of what I know using the “I need to do X, so I’ll Google it” method, I can tell you there are a few skills that will make your life much easier if you know them before you start trying to build custom WordPress themes.

Learn HTML and CSS

HTML and CSS are the basic building blocks of the Web. If you’re considering developing or customizing your own WordPress theme, chances are you already know at least some HTML and CSS. But if you don’t, you’ll definitely need to learn.

Learn to Program in PHP

WordPress is software. It is written in a programming language called PHP. If you’re going to travel to the Wonderful World of WordPress, you will benefit from knowing the native language. If you know the basics of PHP, you won’t be quite as disoriented when you start digging into your first WordPress theme. Plus, sooner or later you’re going to need some functionality that isn’t already built-in. If you know a little PHP, you can write your own custom functions to do whatever you need.

When I first started working with WordPress I had the advantage of knowing a little bit about computer programming. I wasn’t an expert by any stretch (nor am I now), and I didn’t know anything about PHP, but I was familiar with a few basic programming concepts. If you have no idea what an “If Then” statement is, or the difference between a string and an array, don’t panic. You can learn those concepts as you learn PHP.

Learn About the WordPress Database

Put simply, MySQL is how WordPress remembers stuff. Every post, page, and setting is stored in the WordPress Database. The SQL in MySQL stand for Structured Query Language. You can work with WordPress for a long time before you will need to write your own SQL statements, but having a basic understanding of how information is stored and retrieved from the database can come in very handy, especially when you have to do something like transfer a site from one host to another.

Learn about Graphic Design

This is really optional, depending on what your goals are. If you plan on working with a designer to create the look and feel of the site(s) you develop, you can skip this. But if you are ever likely to be faced with any design decisions (even decisions that might seem trivial), do the world a favor and invest a little time in learning about graphic design. Otherwise, don’t be surprised when someone starts making fun of your typography.

Conclusion

While you can accomplish a great deal in WordPress without ever needing to touch a line of code, having these skills will give you the foundation you need to you to reach beyond the limitations of plugins and pre-made themes, and put you on the path to real WordPress development.

The post Building a Foundation for WordPress Development appeared first on graphicgeek.net.

People seem to be very impressed by photorealistic vectors. I get it. It takes an insane amount of time and effort to create this kind of illustration. However, aside from proving that it can be done, I fail to see the point of making a vector that looks like a photo.

“But turning a photo into a vector means it can be enlarged to the size of a billboard!” I hear you cry. Well that’s great. Of course so could the original photo, in most cases. Billboards are printed at low resolution because they are viewed from far away. Most digital cameras on the market today would capture images that could be put on a billboard.

These “illustrations” are essentially high tech tracing. The illustrator (I won’t go into a discussion on whether or not these people are artists) spends about 20 or 30 hours tracing every little nuance of a photograph using either the pen tool and/or the gradient mesh tool. I fail to see where creativity enters into this process.

When I was in grade school, if one of my classmates drew something with some level of skill, the first question other children would ask would be “did you draw this yourself or trace it?” If tracing was involved, the admiration for the work plummeted faster than Donald Trump’s credibility. Now, you can see tracing on a dozen different Deviant Art profiles followed by an avalanche of “that’s amazing!” or “How the heck did you do that?” responses.

The worst part about this phenomenon is that a high percentage of the photos being traced do not even belong to the person tracing them. The photos have been pull off of the Internet with no regard for the copyright of the photographer. Imagine if you decided to retype all the books you own, and posted them on your blog. Would you get dozens of comments on what an amazing writer you were? No. You would get an unfriendly letter from a lawyer.

The post Your Photorealistic Vectors Don’t Impress me appeared first on graphicgeek.net.

I knew right then and there that I must have that poster. Lucky for me, the BBC is giving them away! You can download a high res PDF intended for printing here (scroll down a bit and look on the right hand side).

The post To Victory Dalek Poster appeared first on graphicgeek.net.

The original website hadn’t had much attention since it was built several years earlier:

The layout was over 1000 pixels wide, and constructed with tables. Everything looked flat and blocky, and the color scheme didn’t really match the company colors at all.

When I started there was a new site under construction. SDB had paid their web hosting provider to create a template for them from which they could build the rest of the site. This company, which shall remain nameless, charged a ridiculous sum of money for a header with drop down menus and a footer. The colors were better but everything still looked pretty flat and dull. Other than the drop down menus, everything was still laid out in tables, the navigation didn’t work properly, and a bunch of unnecessary JavaScript was preventing the code from validating.

The template was coded in ASP classic. I had never seen a single line of ASP code. Over the next 6 months, in between other tasks, I learned. I gave the header and footer some polish, made the background a little more interesting, fixed the navigation and converted everything to an entirely CSS based layout.

The final product was an improvement over not only the original website, but over the template I was given to work with in the beginning. I implemented 2 sections (news and staff profiles) that pull randomly from the pages to which they link. On the contact and employment pages I developed contact forms that are protected from spam bots without the use of CAPTCHA. I also made everything validate.*

Though I was disappointed to have the internship suddenly cut short just before the site was launched, I am proud of what I accomplished. I gained a much fuller understanding of ASP and web design in general.

*The site still validated when I left SDB.

The post Case Study: www.sdb.com appeared first on graphicgeek.net.

I hate gif files.

I mostly use only 2 image formats for the web: jpg and png. I only use gif files for simple animation. In most cases, jpg just looks better. But what about transparency? If you need transparency, png kicks gif’s sorry butt.

“What’s so bad about gif files?” you ask. Well, let me show you. Let’s say you want to put a graphic, a logo for instance, over a multicolor background. You could create a single image that includes the background and the logo. That works in some cases, but what if the exact position of the logo isn’t certain? Say, for example, a centered layout with some kind of textured background. Then you need to give your logo a transparent background.

If you do this with a gif file, it might look something like this lovely rendition of the Graphic Geek logo, over this even lovelier background:

That works, except the edges of the graphic look like you could use them saw through drywall. Maybe if we give the gif a neutral gray matte it will help:

Ok, that looks good in some places, but even worse in others. You could spend hours trying to find just the right outline color that might make the graphic almost work, or you could just use a png file, and get this:

You see how much better that is? It’s pretty obvious that the png is gif’s more talented cousin. In most cases png even has smaller file sizes. So why do designers continue to use gifs? Ask a web designer who still uses gifs, and they will likely tell you it is for maximum browser support. However, a quick look at this list shows that the number of browsers that don’t support png is inconsequential.

There is only one browser I can think of that still has enough market share left to consider that will have problems with png, and that is the dreaded Internet Explorer 6. IE6, long the bane of web designers everywhere, will display png files, but it will ignore their transparency. But browsers, like most technology, age quicker than canines. IE6 is 11 years old, which in browser years is about 756. The Internet can’t keep this senile old browser on life support forever. Even Google has decided it’s time to pull the plug on grandpa. Other than a few specific cases, I say it’s time to pull the plug on gif as well.

The post Kill your Gifs appeared first on graphicgeek.net.

I would, however, like to explain why I use a PC instead of a Mac. As a graphic designer, I am surrounded by people who revere Mac like it’s their favorite child. I constantly hear about how Macs are more secure, far easier to use and never crash, or have any problems at all.

None of those beliefs are entirely valid, but nevermind that. I don’t use a PC because I think it is superior. I use a PC because I like to tinker. I like to have some measure of control over my computer, and the components inside it. I can do that much easier with a PC than with a Mac.

Yes, I know about Hackintosh. You can install the Mac OS on non-Mac hardware. Apple will even sell you the software. Of course, installing that software on non-apple branded hardware violates the user agreement, so good luck if you ever need tech support. Regardless, I don’t see the point. Mac’s reputation for stability comes largely from Apple’s rigid control over the components that go into their computers. If you take that control out of the equation, there’s no guarantee your Hackintosh system will be any more stable than a Windows system.

Don’t get me wrong. I don’t mean to extol the virtues of Windows. If I could get the Adobe Creative Suite to run on Ubuntu, I’d probably scrub every last bit of Microsoft from my hard drive. But since I can’t, I stick with Windows.

The post Why I use a PC instead of Mac appeared first on graphicgeek.net.

I won’t go into all the various reasons why tables are now a dirty word among web designers. Let’s just say that CSS is a much more efficient and flexible way of coding a website. The end result is that HTML and CSS have become two inseparable building blocks of web design.

When I first began to learn CSS it was a bit frustrating. Overall, it is an elegant way to style, but there are some quirks to CSS that still make me long for the simplicity of something like a <center> tag. I’ll be doing a couple of CSS tutorials later on down the road, but for now you can check out this short list of resources I have found helpful for understanding CSS.

W3Schools

This is a great resource for beginning web designers, not just for learning CSS, but for many other languages of the web.

Tizag.com

Another great overall resource for web designers; I reference this site often.

MaxDesign

This site has some good step by step tutorials.

css-tricks.com

This is a nice tutorial that explains the ever confusing float property of CSS.

Google Chrome or Firebug

Firebug is a great way to quickly see what the heck is going on in your code. You can hover the mouse over your tags and see where the tag is being displayed, its dimensions, margins, padding, and a whole bunch of other useful information. Google Chrome has a very similar feature built right in. Using these tools is like finding a light switch in a dark room.

The post How I Learned to Stop Worrying and Love CSS appeared first on graphicgeek.net.

The post Let the Design Geekdom Begin appeared first on graphicgeek.net.