Embedding Serendipity in your website

I have decided to use the Serendipity blog as it seemed for me more easy to embed it in my current website then WordPress. Below you can see a short instuction to embed Serendipity in your website.


I consider that you have installed Serendipity in a directory named blog on your web server.

In Serendipity Administration Suite

First you have to go in your Serendipity Administration Suite to change the following parameter.

  • Configuration->Path->Index file to blog.php
  • Configuration->Appearance and Options->Is serendipity embedded? to YES
  • Configuration->Appearance and Options->Use gzip compressed pages to NO

The wrapper file
You have to create a wrapper file to embed Serendipity in your website. Create a file named blog.php with the content below and place it in your Serendipity blog directory.
<?php

ob_start();
require(“index.php”);
$serendipity_contents = ob_get_contents();
ob_end_clean();
require(“../blog.php”); // The Container-File
?>

The container file
The container file is the file where you want to embed your Serendipity blog. Copy the following code on the position where you would like to see the blog embedded in your container file.
<?php

echo $serendipity_contents;
?>

To use the style-sheet from the current selected Style and RSS you must also include in the header of your container file the lines.

<link rel=”stylesheet” type=”text/css” href=”http://www.celmaro.com/blog/blog.php?/serendipity.css” />
<link rel=”alternate” type=”application/rss+xml” title=” RSS feed” href=”http://www.celmaro.com/blog/blog.php?/feeds/index.rss2″ />
<link rel=”alternate” type=”application/x.atom+xml” title=” Atom feed” href=”http://www.celmaro.com/blog/blog.php?/feeds/atom.xml”/>

To eliminate the header of the style it is also a good idea to go in the template directory of the style and remove or rename the #serendipity_banner class in the style.css file before you select the style in the Serendipity Administration Suite under Manage Styles.
If you are using iWeb to create the container website you must also remove the first lines from your container website.

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

In this example we have named our container website blog.php and have placed it in the parent directory of the Serendipity blog folder.
Don’t forget to modify your links with ../ as the file will be executed in the blog folder.

Directory and file overview
your-site/ :: your website directory
your-site/blog.php ::the container site
your-site/blog/ ::the folder containing the Serendipity blog
your-site/blog/blog.php ::the wrapper php file which access the blog.php (container file) in the parent directory.
your-site/blog/templates/???/style.css ::the file where you have to remove or rename the #serendipity_banner class to eliminate the header

UPDATE: We have stopped to use Serendipity since we have redesigned our website and have writen our own WordPress template which makes administration on the Mac way better.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>