The basics

The integration aimed at keeping the “look-and-feel” of the blog as consistent with RapidWeavers own blog-style as possible. But due to how the “inner” nature of Wordpress is designed some things are not possible to do. The “workaround” in those cases are to add some manual CSS styling. This blog page is also fully supporting translations so you can use this in your own language without any modifications.

Note: The “comment” form may not translate correctly because the comment form is generated by Wordpress. To fix that you need to install and activate a “translated” Wordpress theme for your language in your Wordpress blog.

If you want to know more about what you can do with Wordpress I suggest that you visit at least the following pages:

http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/The_Loop_in_Action
http://codex.wordpress.org/Template_Tags

They contain lots of information about what you can do with your Wordpress blog if you feel comfortable playing with PHP.

The tutorial is based around the following site structure for your Wordpress blog. The actual paths will depend on where you have installed Wordpress.

youradress.com
        |
        |---/wordpress          <-- This is your Wordpress installation
        |
        |---/blog
              |---/index.php    <-- This is our page

It is also based upon my usage of Wordpress so there may be “glitches” in this but if you find any feel free to inform me and I can update this tutorial. The images below are from RapidWeaver 3.5 but I think you can map them to 3.6 without problems.

How-to

1: Add the new blog page to your RapidWeaver site
The new blog page will be created by a new HTML-page type to your site in RapidWeaver.

You can place the page anywhere you want on your site. But this tutorial makes the simplified assumption that the structure will look like I described above. And since we are using PHP the page extension needs to be “.php” instead of “.html”. All these changes are done in the “Page Inspector”.

2: Add code to the “Page Prefix”
The following code needs to be added to “Page Inspector”->”Code”->”Page Prefix”

<?php
  define('WP_USE_THEMES', false);
  require('../wordpress/wp-blog-header.php');
  if (is_feed())
    exit();
?>

Note: Make sure that you don't have any blank spaces or other characters before this code in the "Prefix" textfield. Your RSS feed will not work properly if there is content before this code.

This code allows us to access Wordpress functions in our new page which we will use to “personalize” the Wordpress blog.

3: Add code to the “Content”
The following code should be added to the main “content” part of the HTML page. This is the part that will be generating the HTML for the blog entries. It has been written to “mimic” RapidWeaver blogstyle as much as possible.

<?php if (have_posts()) : ?>
<?php   while (have_posts()) : the_post(); ?>

          <div id="unique-entry-id-<?php the_ID(); ?>" class="blog-entry">
            <div class="blog-entry-title"><?php the_title(); ?></div>
            <div class="blog-entry-date"><?php the_time('Y-m-d G:i'); ?>&nbsp;|
              <span class="blog-entry-category"><?php the_category(', '); ?></span>&nbsp;|
              <span class="blog-entry-permalink"><a href="<?php the_permalink(); ?>">Permalink</a></span>&nbsp;|
            </div>
            <div class="blog-entry-body"><?php the_content(); ?></div>
            <div class="blog-entry-comments">
              <?php edit_post_link(__('Edit This')); ?> |&nbsp;
              <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)'), "", __('Sorry, comments are closed for this item.')); ?>
            </div>
          </div>
          <?php comments_template(); ?>
<?php   endwhile; ?>
<?php else : ?>
  <h2><?php _e('Not Found'); ?></h2>
  <p><?php _e('Sorry, but no posts matched your criteria.'); ?></p>
  <form method="get" class="searchform" action="<?php bloginfo('home'); ?>/">
    <div>
      <input type="text" size="20" value="<?php echo wp_specialchars($s, 1); ?>" name="s" class="s" />
      <input type="submit" class="submit" value="<?php _e('Search'); ?>" />
    </div>
  </form>
<?php endif; ?>

<div style="text-align:center;">
  <?php posts_nav_link(' &#8212; ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?>
</div>

If you want make changes to this code, e.g. the blog date, you can lookup the function on the Wordpress site. The Wordpress wiki is a great resource.

4: Add code to the “Sidebar”
The following code should be added to the sidebar of the HTML-page, “Page Inspector”->”Sidebar”. This code will add “Categories”, “Archives” and RSS-feed to your blog-page.

<div id="blog-categories">
  <ul>
    <?php
    list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE, TRUE, TRUE, TRUE, FALSE, FALSE, '', FALSE, '', '', '', TRUE);
    ?>
  </ul>
</div>
<br />
<div id="blog-archives">
  <ul>
    <?php get_archives('monthly', '', 'html', '', '','TRUE'); ?>
  </ul>
</div>
<br />
<div id="rss-links">
  <a href="<?php bloginfo('url'); ?>/?feed=rss2">RSS feed</a>
</div>

Again, you can check the Wordpress site to see how you can change what is generated.

5: Add some “Custom CSS”
The following custom CSS needs to be added to the sidebar, “Page Inspector”->”Code”->”Custom CSS”. This is needed because of how Wordpress generates it’s HTML. It is not exactly like the HTML that RapidWeavers blogpage generates so that is why we need to add some custom CSS. Otherwise the integrated Wordpress blog would not look like we would expect.

Note: I have not added anything than the bare minimum into these CSS tags because the content depends on the theme you are using how you want to style them. But the name of the CSS-items are the same so just open the CSS for your theme and look for the items below.

#blog-categories ul {
padding: 0;
margin: 0;
}

#blog-categories li {
list-style-type: none;
}

#blog-archives ul {
padding: 0;
margin: 0;
}

#blog-archives li {
list-style-type: none;
}

#rss-links a {
}

#rss-links a:hover {
}

#comment {
width: 460px;
}

input.submit, input[type=submit] {
}

input, textarea, select {
}


6: Add code in Header
If you are running RapidWeaver 3.6 and have a 3.6 compatible theme you can add this line of code to the "Header" section in the page inspector. This will make the navigation menu work properly even if you are using "pretty permalinks".

<base href="http://youradress.com/blog/" />

If you are not having your blogpage in the root-directory "blog" you need to change the word "blog" to match the path to your blogpage.

7: Change page output
Since RapidWeaver will “destroy” embedded PHP code if you are using “Tidied” or “Optimized” output we need to change this setting to “Default”. That way RapidWeaver will leave all our PHP code alone

8: Change the setting for "Common File Links Are"
If you want to use "pretty" permalinks in Wordpress you will also need to change how RapidWeaver is creating the file links, i.e. for the CSS files etc. so that they are relative to the base url.

9: Publish your site
Now you can try publishing this page and we are only one step away from seeing the final result.

10: Change the Blog URI in Wordpress
As the final step we need to change the blog URI in Wordpress so that it knows that the blog page is not located in the Wordpress installation directory. That is done by logging in to your Wordpress blog and going to the "Settings" page. Then change the setting that is highlighted to match where you published your blogpage in RapidWeaver.

11: Preview your "new" blog
That's it! You can now check the result.

12: But what about…
So now you have your Wordpress blog integrated in RapidWeaver :-) But what happens if I make changes to my site in RapidWeaver? Look at the FAQ.

Frequently asked questions

Q: What version of Wordpress are supported?
A: It has been tested with version 2.0-2.2. But it should work with Wordpress version >= 1.5

Q: Will the Wordpress blog-page break if I add/remove pages in RapidWeaver?
A: Short answer is, it depends on your setting for permalinks in Wordpress and if you are using RapidWeaver less than version 3.6. For RapidWeaver 3.6 you have the necessary "fix" in step 6. If you are using all default settings in Wordpress you should be “safe”. So if your permalinks in Wordpress looks like this, http://mydomain.com/blog/?p=123 then you are “safe”. You can edit and change things in RapidWeaver without thinking about what will happen to your blog-page. But if you are using any of the other settings for permalinks in Wordpress that generates “pretty” permalinks like, http://yourdomain.com/blog/2006/12/03/sample-post/ you will need to manually fix the menu links in the blog-page we created everytime this page is uploaded.
If you also want an RSS link that is detected by the browser you will need to manually fix that link everytime this page is uploaded again.

Q: So what do I need to manually fix in that case?
A: You need to change all links in the menu that RapidWeaver has generated in the page we created for integrating Wordpress, and only in that page. You can either fix that after you have published your site or you can export the site locally, fix the menu and upload the site with a third-party FTP program. When you open your RapidWeaver-Wordpress page, locate the following div:

NOTE: This fix is not needed for RapidWeaver 3.6!

<div id="navcontainer">
<!– Start Navigation –>
...
</div>


You will notice that all links inside that div are relative, like this:

../index.html
index.php
../contact/contact.php


You will need to change all these links to absolute links, like this:

http://yourdomain.com/index.html
http://yourdomain.com/index.php
http://yourdomain.com/contact/contact.php


If you do not do this your menu will be broken in the blog if your visitors has clicked on a permalink, category or archive in your blog. The menu will point to pages like,
http://yourdomain.com/blog/2006/12/03/sample-post/contact/contact.php
which obviously doesn’t exist.

If you also want the broswer to detect you RSS feed automatically you need to manually add this line inside the HEAD tags:

<link rel="alternate"
        type="application/rss+xml"
        title="title_of_your_blog"
        href="<?php bloginfo('url'); ?>/?feed=rss2" />

Q: But why does that happen?
A: Like I wrote in the previous answer. RapidWeaver generates only relative links for your sites menu entries. That means that the browser generates the link based on the page it currently is displaying. There is currently (in version 3.5.1) no setting in RapidWeaver to generate absolute links so there is no way to fix this in RapidWeaver. If you feel that it is an urgent problem then you should ping Realmac Software to add such a feature to RapidWeaver.

Q: How do I access the Wordpress configuration and editing pages?
A: They are still where they have always been:
http://yourdomain.com/wp-installation/wp-admin/
Or you can add the following code snippet to your new blogpage to get a “Login” link to your blog:

<?php wp_loginout(); ?>

Q: I'm getting the following error when i'm trying to view the page:
Fatal error: Call to undefined function: .........
A: Make sure that you have the correct path to 'wp-blog-header.php' in your code. If the page cannot find this file none of the Wordpress functions will be available.

Q: I'm sure that the path is correct but i'm still getting this error.
A: Are you running the latest version of Wordpress? If so it is probably because that function has been deprecated in an older version of Wordpress and is no longer present. This tutorial was written for Wordpress 2.0 and is also working with 2.1. Make a visit at codex.wordpress.org and look at the documentation for that function. If it is marked as deprecated they will tell you which function to use instead. If you still have problems you can contact me and I will try to help you.

Q: My website is hosted on a Windows server with IIS, how do I fix the permalinks?
A: I don't have any good answer because i'm not using IIS, nor am I so familiar with it. But there is one user from the supportforum for RapidWeaver that has had some success with this. Start reading from this post and you will get some hints on what to do:
http://realmacsoftware.com/support/viewtopic.php?pid=154904#p154904

Q: Why does my RSS feed fail to validate?
A: Check that you have followed step 2 so that there isn't anything before the code in the textfield. The PHP code MUST be the very first thing on the page otherwise the output will be "compromised".