Hello! I’ve been busy working on a new project with Ingenious Designs called Moonplayer.com! It’s a music player that plays songs and music videos from YouTube by artists in your playlist. Very cool and worth checking out! You can find it at:
www.moonplayer.com
I’m learning a lot of exciting things about jQuery in the process, and I plan on posting some new tutorials soon! Until then!
No CommentsI used to have this problem a lot, and maybe you can relate: You’re working with a client and they want to be able to change the content of their site with ease. The only problem is, you don’t want them to ruin the styling in the process! Sometimes when clients start changing things around in the post editor, disaster ensues. So what do you do? Query the WordPress post data with PHP and style it just how you want it, that’s what!
Another problem that arose in my early days of building websites was the problem of making multiple parts of the same page editable. If you create an “About Me” page for your client, you can allow them to edit the the main page content by going to the page editor and selecting the “About Me” page. But what if they also want some additional content in a sidebar or in a separate section of the page? Again, querying the WordPress data solves this problem for you! Let’s look at an example.
We’re going to make an “About Me” page for your an imaginary client and allow them to change several sections of the page by changing post content. So to start, we’re going to make the About Me page template. To start, we’ll make the page template header. It’s very simple, all we need to do is make a new file called about-template.php add a PHP comment at the top of the page:
<?php /* Template Name: About Me */ ?>
That’s all you need for WordPress to recognize the file as a page template. Now we’ll use the php call for the WordPress header and some divs to contain our content:
<?php /* Template Name: About Example */ ?>
<?php get_header(); ?>
<div id="wrapper">
<div id="what_we_do">
<h3><!-- Title Goes Here --></h3>
<!-- Content Goes Here -->
</div>
<div id="team">
<h3><!-- Title Goes Here --></h3>
<div class="team_member">
<h5><!-- Title Goes Here --></h5>
<!-- Content Goes Here -->
</div>
</div>
<div id="services">
<h3><!-- Title Goes Here --></h3>
<!-- Content Goes Here -->
</div>
</div>
<?php get_footer(); ?>
Now we’ve got a very basic structural layout for our content. Here comes the important part: we’re going to query specific posts to get our content and plug it into the layout. We’ll create a post called “What We Do” and place our content inside for the “What We Do” section of the about page. Next, we’ll create a category called “Team Members” and create a few team member posts. Just for this example we’ll make two different Team Members: John Doe and Jane Doe and make sure they’re in the category called “Team Members”. Finally, we’ll create the “Services” post and add our Services content. With all of that in place, we’ll query the posts with the query_posts() function and plug the content into the correct divs.
In order to get the content we need, we’re going to need the some of the post ID numbers. In order to find this, click on “Posts” in the backend of WordPress and hover over the edit link for the post in question. Look at the link url in the bottom of your browser and you’ll see that the url ends something like this:
post.php?post=341&action=edit
The number following “post=” is the id number. So now let’s update our code to pull the correct content for our About page! We’ll be using the query_posts() function for this, so let’s talk a bit about how that works. First you should look at the WordPress function reference for query_posts(). Using query_posts we can specify a specific post to pull content by writing ‘p=’ and then the id number in the function arguments. Like this: query_posts(‘p=40′) for a post with an id of 40. We can also specify a specific category to pull posts from using ‘cat=’ and the category id. To start let’s pull the post content for the “What We Do” and “Services” sections:
<?php /* Template Name: About Example */ ?>
<?php get_header(); ?>
<div id="wrapper">
<?php query_posts('p=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="what_we_do">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
<div id="team">
<h3>Team</h3>
<?php query_posts('cat=1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="team_member">
<h5>Team Member Name</h5>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<?php query_posts('p=2'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="services">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<?php get_footer(); ?>
So what’s going on here? We query the posts for each different section, and then run the loop. The loop is the part that looks like this:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Now that we’ve started the loop, we can use all of WordPress’ familiar functions such as the_content() and the_title. The wp_reset_query() function simply resets our query so that if you wanted to use the WordPress loop later in the page, it would behave as it normally does. I’ve put each php function in its own set of PHP tags. You don’t have to do this, but I find it keeps thins a little more orderly! Notice that for the “Team” section, we started the loop after the opening Team section div. This is because for every team member post in the Team category, WordPress will run the code in the loop. We want all of the team members’ profiles to be contained within the “team” div, so we’re starting the loop within the “team” div. I’ve created a little test page so you can so what this code looks like. I made some dummy posts and added this basic styling for the team member profiles:
.team_member {
width: 800px;
margin: 20px auto;
}
This may seem like a lot of code, but there are some advantages to this method! First of all, if your client wants to change the content of the post, they can do so without consequence. And since the post is queried by it’s ID number, your client can change the name of the post without screwing anything up! For the “Team” section, your client can add new posts to the “Team” category and it will show up in the “Team” section, complete with custom styling.
I hope this tutorial has been helpful, and gets you a step closer to making websites that are easy to edit for any client!
Next week: Part 2: Generating custom, multi-level nav menus! Stay Tuned!
No CommentsWell, I’ve been quite busy lately, but I have some exciting plans for new tutorials!
The next tutorial I have planned is a very in depth WordPress tutorial about Pulling Post Content into Custom Pages. This tutorial will help you organize your WordPress sites in ways that will not only make it easier to keep track of the content for your websites, but will also make editing content a snap for clients if you’re in the business of making WordPress pages as a web developer or designer. I will also touch on Creating Dynamically Generated Nav Menus (complete with dropdowns!) and will even incude some Basic jQuery Tutorials!
So, exciting stuff coming up! I haven’t finished these quite yet, but wanted to let you all know that these will be arriving soon, so please check back soon! In addition, I’m finishing up a couple of new projects, so some new and interesting projects will be joining the portfolio lineup soon
No Comments
We’re proud to announce that our most recent piece of work, the Spillt Motion Graphics website, has been nominated for a CSS Design Award and has been added to the Favourite Website Awards 2011 Public Shortlist! It was great creating this site for Spillt, an awesome motion graphics company based in Denver, and working with designer Sean Herman! Thanks to everyone who has visited, supported, or enjoyed the site. Check it out here.
Here’s to many more exciting websites to come in 2011!
No CommentsPart of what makes WordPress so useful is the myriad of features it supports, and the high level of customization that it offers. When first starting out, it can be daunting to try and explore all of the options available to you! So here are 5 techniques that I found useful when I first starting using WordPress to build websites.
Page templates are great because they allow you to make a special type of page that fits your needs, and it’s really simple! All you need to do is place the following code at the top of your document:
<?php /* Template Name: Your Template Name here */ ?>
Everything else on the page behaves just like any other wordpress page. Once you’ve added the template code at the top of the page, save the page as a .php document and add it to your theme directory. Now, when you make a new WordPress page, you can select your template form the template drop-down menu. This is especially helpful if you need to create multiple pages that exhibit a special behavior. Here’s a very simple example:
Let’s say that I want to create a certain template that will display a specific graphic at the top of any page using the template. First I’ll put the template code at the top of my file:
<?php /* Template Name: Portfolio */ ?>
Often it’s good to start with some code to build off of when making your page template. I’m going to paste the code from the page.php file from the default template that comes with WordPress 3.0 (the template is called “TwentyTen”). Here’s the code as it is in the default wordpress theme with my added template code at the top:
<?php
/* Template Name: Portfolio */
?>
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2><?php the_title(); ?></h2>
<?php } else { ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
<div>
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
This is great as starting code, but I want to add my title image. So I’ll add my <img> tag into the code and place it right after the opening “content” div like so:
<?php
/* Template Name: Portfolio */
?>
get_header(); ?>
<div id="container">
<div id="content" role="main">
<img src="images/title_graphic.jpg" alt="Title Graphic" />
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Now all I need to do is select the Portfolio template from the Page Template drop-down menu:
Any page that has the Portfolio page template selected will show the image I included in the template code. The best thing about this technique is that its implementation is simple, but the level of complexity you can achieve is surprising. You can make pages that extend the functionality of WordPress, but that are very simple to edit for clients!
Sometimes you want to be able to create a series of individual posts that all fall within the same category and show those posts all on one page. For example, you may have a list of employees for a company that you want to display on a page called “Our Team”. This is possible with the WordPress function query_posts().
Like many great WordPress features, this is a very simple function to use. I’m going to show you how to take the page.php file from the default WordPress theme (twentyten) and alter it to show only posts from a specific category. First Let’s take a look at our page.php code:
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2><?php the_title(); ?></h2>
<?php } else { ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
<div>
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
This is the code that controls the content we’re seeing. First, the checks to see if there are in fact any posts. Since this is the page.php code, the code will find the content for the page we’ve created. For example, if you create a page called “Our Team” and write the word “content” in it, this code will find the “Our Team” page and show the word “content”. The code that says “the_title()” and “the_content()” simply pulls the title of the post (or the page in this case) and the content from the post (or page).
We want to change what is displayed, however, by adding the “query_posts()” function before the code that looks for posts. Just as an example, I’m going to create a page that displays all of the posts from the category “Team Members”. Here’s the code:
<?php query_posts('category_name=Team Members'); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2><?php the_title(); ?></h2>
<?php } else { ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
<div>
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
Now that we’ve added this code, the behavior of the page will change. Instead of using our “Our Team” page as the source of the page content, the page will now look to the category called “Team Members” and if that category has posts, its content will be displayed here. For every post in the “Team Members” category, another post will be displayed on the page. This can be extremely useful when you already have an existing posts page and you want another page that displays posts. On my website, for example, I have both a Blog page and a Work page, both of which display posts. Using this technique, I was able to show one set of posts on one page, and another set of posts on another page.
If you only need to add a small piece of additional content onto your default page.php file, there is a quicker and easier way than using Page Templates. By using the is_page() function and other related functions, you can easily insert small bits of code that will show up only on a specific page. Let’s go back to the earlier example, the one in which I wanted to show a title graphic on only certain pages. This time, we’ll accomplish this using the is_page() function.
Let’s go back to our page.php file from the default TwentyTen WordPress Theme. Let’s say this time, we only want to add a header image for the Portfolio page.
<?php get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php if(is_page('Portfolio')) { ?>
<img src="images/page_header.jpg" alt="Page Header Image" />
<?php } ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2><?php the_title(); ?></h2>
<?php } else { ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
Now, when a user visits the Portfolio page, the code will execute the code and show the image at the top of the page. If you want to show the image on several pages, this is also possible. Let’s alter the code so that if we’re on the About page or the Portfolio page, we’ll see the image:
<?php if(is_page(array('Portfolio', 'About'))) { ?>
<img src="images/page_header.jpg" alt="Page Header Image" />
<?php } ?>
By using an array with several values, we can target multiple pages at once. Similarly useful are the is_home() and is_category() functions. In fact, many of the functions that begin with “is_” are quite useful and I highly recommend you look into them!
I got this information from this wordpress site: Using Permalinks
It can be unsightly and frankly somewhat confusing to find that all of your WordPress pages are named after their id number and not their page/post name! There’s a quick fix for this! If you go to your WordPress dashboard and click on Settings>Permalinks, you can create a custom permalinks structure. I like to use the one mentioned on the Using Permalinks page I referenced above. In the Settings>Permalinks menu, click on “Custom” and enter the following into the textbox:
/%category%/%postname%/
Now all of your pages will have URL’s named after their page names, and post URL’s will be named after the category they’re in and the name of the post. A post in called “Post 1″ in the category “Posts” will have the URL: http://www.yourdomain.com/posts/post-1
Now isn’t that cleaner!? Looks muuuuch nicer now!
Using custom fields can help add extra optional information to your WordPress pages! You can find the Custom Fields input under the content-entry box when creating a page:
If you click “Enter new” you can name a new custom value. For this example, let’s name the field “Mood:” and in the value area, we’ll type “Productive”.
Click “Add Custom Field” to finalize your field and add it to the page. Next we need to find a way to display the Custom Field data. We’re going to use the get_post_meta() function to accomplish this.
With the get_post_meta() function, we need to pass 3 parameters to the function. The first is the id of the post that contains the Custom Field. In this case, we just want the Custom Value from the current page. To get the ID of the current page, you can use $post->ID. Next, we need to specify the name of the Custom Field we want to pull data from. In this case, the Custom Field is called “Mood”. Finally, we can specify whether or not we want one value, or multiple. If we, for example, created two fields on our page called “Mood” with two different values, we could enter “false” as the final function parameter (or leave it blank) to return an array with both of the “Mood” values. However, we only want to show one mood at a time, so we’ll enter “true” for the last of the function parameters, specifying that we only want the first Custom Value, not multiple values.
<?php $mood_value = get_post_meta($post->ID, 'Mood', 'true'); ?> <?php echo $mood_value; ?>
The above code will output the value of the “Mood” Custom Field. However, we want to make sure that if a Mood isn’t set, then no content will be shown. And if a Mood is set, then we want to display it in a stylish manner. So, let’s add a bit to the code:
<?php if(get_post_meta($post->ID, 'Mood', true)) { ?> <?php $mood_value = get_post_meta($post->ID, 'Mood', true); ?> <strong id="mood">Mood:</strong> <?php echo $mood_value; ?> <?php } ?>
Now, the code first checks to see if the “Mood” field has been filled out. If not, nothing is shown. If the “Mood” field does contain content, then the page will show “Mood: ” followed by the value we entered in the “Mood” field. We’ll see something like this:
Mood: Productive
Using Custom Fields can allow you to easily add optional content to any post you want. It’s a simple way to add extra functionality to your WordPress pages.
Well, I hope this tutorial has shed light on some of the powerful tools available to WordPress users! Feel free to e-mail me with questions or comments on the Contact Page! Until next time…
No CommentsHere are 5 of the features that make TextMate one of the best options for developers today. After working with many different editors, I’ve found that TextMate saves the most time and has the most efficient workflow. Hopefully this article will help you save as much time as I have by tapping into the powerful tools offered by Textmate!
This is by far one of the most powerful tools in TextMate. Regular Expressions allow you to edit very specific selections in your document. Regular Expressions will allow you to find any e-mail address, phone-number, or other specific type of text in your TextMate Document, giving you unprecedented control over your code. You can find some TextMate RegEx reference material here.
Here’s an example of a way to use TextMate’s Regular Expression feature. If you get confused, you can refer to the TextMate documentation (http://manual.macromates.com/en/regular_expressions) which explains all of the Regular Expressions used in TextMate.
So let’s say I want to find any group of letters followed by a colon (for example any css property). First, I want to specify that the string I’m looking for starts with 1 or more letters (but no numbers). Looking at the TextMate RegEx reference, I see that \w denotes a word character (aka letters but not numbers) so we’ll start with that. Next, we know that there needs to be a minimum of one letter before the colon, but there is no maximum amount of letters. Looking at the reference, we can see that the plus sign denotes 1 or more occurrences of a character. So, so far we’ve got the following:
\w+
Next, we know that after the series of letters, we are looking for a colon. In order to denote a colon character, we simply surround the colon in square brackets. In TextMate’s regular expressions, square brackets denote a character class. In this case, we only want the colon character, so we surround just the colon in square brackets. The final result is as follows:
\w+[:]
Go ahead and try it out! Write some text in your document, and include some words followed by a colon. Press Command + F to open the find and replace window. Make sure you have the “Regular Expressions” box checked:
If you’ve entered the above code with Regular Expressions enabled, pressing the “Find Next” button should highlight the next instance of a word followed by a colon in your document. While this is a very simple example, it gives you an idea of the power of TextMate to cut down your work time!
In TextMate, you can create projects that will keep all of the files for a particular website or program organized. All you need to do to create a project is go to File>New Project File.
Next, click on the gear icon on the Project Drawer and select “Add Existing Files”.
You can now select any files or folders you want included in your project. The files can be organized into folders, and any time you open your project, all of the files will be there, ready to edit. Once you’ve added the necessary files and folders, click File>Save Project As to make sure your project is ready anytime you need to get to work. You’ll be surprised how much this improves your workflow!
There are several ways to do this, and they are all incredibly useful! First let’s cover editing the same column on multiple lines. What do I mean by this? Look at the following block of text:
First, I’m going click right before the first letter of the first line, so the cursor sits just before the letter “A” on the first line. Next I’m going to Shift + Click right before the first letter of the last line. This will select all of the text between the first letter of the first line and the first letter of the last line like so:
Finally, I’ll press the ALT (option) key to place the cursor at the beginning of all three lines. It may be a little faint, but in the next screenshot, you should be able to see the cursor spanning all three rows of text:
Now when I type “<li>” to make these into list items, I only need to type it once and it will appear on all three lines! AWESOME!
Alright, so we managed to quickly and efficiently add the <li> tag to the beginning of each line. Next, we’re going to add the closing </li> at the end of each line at the same time. First, I’ll select the end of the first line. Then, just as we did earlier, I’m going to Shift + Click the end of the last line, selecting the text between the end of the first and last rows of text. Once this is selected, I’ll go to Text>Edit Each Line in Selection:
Now, when I type, whatever I type will appear at the end of each line:
If that’s not a time saver, I don’t know what is! Use this to shave off valuable minutes from your coding. It may be a small amount of time, but use these tools on every project and you’ll ultimately save yourself from hours and hours of wasted productivity!
With Bundles, you have access to code snippets for many of the most popular programming languages! And what’s better, you can write your own scripts to perform tasks for you! Jonathan Kemp over at www.kempwire.com wrote this article on how to make a Bundle that will delete blank lines in your document! It’s a useful tool if you end up with extraneous formatting when pasting text from another document into TextMate. Jonathan shows you step-by-step how to create the bundle, so I won’t go into detail. This technique serves as a good illustration of the power of even the most basic Bundles in TextMate!
Alright, so this may not seem as useful as some of the other features, but you’ll be surprised how much a clear color-coding system helps when coding! Having a sensible color scheme helps you spot mistakes easily and allows you to find important pieces of code in a flash.
For example, any misspelling of CSS properties will result in an oddly colored line of code. Having the right color scheme will allow you to see syntax errors as you make them, leaving less busy work later to correct mistakes. As you can see in the screenshot below, syntax and spelling mistakes become glaringly obvious with a color scheme in place:
Experiment with different schemes until you find the right one. It’s crucial to be able to recognize what colors mean. This will help you avoid a myriad of mistakes and ultimately saves your eyes the effort of looking for a specific line of code buried within a large block of text!
Well that’s all for this article! Please contact me if you have any feedback about this (or other) blog posts! I’m interested to hear what’s working and what’s not! Thanks for reading and I hope these tips save someone many hours of valuable coding time!
1 CommentI don’t know why, but I feel constantly compelled to redesign my website! I hope you like the results of my most recent update. I find the site has taken on a cleaner look that’s easier on the eyes. I hope you feel the same!
No CommentsIt’s hard to know where to begin when you’re buying your first book in an attempt to learn a new skill. Always make sure to buy the newest edition of any web design or development book you’re interested in, because times change and so do the best-practices for each language. There’s no such thing as a perfect book, so make sure to Google anything you don’t understand so you can find reference material to inform you. In many cases, this will allow you to get much more out of any book you read. There’s a wealth of great information out there, but it’s these 5 books that I found exceptional for beginners:
1. Designing with Web Standards (3rd Edition) by Jeffrey Zeldman
Zeldman’s Designing with Web Standards isn’t so much an instruction book on web design as it is a clear and concise explanation of idea behind web standards. When I read this book, I hadn’t touch any web-based code since the days of tables and font tags. Zeldman laid it all out in this book, explaining how the web went from the clunky combined structure and styling of early HTML to the sleek and sensible separation of structure and style with XHTML and CSS.
In addition to the great history lesson about the web as well as a great introduction to the new web standards, Zeldman also goes over the basics of combining XHTML and CSS to design a website. If you’re wondering what all the hubub is about Web Standards, this is the book for you, and a great book all around for someone trying to break into the field of Web Design.
For a web designer you can never be too well-read on CSS. Once you understand the basics, there are still tons of useful advanced techniques to learn. Browser inconsistencies are always a problem, and there are a slew of workarounds and best-practices to solve them.
In CSS Mastery, Andy Budd starts by explaining the box model, something that will come in handy for the rest of your web design career. Understanding the box model will help you grasp the way that layout elements behave (and how they misbehave in Internet Explorer!). Andy covers all the bases including menus, text, layouts, rollovers, and everything else.
CSS Mastery goes into moderate depth on a wide variety of topics. Books on more specific CSS subjects will co into more detail than CSS Mastery, but the well-rounded range of crucial subjects is much better for beginners. Any topics that you still have problems with after reading this book can lead you to other, more specialized CSS books. For someone trying to dive into the world of CSS, this is my #1 pick.
3. PHP Solutions: Dynamic Web Design Made Easy by David Powers
David Powers knows exactly what to include in a book for beginners. In addition to going over the basic syntax and structure of the language, David includes everything you need to know to install PHP and set up your own testing environment to try out all of the book’s wonderful examples. The examples in the book are both well-explained and useful. From examples as simple as includes to more involved projects such as a database-driven photo gallery, Powers rarely loses his audience, no matter how new they may be to the language!
If you’re interested in web development, this is a must, since PHP is such a widely used language, and the driving force behind many popular CMS’s including WordPress (the CMS used for this webpage among countless others). I highly suggest using php.net’s documentation as reference for any classes or functions you don’t fully understand.
4. Bulletproof Web Design by Dan Cedarholm
This might be a better follow-up to CSS Mastery by Andy Budd, but it teaches many CSS best-practices in a very sensible way. Dan introduces a commonly used CSS technique, then explains why it’s not the best solution. Next a better solution is introduced, and Dan explains exactly why it’s an improvement. It’s simple, but effective, and it makes sense to seasoned CSS gurus and beginners alike.
Bulletproof Web Design bridges the gap between simply understanding CSS, and understanding the best way to use it to create a great site for every browser (and browser setting). Dan’s website www.simplebits.com is also a great resource, and he has a few other books worth checking out as well!
5. Actionscript 3.0 for Flash and Flex by Sean McSharry, Steve Webster, and Todd Yard
Ok so I guess some would say that Actionscript 3.0 doesn’t fit into the web development genre, but I’m sure there are plenty of you out there interested in flash, and flash is still a huge part of the web today. Don’t get me wrong, flash has its time and place, but there are some web apps that are best suited for Actionscript 3.0! Also keep in mind that there are versions for Flash CS3 and CS4, so it’s up to you which version to get depending on which version of flash you have.
That said, I think this book is about the closest I’ve found to a good all-around introduction. Like some of the other books on this list, it is good for beginners because it is well-rounded. After explaining the basics of the language, it goes on to show you numerous techniques and practical projects in many different areas of interest. I suggest this book as a way to get acquainted with the language, while further books will help you gain a greater understanding of the more specific functions that suite your needs. Actionscript 3.0 is a language capable of doing so many things, so it’s nice to have a book like this to introduce you to some of the most used functions of the language.
I find a lot of Actionscript 3.0 books lacking in their explanations for beginners, and this book has moments of confusion, but to me it is the closest I’ve found to a book for beginners that explains everything in an easily understandable way. That said, make sure you always keep your Actionscript 3.0 Language and Components Reference open in case you come across something you don’t understand.
I came across a pretty frustrating IE6 background bug a while ago and it took me a while to figure out the surprisingly simply solution! Well, technically this isn’t a bug. It’s technically a user-error, but the code (albeit incorrect) works in most modern browsers! Take a look at the following code:
body { background: url('images/bg.jpg')top left #fff no-repeat; }
If you try this code in Safari or Firefox, it will work perfectly. You will see the background image positioned at the top left with no-repeat and with a white background. However, IE6 will render no background! Strange, no? Quite strange. The problem is the lack of a whitespace character between the background url and the position declarations. I became so used to Firefox and Safari’s lax handling of this code that it took me forever to figure out that one little space was causing all of my problems! The following code fixes the problem:
body { background: url('images/bg.jpg') top left #fff no-repeat; }
Hopefully this post will save someone some frustration!
No CommentsThis is my first tutorial. Ever. So please let me know if there is anything that needs improving or if you have any questions, comments, or suggestions. That said, I hope this helps someone out!
I’ve found that it’s often easier to work on a webpage with body tag ID’s. Luckily, you can add these automatically to every page in WordPress! Now if you need to style your Blog page elements differently than your Contact page, you can simply add the #Blog selector to any rules that apply specifically to your Blog page. All we need to do is add some code to your WordPress theme’s index.php file. Here we go:
To start, we need to pull in the page name. There’s a WordPress function for this:
$pagetitle = wp_title("","0");
<body id="<?php echo $pagetitle; ?>">
You can read all about wp_title() here. We have the separator character set to nothing (hence the empty pair of quotes) and because we’re placing this value into a variable, we are keeping the second parameter as zero. This keeps WordPress from automatically echoing the page title, and instead gives us a php string. (If that doesn’t make sense, don’t worry it’s not important to know exactly how the wp_title function works.) Unfortunately there’s a problem. The value returned by wp_title(“”,”0″) has a single whitespace preceding it. It’s an obnoxious bug specific to this WordPress function. I’ve tried many different combinations of parameters, but this bug persists. No problem, we’ll simply strip the whitespace off of the beginning of the string with ltrim(). So now we have:
$pagetitle = ltrim(wp_title("","0"));
<body id="<?php echo $pagetitle; ?>">
Alright, everything’s working fine, now, right? Wrong! We’ve got another problem. Let’s say you’re on a page called “What We Do”. Well if we look at our body id tag name on a page called “What We Do”, we’ll see that the id name now has spaces in it! This won’t do, as it will cause all kinds of problems for us when we try to style items that reside specifically on the “What We Do” page! So we’re going to need to cut this down to one word. Let’s strip the whitespace from the body id name. We’ll do this by using str_replace. We’ll replace each whitespace character with an empty character, effectively deleting it from the string. Here’s the code:
$pagetitle = str_replace(' ', '', ltrim($pagetitle));
<body id="<?php echo $pagetitle; ?>">
We’re not done yet though. I like to keep my id tag names lowercase, so let’s get rid of those pesky caps. We’ll convert the whole string to lowercase characters using strtolower():
$pagetitle = strtolower(str_replace(' ', '', ltrim($pagetitle)));
<body id="<?php echo $pagetitle; ?>">
Now we’ve got a nice, clean id tag name. It’s a single, lowercase name that reflects the page title. I know it seems like we’re finally done, but we’re not! What about the home page? Well in WordPress, your home page doesn’t return a string at all when you use the wp_title() function. So we’re going to need to account for that with a simple if statement:
$pagetitle = strtolower(str_replace(' ', '', ltrim($pagetitle)));
if (strlen($pagetitle) == 0) {
$pagetitle = 'Home';
}
<body id="<?php echo $pagetitle; ?>">
This if statement checks to see if we’re on the home page by counting the number of characters in the page name. If we’re on the home page, the wp_title() function won’t return anything, and the character count will be zero. If the character count is zero, we can set the $pagename variable to the name of our homepage. In my example, I’ve used the name ‘home’. But you can change it to whatever you want your home page to be called.
Alright, one more thing. You’ll notice that if you click on a specific blog post, the body tag id name will be the same as the name of the post. This throws a wrench in the gears because now any styles that we wrote specifically for the blog page won’t show up for the individual blog post! To fix this problem I recommend going to your ‘single.php’ file and wrapping the conent in a div with the same id name as your blog page. For example, if your blog id tag name is ‘blog’, then wrap your ‘single.php’ content in a div called ‘blog’. That way all of the styles that we wrote for the blog page will still apply to individual posts.
Well, that’s all! I hope this helps make your WordPress theme development quicker and easier!
4 Comments