rockable press how to be a rockstar wordpress designer

PSDTUTS Theme Design Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme... PSDTUTS Theme Design Website design for leading photoshop tu







Collis Ta’eed

Notes: Example Themes and Files

Method 3 Install MySQL, PHP and WordPress

on Your Local Computer

wp-content/ plugins

Activate Akismet Spam Protection

Update Your Profile

Install Sitemap Plugin

Further Resources for Getting

Started with WordPress

How Blog Design is Evolving

Order and Clutter

Plan for Advertising

Engage the Reader in Discussion

Our Example Set of Designs

















The Creatif HTML Tutorial – From PSD to HTML







<meta http-equiv="Content-Type" content="text/html;

/* Fix up IE6 PNG Support */

img, #logo { behavior: url(scripts/iepngfix.htc); }

<h2>Eden Website Design</h2>

<small>in <a href="">web design</a> tagged

<a href="">corporate</a>, <a href="">web2</a></ small>

<p>And then a short description of the website would go in here Something saying maybe what

awesome skills I used on the project and how happy the client was.</p>

<h2>Eden Website Design</h2>

<small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>

<p>And then a short description of the website would go

in here Something saying maybe what awesome skills I used on the project and how happy the client was </p>

<h3>PSDTUTS Theme Design</h3>

<p>Website design for leading photoshop

tutorial site and creation and maintenance of Wordpress theme.</p>

<a href="#" class="button">View Project</a>

</div>

</div>

<div class="mini_portfolio_item">

<div class="block_inside">

<img src="images/sample_mini_portfolio.jpg"

class="thumbnail" alt="PSDTUTS" />

<h3>PSDTUTS Theme Design</h3>

<p>Website design for leading photoshop

tutorial site and creation and maintenance of Wordpress theme </p>

<a href="#" class="button">View Project</a>

<h3>PSDTUTS Theme Design</h3>

<p>Website design for leading photoshop

tutorial site and creation and maintenance of Wordpress theme </p>

<a href="#" class="button">View Project</a>

portfolio theme for designers and creatives</h2>

<p>You can use it to quickly turn WordPress into a portfolio website Not familiar with WordPress? Fear not, the theme accompanies a book called <a href="#">How to Be a Rockstar Wordpress Designer

</a> by Rockstar Resources due for release in

2008.</p>

<p>The book teaches you to use WordPress theming

to take advantage of this flexible CMS product to create dynamic sites.</p>

<p>And as if that's not enough, you can see a

photoshop to HTML tutorial on designing the theme over at <a href="http://psdtuts.com">PSDTUTS</a> and <a href="http://nettuts.com">NETTUTS</a>.</p> </div>

.mini_portfolio_item thumbnail { float:left;

margin-right:20px; border:1px solid #979390; }

<h3>AudioJungle Site Design</h3>

<p>Website design for leading photoshop tutorial site

and creation and maintenance of Wordpress theme </p>

<a href="#" class="button">View Project</a>

<div class="footer_column long">

<h3>Designed by Collis Ta'eed, do with this as you please</h3>

<p>You can read a photoshop tutorial for creating the design at <a href="http://

psdtuts.com">PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at

<a href="http://nettuts.com">NETTUTS</a> and you can learn how to turn the HTML into a Wordpress theme in the upcoming book

<ul>

<li><a href="">RSS Feed</a></li>

<li><a href="">What is RSS?</a></li>







<h2>New Blog Design Launched</h2>

<small>on <a href="">april 13</a> in

<a href="">web design</a> tagged

<a href="">blogging</a></small>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa Suspendisse congue, nibh et lacinia sodales </p>

<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit Sed

vitae justo In quis lorem nec justo varius sodales Nullam eleifend accumsan

mi Nunc at velit Maecenas velit </p>

#block_featuredblog text_block { padding-top:5px;

<h2>Working on a New Project</h2>

<small>on <a href="">april 13</a> in

<a href="">web design</a> tagged

<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit Sed vitae justo In quis lorem nec justo varius sodales Nullam eleifend accumsan

mi Nunc at velit Maecenas velit

<a href="#">Read More</a></p>

<div class="separator"></div>

<h2>Design Awards!</h2>

<small>on <a href="">april 13</a> in

<a href="">web design</a> tagged

<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit Sed vitae justo In quis lorem nec justo varius sodales Nullam eleifend accumsan

mi Nunc at velit Maecenas velit

<a href="#">Read More</a></p>

<div class="separator"></div>

<h2>This Site is Almost Complete Finally </h2>

<small>on <a href="">april 13</a> in

<a href="">web design</a> tagged

<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit Sed vitae justo In quis lorem nec justo varius sodales Nullam eleifend accumsan

mi Nunc at velit Maecenas velit

<a href="#">Read More</a></p>

<li><a href="">RSS Feed</a></li>

<li><a href="">Email Updates</a></li>

<li><a href="">Great Sites</a></li>

</ul>

<h3>Archives</h3>

<ul>

<li><a href="">June 2008</a></li>

<li><a href="">May 2008</a></li>

<li><a href="">April 2008</a></li>

<li><a href="">March 2008</a></li>

</ul>

</div>

</div>

<! a Clearing DIV to clear the DIVs because overflow:

auto doesn't work here >

margin-top





<div>

#sidebar h3 {

font-size:20px;

line-height:23px;

}

#sidebar ul { margin:10px 0px 30px 0px; padding:0px; }

#sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }

vitae, massa Suspendisse congue, nibh et lacinia sodales </p>

<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit Sed vitae justo In quis lorem nec justo varius sodales Nullam eleifend accumsan

mi Nunc at velit Maecenas velit <a href="#">Read More</a></p>

<! a Clearing DIV to clear the DIV's because overflow:

auto doesn't work here >

body#dark block, body#dark mini_portfolio_item {

Further Resources on HTML & Photoshop

Finding and Installing Themes

Editing Theme Files through WordPress









How a Theme Works

Add a Little Bit of WordPress PHP

Finding and Understanding Template Tags

some_template.php > page.php > index.php

The File Hierarchy

sidebar.phpfooter.php header.phpcomments.php

Some code to show on single Posts

Setting up the Theme

index.phpstyle.css

Theme Name: Rose

Theme URI: the-theme's-homepage

Theme Name: Creatif Blog

Theme URI: http://rockablepress.com

Description: For the book 'How to Be a Rockstar WordPress Designer!'

Author: Collis Ta'eed & Harley Alexander

Author URI: http://rockablepress.com

Version: 1.0

.

This theme can be used for commercial or non-commercial use

so long as it is not redistributed or resold in any way.

.

*/

index.php

Hello World!

The Page Title

<link rel="stylesheet" href="<?php bloginfo('stylesheet_

url'); ?>" type="text/css" media="screen" />

Leaving Space for Plugins

title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback url'); ?>" />

Dynamic Navigation and



The wp_nav_menu() Function

wp_list_categories() and wp_list_pages()

Display Navigation Menus

'depth' => 1, 'menu_id' => 'menu' ) );

'primary_nav'



<div class="image_block">

<img src="<?php echo

get_post_meta($post->ID, 'large_preview', true); ?>" alt="Featured Post" />

</div>

<?php } ?>

<div class="text_block">

<h2><a href="<?php the_permalink(); ?>"

title="<?php the_title(); ?>"><?php the_title(); ?></a></ h2>

WP_Querythe_tags('') 

<h2><a href="<?php the_permalink(); ?>"

title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <small>on <?php the_time('M d'); ?> in <?php the_

category(', '); ?> tagged <?php the_tags(''); ?> by <?php the_author_posts_link(); ?></small>

<p class="center">Sorry, but you are looking for

something that isn't here.</p>

<?php include (TEMPLATEPATH '/searchform.php'); ?>

<input type="text" value="<?php echo wp_specialchars($s,

1); ?>" name="s" id="s" size="15" />

<input type="submit" id="search_submit" value="Search" />

</p>

</form>

<li id="search" class="widget"><h3>Search</h3>

<li id="subscribe" class="widget"><h3>Subscribe</h3>

#eeeeee



<p><a href="http://feeds.feedburner.com/CreatifBlog"><img src="http://feeds.feedburner.com/~fc/CreatifBlog?bg=7f

7d78&amp;fg=eeeeee&amp;anim=0" height="26" width="88"

style="border:0" alt="" /></a></p>

<li><a href="<?php the_permalink(); ?>"

title="<?php the_title(); ?>"><?php the_title(); ?></a></ li>

<li id="archives" class="widget"><h3>Archives</h3>

<ul><?php wp_get_archives('type=monthly&limit=7'); ?></ul>

url'); ?>">RSS Feed</a></li>

<li><a href="http://feedburner.google com/fb/a/mailverify?uri=psdtuts">Email Updates</a></li>

<li><a href="http://feeds.feedburner com/psdtuts"><img style="border:0" src="http://feeds.

feedburner.com/~fc/psdtuts?bg=a6a2a0&amp;fg=ffffff&amp;anim=0" alt="" width="88" height="26" /></a></li>

?>

<li><a href="<?php the_

permalink(); ?>" title="<?php the_title(); ?>"><?php the_ title(); ?></a></li>

<div class="footer_column long">

<h3>About Rockable Press</h3>

<div id="block_featuredblog">



<?php if(is_home()){ include(TEMPLATEPATH.'/featuredpost php'); } ?>

<h2><a href="<?php the_permalink();

?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <small>on <?php the_time('M d'); ?>

in <?php the_category(', '); ?> tagged <?php the_tags('');

<h2>This Post is Password Protected!</h2>

<p>Please enter the password to view Comments.</p>

<?php return;

} }

?>

comments.phpsingle.php



<?php foreach ($comments as $comment) : ?>

<li class="<?php echo $altcomment; ?>"

id="comment-<?php comment_ID(); ?>">

<h4><?php comment_author_link();

?></h4>

<small><a href="#comment-<?php comment_ID(); ?>">

<?php comment_date('M jS, Y'); ?>

echo get_avatar(get_

comment_author_email(),'40');

profile.php"><?php echo $user_identity; ?></a>.

<a href="<?php echo wp_logout_url(); ?>" title="Log out of this account">Logout</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author"

value="<?php echo $comment_author; ?>" size="50" />

<label for="author"><small>Name <?php if ($req) echo

"(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="50" />

<label for="email"><small>Mail (will not be published)

<?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo

<p><input name="submit" type="submit" id="submit"

tabindex="5" value="Submit Comment" />

<input type="hidden" name="comment_post_ID" value="<?php