I wanted to give an update (so soon?) on my progress on making the wordpress front end without wordpress. This is my third part day (because I work all day on other things) working on it, and today I decided to add a nice look to the main page. I've asked a few people and the general consensus is that my design skills are lacking. You can view what's been done so far here: http://core.ioreader.com/wwwroot/. Now, for the good stuff. Here are what a few of the current templates look like that make that page:
home.html
Caveat: there are a lot of divs there to accomplish those nice rounded corners + shadows that I wanted.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{$blog_name}</title>
<link rel="stylesheet" type="text/css" media="screen" href="{/}css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="{/}css/style.css" />
</head>
<body>
<div id="header">
<v:component id="menu" />
<h1><a href="{/}" title="{$blog_name}">{$blog_name}</a></h1>
<h2>{$blog_description}</h2>
</div>
<div class="t"><div><div></div></div></div>
<div id="content">
<div class="dialog">
<div id="main_content">
<div id="content_left">
<v:import id="main" />
</div>
<div id="content_right">
<v:component id="calendar" />
<v:component id="categories" />
<v:component id="archive" />
<v:component id="blogroll" />
</div>
<br style="clear:both;" />
</div>
</div>
</div>
</body>
</html>
posts.html
This is the template that displays all of the posts on the main page.
<v:defaut list="posts">
<div class="message">
There appear to be no posts yet!
</div>
</v:default>
<v:repeat list="posts" as="post">
<h2><a href="{$post.permalink}" title="" id="post{$post.id}" name="post{$post.id}">{$post.post_title}</a></h2>
<div class="post">
{$post.preview_content}
<ul class="categories">
<v:repeat list="post.categories" as="category">
<li><a href="{/$category.nice_name/}" title="{$category.name}">{$category.name}</a></li>
</v:repeat>
by {$post.author_name}
on {$post.date}
</ul>
</div>
</v:repeat>
components/calendar.html
This displays that fancy calendar that shows which days have posts in them.
<dl id="calendar">
<dt>Calendar</dt>
<dd>
<table width="100%" class="cal_month" cellpadding="0" cellspacing="1">
<thead>
<th colspan="7">
<a href="{/$cal_year/$cal_month/}" title="Archives for {$cal_month_name}, {$cal_year}">{$cal_month_name}</a>
<a href="{/$cal_year/}" title="Archives for {$cal_year}">{$cal_year}</a>
</th>
</thead>
<thead>
<v:repeat list="cal_day_titles" as="day">
<th>{$day}</th>
</v:repeat>
</thead>
<tbody>
<v:repeat list="cal_weeks" as="week">
<tr class="cal_week">
<v:repeat list="week.days" as="day">
<td class="<v:if var="day.month" eqvar="cal_month">cal_day<v:else />cal_day_off</v:if>">
<v:if var="day.link" eq="1"><a href="{/$day.year/$day.month/$day.day/}" title="View archives for this day">{$day.day}</a><v:else />{$day.day}</v:if>
</td>
</v:repeat>
</tr>
</v:repeat>
</tbody>
</table>
</dd>
</dl>
SQL Queries
Okay, you get the point. Now, if you're a big wordpress person and are wondering what the SQL queries I am doing to accomplish all of this are, here all of them are:
--- Get all menu items
SELECT p.post_name, p.post_title FROM wp_posts p WHERE p.post_status='publish' AND p.post_type='page' ORDER BY p.menu_order ASC
--- Get only the options needed
SELECT * FROM wp_options WHERE option_name IN('posts_per_page','blogname','blogdescription')
--- Get the front page posts
SELECT p.*, u.display_name AS author_name, u.ID as author_id, GROUP_CONCAT(ptc.category_id SEPARATOR ',') AS category_ids FROM wp_posts p, wp_users u, wp_post2cat ptc WHERE p.post_author=u.ID AND p.post_status='publish' AND p.post_type='post' AND ptc.post_id=p.ID GROUP BY p.ID ORDER BY p.ID DESC LIMIT 0, 10
--- Get posts to place into the calendar
SELECT DAY(post_date) AS day FROM wp_posts WHERE MONTH(post_date) = 7 AND YEAR(post_date) = 2007 GROUP BY DAY(post_date)
--- Get all top-level categories
SELECT * FROM wp_categories WHERE category_parent = 0 AND category_nicename <> 'blogroll'
--- Get all sub-level categories
SELECT * FROM wp_categories WHERE category_parent > 0
--- Get Blogroll links
SELECT * FROM wp_links WHERE link_visible='Y' ORDER BY link_name ASC
--- Get the archives
SELECT MONTH(post_date) as month_num, YEAR(post_date) AS year, COUNT(ID) AS num_posts FROM wp_posts WHERE post_status = 'publish' GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY YEAR(post_date) DESC, MONTH(post_date) DESC
I think that's a good sum up of my progress thus far.
- Uncategorized by Peter Goodman on Jul 7, 2007 @ 12:16am
