Rodrigo Flores > Wordpress

The Best Resources For Web Designers & Developers I Can Think Of (2010 Edition)

Nettuts+

http://net.tutsplus.com/

I don’t think I even have to say a word about this one. The whole Envato network is simply “mind-blowingly” solid.

High quality tutorials and screencasts, managed by the legendary Jeffrey Way.

CSS-Tricks

Chris Coyier has a pretty unique way to tutor you through the countless issues he’s faced in the past. If you go through all the posts in CSS Tricks and pay attention you will save yourself a thousand headaches.

CSS Trick - Curated by Chris Coyier

jQuery 4 Designers

http://jqueryfordesigners.com

While not updated as frequently as the blogs mentioned above, every single screencast Remy Sharp’s done on jQuery is extremely informative. No doubt he is a busy guy. If you’ve never used jQuery before, and have some programing experience, this site will give you a lot more to “write about”.

JQuery For Designers - Learn jQuery, it's a must!

David Walsh

http://davidwalsh.name

David is pretty much Remy’s evil twin. The former a die-hard Mootools fan and the later a die-hard jQuery fan. Take your pick.

PHP, MooTools, jQuery, Javascript & more

Web Designer Wall (Nick La)

http://webdesignerwall.com

I had to praise the local talent as well! Nick’s blog mixes artistic inspiration with valuable information like a true pro. I hope his obvious gift with the pen tool is contagious.

Web Designer Wall - Creative Design at its best

Digging Into WordPress

http://digwp.com

Another site co-authored by Chris Coyier & Jeff Starr (Perishable Press) released to compliment their also awesome book Diggin’ Into WordPress. Both the book and the site are meant to fill in the gaps when it comes to WordPress configuration, coding and administration.

Digging Into WordPress - Hmm, not much to explain...

WP Beginner

http://wpbeginner.com

Like the name suggests, this is a great place to start if you are thinking of coding your first WordPress theme. Even though I’ve been doing WordPress sites for quite a while, going over some of WP Beginner’s knowledge base has proven worth my time.

WP Beginner - The basics and not so basics for WP lovers

Smashing Magazine

http://smashingmagazine.com

I remember landing on Vitaly’s Friedman’s personal site back in the day and thinking He’s only 18!. He is now one of the main faces running the Smashing Network.

Smashing Magazine - A plethora of resources into one.

Sitepoint

http://sitepoint.com

Sitepoint tends to cover both technical and broader topics all related to web development. It is a great resource to keep up with general knowledge and news about the industry. They also tend to shine the spotlight on the newer technologies pretty quickly.

Sitepoint - News, Articles & Tutorials on Web Development

And it goes on…

I seriously think reading and understanding everything already written in the sites above would easily take you more than four years. In that sense, the Internet has become a gift and a curse on all of us, and that’s all I meant in the introduction. Going to College or University also helps with other valuable aspects such as building social, teamwork & project management skills, providing field experience while being fun at the same time.

There are also many, many, many other sites out there that fit in this category. For example, w3schools is a great resource when it comes to any language related to web development. Others like CSS Perk, and CSS Elite are great sources of ideas and inspiration, and yet others like Freelance Folder hammer on the aspects of running your own business.

As far as SEO goes, I am no expert, but if I must point you somewhere for that, I would look at the Google’s SEO Starter Guide to begin with, and on that note, I think that nothing beats high quality content, but the SEO field can be extended much further if you consider things like ad campaigns, information architecture, keyword analysis, landing pages, etc.

Last but not least, if you know of any other great resources for web development, please leave a comment! Writing this article also made me realize that I don’t really know any outstanding sites for learning how to make websites using Flash (not that it is my niche, but maybe soon I’ll make the time to learn it. I know things changed a lot with ActionScript 3.x and there must be as many tools out there for this purpose as there are for CMS sites today). Furthermore, none of the Joomla! tutorial sites I’ve been to have left a good enough impression. For that, the official Joomla! Forum and the Joomla! Developer Site have been pretty useful.

I hope this list helps us make the web a better place and also helps our clients understand how much work can go into every project.

Creating Complex WordPress Navs, Part 1

This nav is made up 2 sections: a main nav, and a subnav.

In this case, I didn’t have that many top pages, so I hard-coded the main nav and used the get_permalink() function to link to the right pages. The only thing you need is to know the IDs of the pages you want to target. To find out:

Log into your WP Admin area
Click on “Edit” under Pages (or under Posts)
Mouse over the page whose ID you need, and
Look at the status bar at the bottom of the browser.

The ID will be the last element in the URL (e.g. “…&post=65″).

The same technique also works if you want to find out a particular post’s ID.

The Main Nav

Below is the xHTML/PHP code for the hardcoded main nav, showing only one item. The one thing to note about it is that when you don’t use a function like wp_list_pages(), you also have to add the current_page_item class manually.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="nav">
<ul>

<li <?php if($post->ID == 6) { echo "class='current_page_item'"; } ?>>
<a title="<?php echo get_the_title(6); ?>" href="<?php echo get_permalink(6); ?>">
<img title="<?php get_the_title(6); ?>" alt="Portfolio"
src="<?php bloginfo('template_url'); ?>/img/icons/portfolio-nav.png" />
</a>
</li>

<li <?php if($post->ID == 6) { echo "class='current_page_item'"; } ?>>
<a title="<?php echo get_the_title(6); ?>" href="<?php echo get_permalink(6); ?>">Portfolio</a>
</li>
</ul>
</div>

The Subnav

For the sub-navigation, I didn’t want dropdowns. Rather, I wanted the child pages to stay on only when you are on a particular section or on one of its child pages. So, I used conditional statements and the wordpress function wp_list_pages(). Within the function’s arguments, I filtered out the pages that belong to that particular section with the “child_of” parameter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php // check for current post and parent
global $post;
$cID = $post->ID;
$cParent = $post->post_parent;
?>

<div id="subnav">
<?php if($cID == 5 || $cParent == 5) : ?>
<ul>
<li<?php if($cID == 5) { echo ' class="current_page_item"'; } ?>><a title="Home"
href="<?php echo get_option('home'); ?>">Home</a></li>
<?php wp_list_pages(array(
'title_li' => '',
'sort_column' => 'menu_order',
'child_of' => 5
)
); ?>
</ul>
<?php endif; ?>
</div>

The CSS

Nothing surprising here, the li elements are floated left against each other. And both nav blocks are placed on the page using absolute positioning relative to their parent elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#nav-wrap {display: block; width: 570px; height: 48px; position: absolute; top: 41px; left: 384px; }

#nav { display: block; }

#nav ul li {
float: left; height: 48px; line-height: 62px; font-size: 17px; margin-left: 10px; margin-right: 10px;
font-family: SansationRegular, "Sansation Regular", "Century Gothic", Verdana, sans-serif;
display: block;
}
#nav ul li a { color: #999; } #nav ul li a:hover { color: #666; }

#nav li.current_page_item a { color: #000; }

#nav li.current_page_item a:hover { color: #000; }

#nav .icon:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); }

#subnav { display: block; }

#subnav ul { margin-left: 30px; }

#subnav li { float: left; margin-right: 14px; display: block; margin-top: 28px; font-size: 13px; }

#subnav ul li a { color: #999; } #subnav ul li a:hover { color: #666; }

#subnav li.current_page_item a { color: #4773BE; }

#subnav li.current_page_item a:hover { color: #6894D2; }

Final Notes

I am very aware that this was probably “too much work” for this nav and very similar effects can be achieved using much less code, yet by doing it this way you can have full control over exactly how you want elements to behave. Not to mention, most of it will work even if javascript is disabled. Last but not least, the tooltip effect on the icons is a simple implementation of jQuery Tools. Just include their library and follow their excellent tooltip documentation.

Also, note that for SEO purposes, how you display your navigation is almost irrelavant as long as you don’t change the permalink structure of your URLs. If you have to do so, then you will experience the burden of having some links displayed in Google search results with broken links until a Google bot recrawls your site.

All said, on the next article in this series, I will build a very similar nav using the WP_Query object and you will learn a lot about implementing WordPress custom loops.

Stay tuned.