How I added a blog to my NetObjects Fusion website using WordPress and an inline frame

Initially when I thought about adding a blog to my personal website my idea was to  use my newly acquired PHP and MySQL skills to implement it. The reason was that the solution I used for my shakuhachi website, which was simply creating a blog on Blogger and linking to it, was not as attractive as I wanted it to be because I could not find a Blogger theme that looked similar enough to the layout I used for the web site to make it look like it was actually a part of the website.

However, the prospect of creating my own CMS (Content Management System), while possible, was very ambitious and would have required much more work than necessary when considering that there are a good number of companies and individuals who offer the use of their blog source code to use for free. It may have been a good exercise to write my own, but other than that, the exercise would be similar to re-inventing the wheel. Ie., it would be very time-consuming and the final product had already been developed by others.

After a bit of research it became apparent that the best solution would be to use an inline frame to pull a blog that is being hosted elsewhere into the “Blog” page I created on my web site. A good description and example of inline frames can be found here. Of course, even though the blog code is readily available (I happened to choose the very popular WordPress) there are a number of considerations and tweaks necessary to get this solution working and looking good. The first was that the blog software needed to be placed in a subfolder within my web site, otherwise obtaining information from the blog to adjust the IFRAME’s height would result in “permission denied” errors. So, next to my “assets” and “html” subfolders within my ckoep.atspace.cc subdomain, I needed to create a “myblog” subfolder on my web server.

directory tree

The next step was to download WordPress to my computer, unzip the downloaded folder, and FTP the unzipped folders and files to the “myblog” folder I created on my web server. Downloading and unzipping was not difficult, however FTP’ing the files, while fairly routine if done enough, can be a bit challenging. As you can see from the above image, I usually like to work with the file manager provided on my web host (atspace.com), so FTP’ing the files to my web host was not routine for me. After a failed attempt to use the Atspace file manager because it does not support transfer of a large number of files, I found instructions on how to FTP the files in the FAQ my web host, Atspace, provides.

After the WordPress files were copied to the “myblog” folder, the next step was to install WordPress. Fortunately, the WordPress.org  web site contains very good documentation, including instructions for installation. The instructions include a “Famous 5 minute install”. Considering that the installation requires creating a MySQL database, that I had to refer the the Atspace FAQ again to learn how to do, it took more like a half hour. Even so, the process was fairly painless and somewhat amazing. The WordPress team has done a very good job with the installation software.

Now that the blog was installed and fully functional by pointing my browser to http://ckoep.atspace.cc/myblog, the next step was to create an inline frame within my content-less “blog.html” file found in the “html” folder. Since it is unknown what the height of the inline frame will be because blog posts can be of varying lengths, this step requires some fairly sophisticated javascripting. However, I found some excellent instructions and javascript code I was able to use without any modification on the Dynamic Web Coding web site. For the html portion of the code I had to adjust the width of the iframe, but that was simple.

The next and final step was to eliminate the header, some margins, and some padding found in the WordPress theme that I chose. This involved using FireFox’s Firebug add-on to view the WordPress code and related areas on the rendered page simultaneously to identify what html and css need to be modified and then make the modifications.

Here is a video describing how I found what code needed to be modified: