/* Block-Content-Styles */ #block_content { } #content_area { width:665px; float:left; } #sidebar { float:left;
108
Meet Creatif width:281px; position:relative; left:-1px; margin-top:15px; background-color:#e2dddc; border:1px solid #a3a09e;
} #sidebar .block_inside { background:none; background-color:#e2dddc; }
#content_area #sidebar position:relative
.block_inside #sidebar
109
Meet Creatif
Working on a New Project <small>on
april 13 in
web design tagged
blogging Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.
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. Read More
Design Awards! <small>on
april 13 in
web design tagged
blogging Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.
Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan
110
Meet Creatif
mi. Nunc at velit. Maecenas velit. Read More
This Site is Almost Complete Finally... <small>on
april 13 in
web design tagged
blogging Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.
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. Read More
overflow: auto
margin-top
112
Meet Creatif
#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; } #sidebar ul li a { color:#7f7d78; } #sidebar ul li a:hover { color:#0172dd; text-decoration none; } #content_area h2 { font-size:32px; line-height:31px; } #content_area .separator { border-top:1px solid #e3e3e3; margin-top:40px; padding-top:40px; }
#block_content
113
Meet Creatif
#block_content Services Branding Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum
114
Meet Creatif vitae, massa. Suspendisse congue, nibh et lacinia sodales.
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. Read More
115
Meet Creatif
h4 { color:#007de2; margin:0px 0px 0px 0px; }
116
Meet Creatif
body#dark body#dark { background-color:#1e1d1b; } body#dark #main { background:#292826 url(images/background_dark_slice. jpg) repeat-x; } body#dark #main .container { background-image:url(images/background_dark.jpg); } body#dark #footer { background-image:url(images/background_dark_footer. jpg); } body#dark ul#menu li a.active, ul#menu li a:hover { color:#ffffff; }
117
Meet Creatif
#main#main .container#footer
118
Meet Creatif
body#dark .block, body#dark .mini_portfolio_item { border-color:#1b1a19; } body#dark #text_column h2#text_title { background-image:url(images/creatif_dark.jpg); }
119
Meet Creatif
Further Resources on HTML & Photoshop
Introduction to Themes
122
Introduction to Themes
Finding and Installing Themes wp-content
123
Introduction to Themes
124
Introduction to Themes
Editing Theme Files through WordPress
125
Introduction to Themes
How a Theme Works
header.phpindex.php sidebar.php footer.php
index. php
sidebar.php
126
Introduction to Themes
How to Make a Theme in 60 Seconds style.css
index.php
Test Theme
127
Introduction to Themes
Add a Little Bit of WordPress PHP index.php
That’s How Themes Work bloginfo('name')
128
Introduction to Themes
Template Tags functionname(parameter 1, parameter 2, ...);
wp_list_ categories()
129
Introduction to Themes
wp_list_categories 'show_option_all' => '', 'orderby' => 'name', 'order' => 'ASC', 'show_last_update' => 0, 'style' => 'list', 'show_count' => 0, 'hide_empty' => 1, 'use_desc_for_title' => 1, 'child_of' => 0, 'feed' => '', 'feed_image' => '', 'exclude' => '', 'hierarchical' => true, 'title_li' => __('Categories'), 'echo' => 1, 'depth' => 0
wp_list_categories
wp_list_categories "&"
130
Introduction to Themes
Finding and Understanding Template Tags
The Loop for ( $counter = 1; $counter <= 10; $counter += 1) { echo $counter; }
{ } $counter $counter $counter = 1; while ( $counter <= 10 ) { $counter += 1; }
131
Introduction to Themes
have_posts() the_post() the_title() the_content()
A More Common Version of The Loop
132
Introduction to Themes
... HTML CODE ...
endwhile ... HTML CODE ...
endwhile{} Sorry, no posts matched your criteria.
133
Introduction to Themes
Files and What They Do index.phpstyle.css
index.php
single.php single.php
index.php single.php > index.php
134
Introduction to Themes
some_template.php page.php index.php
some_template.php > page.php > index.php
The File Hierarchy date.php > archive.php > index.php
category-id.php > category.php > archive.php > index.php
tag-slug.php > tag.php > archive.php > index.php
author.php > archive.php > index.php
135
Introduction to Themes
home.php > index.php
single.php > index.php
some_template.php > page.php > index.php
search.php > index.php
404.php > index.php
Including Files
TEMPLATEPATH
136
Introduction to Themes sidebar.phpfooter.php
header.phpcomments.php
Conditional Tags
index.php
index.php True
137
Introduction to Themes ... Some code to show on single Posts
... Some code to show on other pages
is_home()
is_page()
is_single()
is_category()
is_author()
The WordPress Default Theme – Kubrick
138
Introduction to Themes
wp-content/themes/default index.php header.phpsidebar.php
footer.php
139
Building a Basic Theme: Creatif Blog
Using Kubrick as a Base
Further Resources on Theming Basics
Building a Basic Theme: Creatif Blog
142
Building a Basic Theme: Creatif Blog
Setting up WordPress large_previewvalue
143
Building a Basic Theme: Creatif Blog
Setting up the Theme index.phpstyle.css
index.php style.css style.css /* Theme Name: Rose Theme URI: the-theme's-homepage Description: a-brief-description Author: your-name Author URI: your-URI Template: use-this-to-define-a-parent-theme--optional Version: a-number--optional . General comments/License Statement if any. . */
144
Building a Basic Theme: Creatif Blog
style.css
/* 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!
145
Building a Basic Theme: Creatif Blog
index. phpstyle.css
Absolute URLs
146
Building a Basic Theme: Creatif Blog index.php
/images/sample.jpg
http://example.com/wp-content/themes/theme_name/images/ sample.jpg
theme_nametheme_name2 bloginfo 'url'
/wp-content/themes/theme_name/ images/sample.jpg
template_directory
147
Building a Basic Theme: Creatif Blog
http://example.com/wp-content/themes/theme_name
Bringing your HTML into WordPress
148
Building a Basic Theme: Creatif Blog
blog.html index.php style.css style.css blog.html
Updating for WordPress
149
Building a Basic Theme: Creatif Blog
index.php <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Creatif
Page Information Doctype
<meta http-equiv="Content-Type" content="; charset=" /> <meta name="generator" content="WordPress " />
bloginfo html_typecharsetversion
150
Building a Basic Theme: Creatif Blog
The Page Title
bloginfo wp_title
Stylesheets and RSS bloginfo
151
Building a Basic Theme: Creatif Blog
bloginfo
Trackbacks
Favicon Image
152
Building a Basic Theme: Creatif Blog
Leaving Space for Plugins
wp_head
The Code <meta http-equiv="Content-Type" content="; charset=" /> <meta name="generator" content="WordPress " />
153
Building a Basic Theme: Creatif Blog
title="RSS 2.0" href="" />
Image URLs
src="images"
src="/images/
blog.html wp-content/themes
154
Building a Basic Theme: Creatif Blog
Dynamic Navigation and Adding Pages
Adding a Breadcrumb Trail
BLOG
Home > Blog > Titlewp_ title
/?cat=1
273
Building an Advanced Theme: Creatif Portfolio
PORTFOLIOHome > Portfolio > Title Home > Title
Adding Links to the Menu header.php
Tying Loose Ends "posts" "items"
274
Building an Advanced Theme: Creatif Portfolio author.phpcategory.php
completearchives.php
Wrap Up of Creatif Portfolio
Building a Site Theme: Creatif Site
277
Building a Site Theme: Creatif Site
Making a Plan
Custom Homepage WP_Query
278
Building a Site Theme: Creatif Site
Pages and Sub-Pages
The News Section index.php
Setting up WordPress
279
Building a Site Theme: Creatif Site
Create a Set of Pages header_image header_text
280
Building a Site Theme: Creatif Site
Setup the Homepage and Listing Page
281
Building a Site Theme: Creatif Site
index.php
Create Some News Categories and Posts
Install The New Theme style.css
Add Theme Options using Theme Toolkit
282
Building a Site Theme: Creatif Site functions.phpthemetoolkit.php functions.php functions. php
'main_title' => 'Main Title ## The title of the main area on the homepage.', 'main_image' => 'Main Image ## URL of the image on the homepage, should be 400px wide x 250px high.', 'main_text' => 'Main Text ## The main text to go on the homepage.',
'feature_1_title' => 'Featured Area 1 - Title ## The title of this featured area on the homepage', 'feature_1_image' => 'Featured Area 1 - Image ## URL of the image for this featured area on the homepage, should be 100px wide x 100px high.', 'feature_1_text' => 'Featured Area 1 - Text ## The text for this featured area on the homepage.',
'feature_2_title' => 'Featured Area 2 - Title ## The title of this featured area on the homepage', 'feature_2_image' => 'Featured Area 2 - Image ## URL of the image for this featured area on the homepage, should be 100px wide x 100px high.', 'feature_2_text' => 'Featured Area 2 - Text ## The text for this featured area on the homepage.',
'feature_3_title' => 'Featured Area 3 - Title ## The title of this featured area on the homepage', 'feature_3_image' => 'Featured Area 3 - Image ## URL of the image for this featured area on the homepage, should be 100px wide x 100px high.',
283
Building a Site Theme: Creatif Site
'feature_3_text' => 'Featured Area 3 - Text ## The text for this featured area on the homepage.'
Add Values to the Theme Options functions.php themetoolkit.php style='width:600px'
284
Building a Site Theme: Creatif Site
Setting up the Menu header.php
285
Building a Site Theme: Creatif Site
depth=1wp_list_pages()
Create a Home Template index.php site_home. php
Site_Home
home.php index.phpsidebar.php home.php
Site_Home site_home.php index.php
286
Building a Site Theme: Creatif Site
Showing Submenus and Page Titles
Sidebar Submenus post_parent post_parent != 0) { $parent = $post->post_parent; } else { $parent = $post->ID; } $parent_title = get_the_title($parent); $parent_link = get_permalink($parent); ?>
$post->post_parent
0 $parent get_the_titleget_permalink
287
Building a Site Theme: Creatif Site
child_of
' . $parent_title . '');
?>
sidebar.php sidebar.php
Page Titles page.php
289
Building a Site Theme: Creatif Site
post_parent != 0) {
$parent = $post->post_parent; $parent_title = get_the_title($parent); $parent_link = get_permalink($parent);
echo ('
'); ?>
" title="">
... Code for top level menu item
else
get_post_meta($post->ID, 'header_
image', true); $header_text =
get_post_meta($post->ID, 'header_text',
true); if ($header_image && $header_text) { ?>
header_image header_text header_image style.css
291
Building a Site Theme: Creatif Site
#content_area .header_image { background-repeat:no-repeat; padding:90px 200px 50px 40px; color:#9dc5e9; }
page.php
Creating the News Section index.php
Updating Index.php
ID != $featured_ID) { ?>
292
Building a Site Theme: Creatif Site
tagged by
get_sidebar()
Adding a Blog Sidebar sidebar.php sidebar-blog.phpget_ sidebar()
single.php single.php get_sidebar()get_sidebar('blog')
The Homepage
site_home.php
295
Building a Site Theme: Creatif Site featuredpost.php get_sidebar()get_ sidebar('home') sidebar-home.php
option['main_image'] ?>
main_image functions.php
296
Building a Site Theme: Creatif Site
option['main_title'] ?> option['main_ text'] ?> option['feature_1_title'] ?> option['feature_1_text'] ?>
option['feature_2_title'] ?> option['feature_2_text'] ?>
option['feature_3_title'] ?> option['feature_3_text'] ?>
The Home Sidebar WP_Query() sidebar-home.php
Latest News
query('showposts=3'); while($recent -> have_posts()) : $recent -> the_ post(); ?>
" title="">
298
Building a Site Theme: Creatif Site
WP_Query #text_title
Wrap up of Creatif Site
Theme Options
Plugins for CMS Use
299
Building a Site Theme: Creatif Site
Innovative Ways to Use WordPress
302
Innovative Ways to Use WordPress
1. WordPress as a Membership Directory
2. WordPress as an E-Commerce Store
303
Innovative Ways to Use WordPress
Use a Plugin:
Use a Theme:
Use a Third Party Service:
3. WordPress as a Premium Membership Site
304
Innovative Ways to Use WordPress
Use a Plugin
Use a Third Party Membership System
4. WordPress as a Social Media Feed Aggregator
305
Innovative Ways to Use WordPress
5. WordPress as a Musician/Band Website
306
Innovative Ways to Use WordPress
6. WordPress as a Design Gallery
7. WordPress as a Podcasting Site
307
Innovative Ways to Use WordPress
8. WordPress as a Review Site
9. WordPress as a Social Network Using WPMU
308
Innovative Ways to Use WordPress
Using Plain Ol’ WordPress
309
Innovative Ways to Use WordPress
10. WordPress as a Job Board
11. WordPress as a Community News Site
Community Posting
310
Innovative Ways to Use WordPress
Community Links
12. WordPress as a Video Portal
311
Innovative Ways to Use WordPress
13. WordPress as a Mobile Site
14. WordPress as a Freebie Aggregator
312
Innovative Ways to Use WordPress
15. WordPress as a Twitter Clone
16. WordPress as a Magazine or News Site WP_Query WP_Query
313
Innovative Ways to Use WordPress
Even More Ideas on Theming WordPress
Afterword
Collis Ta’eed & Harley Alexander
218
Tools for Advanced Theming