WRITE YOUR OWN BLOG ENGINE $replace = array(”",”

“, “
“); $text = str_replace($search, $replace, $text); return $text; } ?> The user-defined format function makes use of the PHP str_replace search and replace function to replace line breaks in your posts with
tags, and two line breaks in a row with paragraph tags. Because this function will be useful throughout your blog, save it to your blog root directory in a file called functions.php. Stepping through the script: function format($text) { The format function accepts an argument called $text, which will be the unformatted post pulled from the database: $text = “

” . $text . “

“; $text = stripslashes($text); First, the whole post text is wrapped inside paragraph tags and then any slashes are removed: $search = array(”\r”, “\n\n”, “\n”); $replace = array(”",”

“, “
“); $search is an array (think of it as a list) of the text we need to replace in the post. $replace is the corresponding array of text that will take its place. The first substitution performed is to strip out all carriage return characters, as line breaks on Windows machines are represented by two characters: a carriage return (\r) followed by a new line character (\n). Then double-line breaks are replaced with a closing and opening paragraph tag to create a new paragraph. The final substitution is to replace any remaining line breaks with
tags. $text = str_replace($search, $replace, $text); return $text; Finally, the search and replace arrays are passed along with the text to the str_replace function to perform the actual substitution and the resulting text is returned to wherever the function was called. Now call the functions.php include in your blog homepage by adding include (”functions.php”); to the PHP script just after the opening

BLOG DESIGN SOLUTIONS } while ($myposts = mysql_fetch_array($result)); } else { echo “

I haven’t posted to my blog yet.

“; } ?> This code steps through the MySQL array as in the CMS blog list page, but this time I m using different HTML to present the post details. The post itself is unformatted so you can (indeed, you should) add all the HTML you require (paragraphs, links, emphasis, and so on) when you enter the post in the CMS. Later on, I will show you how you can automate some of that process so paragraph tags are automatically generated. Next to insert is code that will enable the posts summary in the sidebar. Replace the comment with this code: \n”; do { $post_id = $myposts[”post_id”]; $title = $myposts[”title”]; echo “

\n”; } while ($myposts = mysql_fetch_array($result)); echo “

“; } ?> As you might expect, this code is almost the same, but there is one crucial addition: mysql_data_seek($result, 0); $myposts = mysql_fetch_array($result); These initial two lines reset the internal row pointer of the MySQL result to the beginning (row 0), so the do-while loop can start at the first post again. This saves the server from unnecessarily querying the database a second time. Automatically formatting posts As I said earlier, you will need to add the required HTML to all your blog posts so they are formatted with paragraphs, links, and so on. I m sure you d agree that it would be much easier if line breaks and paragraph tags were automatically added to your posts, so now I ll show you a quick function to will do just that: ” . $text . “

“; $search = array(”\r”, “\n\n”, “\n”);

WRITE YOUR OWN BLOG ENGINE The stylesheet and all the accompanying background images are available for download from the book website at www.friendsofed.com/. I won t explain the stylesheet in this chapter because the previous chapters cover many of the techniques involved. The images should be saved to a new directory called images in your blog directory. All the screen- shots from now assume that you have the stylesheet and images in place in your blog directory, so if you are online I suggest you download them now. Pulling in the posts You have already been introduced to all the code required to show your recent posts on one page. This was covered when you created the index page for your CMS, so I won t explain much here; instead, you can just insert it straight into your blog homepage: add this code before the DOCTYPE in the index.php file you just created: As before, this code starts by opening a connection to the database. Then this SELECT statement is used to query the database: SELECT post_id, title, post, DATE_FORMAT(postdate, ‘%e %b %Y . at %H:%i’) AS dateattime FROM posts . ORDER BY postdate DESC LIMIT 5 It is almost the same as before; the only addition is to select the post field and the LIMIT 5 so that only the five most recent blogs are pulled from the database. Now you need to display the posts in your page. Replace the comment with this code:

. $title

\n”; echo “

Posted on $dateattime

\n”; echo “

“; 305

BLOG DESIGN SOLUTIONS #maincontent { background: #f4f8e4 repeat-y fixed url(/images/content_bg.jpg) center 98px; color: #000; } #about H3 { background: no-repeat url(/images/h_about.gif); width: 141px; height: 19px; } #search { background: no-repeat url(/images/h_search.gif); width: 57px; height: 16px; } #recent H3 { background: no-repeat url(/images/h_recent.gif); width: 135px; height: 20px; } #viewarchive { background: no-repeat url(/images/h_viewarchive.gif); width: 128px; height: 15px; } #addcomment H3 { background: no-repeat url(/images/h_addcomment.gif); width: 122px; height: 16px; } /* Forms */ INPUT, TEXTAREA { border-width: 1px; } INPUT[type=text], TEXTAREA { width: 158px; } INPUT, TEXTAREA { font-size:1em; }

WRITE YOUR OWN BLOG ENGINE #sidebar H3 { margin:1.3636em 0 0.682em 10px; text-indent: -1000em; overflow: hidden; } #sidebar #viewarchive { text-indent: 0; } #viewarchive A { display:block; text-indent: -1000em; } #footer { text-indent: 61px; font-size: 1.1em; } /* Backgrounds and colours */ BODY { background: #583C1D repeat fixed url(/images/map_bg.jpg) center; color: #f4f8e4; } A { color:#6E4720; } H2 A { color: #000; } .post { background: no-repeat left 3px url(/images/ornament.gif); } #header { background: #340301 no-repeat url(/images/header.jpg); color: #fff; } #footer { background: no-repeat url(/images/footer.jpg); } 303

BLOG DESIGN SOLUTIONS .post, DL, #posts UL, #comments P, #results P { font-size: 1.2em; line-height:1.5em; } #comments DD P { font-size: 1em; padding-left: 0; } DD { margin-left: 0; } #posts H2, #posts H3, #posts H4, #posts H4, .post, DL, #posts UL, #comments P, #results P { padding-left: 61px; } .post P { margin-top:0; } HTML>BODY .post P { margin-bottom: 0; } .post P+P { text-indent: 1.5em; } .post { padding-bottom:1em; } #sidebar { font-size: 1.1em; line-height: 1.3636em; } #sidebar P, #sidebar UL { margin-left: 16px; padding-left: 0; } #sidebar LI { list-style: disc url(/images/ornament_bt.gif); margin-left: 16px; margin-bottom: 0.682em; }

} H1 A { display: block; width: 385px; height: 140px; text-indent: -1000em; margin: 0; } /* Typography */ BODY { font-family: Georgia, Palatino, serif; font-size: 62.5%; } HTML>BODY { font-size: 10px; } H1, H2, H3 { margin: 0; } H2 { font-size: 1.7em; font-weight:normal; line-height:1em; padding-top: 1em; } H2 A { text-decoration:none; } #posts H3 { font-weight:normal; line-height:1em; font-size: 1.4em; margin-top: 1em; } H4 { font-weight:normal; font-style:italic; line-height:1em; font-size: 1.2em; } WRITE YOUR OWN BLOG ENGINE 301

BLOG DESIGN SOLUTIONS