Installing and Integrating WordPress with WebPlus

WordPress is a powerful Content Management System and Blog application that is powered by PHP and
MySQL. As of January 2011, over 12,600 plugins are available, and it has been downloaded over 12.6 million
times. It also is frequently updated and is supported by a large online community. It is fairly easy to set up, and
there are also many free and paid templates available online. It is a terrific alternative to the Serif Web
Resources blog, as you have much more control and it runs on your server. You also get full SEO benefits.
What to expect:
Clear, easy to read instructions.
Information on how to download, install and configure WordPress.
How to embed WordPress onto your WebPlus website via an iFrame.
How to make WordPress match your WebPlus website. (in Part 2 of this tutorial)
We will be downloading WordPress from the following website: http://www.wordpress.org
Finally, should you have any questions regarding this tutorial, please post in the following thread:
forums.serif.com
Additionally, your host may offer an auto-installer such as Fantastico or Softaculous which can quickly install
WordPress. Proceed with this method at your own risk.

Requirements
Ÿ Basic WebPlus Knowledge.
If you need a very simple blog, try the included Serif Web Resources Blog Smart Object.
Ÿ Web Host that supports PHP.
WebPlus.net will not work.
Ÿ 1 MySQL Database.
You will learn how to create a MySQL database in this tutorial.
Ÿ Patience.
If this is your first time dealing with an online application, setting up WordPress can be time
consuming. However, when you are done, it will be well worth it, as you’ll understand how to install other
online applications!
Note: A host with CPanel was used to create the MySQL database in this tutorial and will be demonstrating
how to create a database with the ‘MySQL Database Wizard’. If you do not have this, please check with your
host for instructions on how to create a new MySQL database.

Tutorial written by BrianE - B.MAC Web Design. You are free to distribute this material.
 Installing and Integrating WordPress with WebPlus

PHP: A scripting language used to produce dynamic web pages. It is used to connect to a MySQL Database.
MySQL: A relational database management system. PHP is usually used to connect to the database.
FTP: File Transfer Protocol. Used to copy files from one host to another.

You may be ready to start blogging, but first you must download the
WordPress installation package. It is distributed in the ZIP format. To
download WordPress, visit www.wordpress.org/download . Click the
button ‘Download WordPress 3.0.4’. Save the ZIP file to an easy-to-
locate place on your computer. Then, right-click and ‘extract’ the file.
A new folder will open with the extracted files. In this folder, there are
three visible sub-folders, wp-admin, wp-content, and wp-includes.
You may need to modify some of the files within these sub-
folders later on. Now, download FileZilla (located at
http://www.filezilla-project.org ) to connect via FTP to your
host. Open FileZilla and go to File > Site Manager. Click the
‘New Site’ button and add the necessary FTP information to
connect. If you don’t know where this information is, check
your email for the settings or contact your host. On the
‘Advanced’ tab, you may need to add information to the
‘Default remote directory’ field, such as ‘public_html’. Then,
click the ‘Connect’ button. After a few seconds, you will see a 1.1 Filezilla Settings.
listing of the files on your host. Create a new
folder named ‘blog’ (right-click and choose
‘Create Directory’). Go back to the extracted files
and view all of the files with the three ‘wp-admin’,
‘wp-content’, and ‘wp-includes’ folders visible.
Select all of the files and drag-and-drop them into
your ‘blog’ folder which you created in FileZilla.
FileZilla will begin to upload your files. This may
process may take a while. When the upload
process is finish, navigate to
http://www.yoursite.com/blog and you should see
a screen as shown in image 1.2. If you get a
message that prompts you to create a configuration
file, click ‘Create a Configuration File’. If not,
click ‘Let’s go’. You will now see a screen that 1.2 Welcome to the WordPress Installer!
requires database connection details.

Tutorial written by BrianE - B.MAC Web Design. You are free to distribute this material.
 Installing and Integrating WordPress with WebPlus

It’s time to create a database. Go to your site’s CPanel, often located at yoursite.com/cpanel. Scroll down to
‘MySQL Database Wizard’. Enter the name of your database (ex. blog). Important note: if you create a
MySQL database via this method, you will most likely need to add your CPanel’s username to the front of the
blog (user_blog). Click ‘Next Step’. You will now see a screen that says to ‘Create Database Users’. Enter in
a username (ex. blog) for WordPress to
connect to your database. Important note: if
you create a MySQL user via this method,
you will most likely need to add your
CPanel’s username to the front of the user
name (user_blog). Associate a very strong
password to this user, and then click ‘Create
User’. Finally, you will need to add that user
to the database, so click ‘All Privileges’ and
then click ‘Next Step’. Go back to the
WordPress setup page and insert the new
database connection details (Image 1.3).
Then, click ‘Submit’. If all goes well, you
will be taken to a new page. If not, you will
need to verify all database connection details.
If everything continues successfully, press
‘Run the install’. The next page is rather self-
explanatory. Here you will provide a site 1.3 Input WordPress Database Connection Details.
name, username, password, and email address.
Write down these settings immediately after
entering them. Then click ‘Install WordPress’ (Image 1.4). You
will then be taken to a new page which displays your WordPress
username and password. Click ‘Log In’. Enter your WordPress
username and password and click ‘Log In’. Congratulations!
You’ve just installed WordPress. Now you will need to configure
more settings of your blog, which will be discussed on the next
page.

Important Details
At this point, you should be able to access your blog at:
www.yoursite.com/blog
Additionally, you should be able to access your blog Admin panel
at: www.yoursite.com/blog/wp-admin
1.4 WordPress User Details.

Tutorial written by BrianE - B.MAC Web Design. You are free to distribute this material.
 Installing and Integrating WordPress with WebPlus

Now that you’ve set up WordPress, it’s time to change a few settings.
To complete this part of the tutorial, open the Admin Panel. Then, click the ‘Settings’
panel. The panel as pictured in Image 1.5 will appear.
General: On this page, you can change settings such as your Site Title, Tagline, e-
mail address, and timezone. If you plan on integrating your blog with WebPlus in an
iFrame, remove the Tagline and Site Title, as these are already displayed on your main
site.
Writing: On this page, you can change settings that are active when you create a new
post. However, you probably won’t need to change anything on this page to start
working on your blog.
Reading: On this page, you can change settings such as what displays on the
home page. The most important option on this page is the ‘Blog pages show at 1.5 WordPress Settings panel.
most’ number. You may want to make this number larger or smaller depending
on how you want your blog home page to display.
Discussion: On this page, you can change your comment settings. You can read more about this settings page
at: http://codex.wordpress.org/Settings_Discussion_SubPanel . Most settings do not need to be changed.
Media, Privacy, and Permalinks: On these pages, you can change other settings. On the ‘Media’ page, you
can set sizes of image thumbnails and other media-related options. The ‘Privacy’ page should be set to to
‘visible blog’. Finally, the ‘Permalinks’ page does not need to be modified unless you are an advanced user.

Assuming that you plan on putting WordPress in an iFrame, there are a few tweaks
which will need to be made. While in your Admin Panel, click the ‘Appearance’ panel
(Image 1.6). Then, click ‘Background’. Next to the ‘Color’ field, click ‘Select a
Color’. Choose a color that will complement the color scheme of your site and then
click ‘Save Changes’. Next, click the ‘Header’ link. You can choose one of the
included images, or click ‘Choose File’ to upload an image of your own. For best
results, upload an image which is 940 x 198 pixels in JPG format. Then, click ‘Save
Changes’. By this point, you should have an attractive blog which you can now
integrate with WebPlus.
1.6 WordPress Appearance panel.

Tutorial written by BrianE - B.MAC Web Design. You are free to distribute this material.
 Installing and Integrating WordPress with WebPlus

Now that you have an attractive theme for your WordPress blog, it’s time to integrate your blog with WebPlus.
Open your website, and create a new page titled ‘Blog’. Click Insert > Web Object > Framed Document. Click
‘Internet Page’ and enter in the URL to your blog. Tick ‘Active Document Frame’, un-tick ‘Show Border’, and
tick ‘Transparent Background’. Then, click ‘OK’. Click and drag to create the Document Frame. Make the
width of the iFrame 1000 pixels so that there are no horizontal scrollbars. If there are any further modifications
you want to make to the blog, you will need to do them in in your WordPress Admin Panel, not in WebPlus.

1.7 A WordPress blog quickly integrated with a WebPlus template via a Document Frame (iFrame).

Hopefully by reading this tutorial, you now have a full-featured WordPress blog installed on your server. If you
need full WordPress documentation, check out http://codex.wordpress.org
In the future, expect a tutorial on how to theme WordPress to match your WebPlus website, so that you don’t
get double horizontal scrollbars on your webpage. You will be able to use your existing WordPress blog and
will only be modifying a few HTML and CSS files. Anything you post in your WordPress blog now will stay
intact in the future. Check on the Serif Forums for updated news on when this will happen.

Tutorial written by BrianE - B.MAC Web Design. You are free to distribute this material.