I just got off the phone with a friend who really does not know much about web design and we got him set up with a WordPress blog in 5 simple steps. After talking with him I decided to write a tutorial on how to set up a WordPress website. This tutorial will take about 15 minutes if you don’t count file transfer time (FTP).

What you will need:

• A FTP program like FileZilla (I use Dreamweaver and FileZilla)
• A web hosting company (Obviously… I use Media Temple)
• A Text editor (I use Dreamweaver but you can use anything)

What this Tutorial will accomplish:

• You will have a basic WordPress website running

Let’s get started…

Step #1. Download and unzip the latest version of WordPress (This tutorial uses v. 2.9) into a local folder on your computer (remember where you unzipped it to)

Step #2. Create a database on your server and take note of those settings. Most hosting companies provide help documents on how to do this. Its should be really simple.

Step #3. Open up this file: wp-config-sample.php and SAVE AS wp-config.php right off the bat. Then edit the lines of code that talk about your database. Remember those settings I said to keep handy. You will need them here.

//  MySQL settings - You can get this info from your web host  //
// The name of the database for WordPress //
define('DB_NAME', 'put_your_database_name_here');
 
// MySQL database username //
define('DB_USER', 'user_name_here');
 
// MySQL database password //
define('DB_PASSWORD', 'your_password_here');
 
// MySQL hostname 99% chance you will not have to change this value.  Some hosting providers like mine require something different.  This is something that anyone at the hosting company will know.//
define('DB_HOST', 'localhost');

Down a little further you will see the Unique Keys. FILL THESE WITH UNIQUE CHARACTERS LIKE:
86dfg79835g6%^$R@!^7^Hn76h&*!@Yhnd*@^#8yem They should all be different from each other and help with the security of your blog. Please do not use the ones provided in these examples and make sure to keep the single quotes around each value.

define('AUTH_KEY', ':dr+%/5V4sAUG-gg%aS*v;&xGhd%{YKC^Z7KKGh j>k[.Nf$y7iGKdJ3c*[Kr5Bg');
define('SECURE_AUTH_KEY', 'TufWOuA _.t>#+hA?^|3RfGTm>@*+S=8\"\'+\"}]<m#+}V)p:Qi?jXLq,<h\\`39m_(');
define('LOGGED_IN_KEY', 'S~AACm4h1;T^\"qW3_8Zv!Ji=y|)~5i63JI |Al[(<YS<2V^$T])=8Xh2a:b:}U_E');
define('NONCE_KEY', 'k1+EOc-&w?hG8j84>6L9v\"6C89NH?ui{*3\\(t09mumL/fFP_!K$JCEkLuy ={x{0');

For more security I like to change the table prefix from wp_ to something else.

// You can have multiple installations in one database if you give each a unique table prefix
$table_prefix  = 'r235_';   // Only numbers, letters, and underscores please!

Step #4. Fire up your FTP program and upload all of the files including the 3 directories to your web server.  This is where a lot of your time will be spent.

Step #5. Open up your favorite web browser and type your site’s address in the address bar and add /wp-admin/install.php. i.e. www.exampleurl.com/wp-admin/install.php or www.exampleulr.com/blog/wp-admin/install.php if you place WordPress in another directory like blog. Fill in the simple info WordPress asks for and your good to go!

That’s it!  You have now set up your first WordPress site.

We accomplished this with a small piece of opensource JavaScript and Adobe Flash software called sIFR or Scalable Inman Flash Replacement. Come on, I’ll show you how to do this in 15 minutes or less.

This is a quick start tutorial and will accomplish two things:

• Replacement of your site’s <h1> tags, if you have any
• Replacement of a CSS class named “replace-me” which we will create on a page

Things you will need for this tutorial:

• A simple text editor (I use Dreamweaver CS3 – you can use anything)
• Adobe Flash (I use Flash CS3 Professional)
• A font you like (I like to look on daFont.com – they are free:)

Lets get started

Step #1: Download and unzip the latest version of the sIFR project here. This tutorial uses sIFR-2.0.7
Step #2: Fire up Adobe Flash and open sifr.fla (it is in the .zip file you just downloaded in step #1) If your version of Flash will not open up the sifr.fla file (Usually cs4 users) then you can download a compatible version here
Step #3: Double click on the stage.

Step #4: Select the Dynamic Text box on the stage.

Step #5: Change the font to one you like. Don’t worry about the font size as sIFR takes care of that for you. The font color will be defined later on in the implementation process.

Step #6: We are now done with Flash, so save the file as the name of the font you used and publish it (eg: swatch_it.fla). This helps when you have multiple fonts on a page.

Step #7: Open up your text editor and follow along. It is pretty easy to just cut and paste:)

Step #8: Open customize_me.as and change line 14 to your reflect your domain name. You just need your domain name here. It does not matter where you will be using sIFR on your site. Make sure you have one with www. and one without. Then save and close it.

example:

allowedDomains = new Array("*","www.toddsantoro.com","toddsantoro.com");

Step #9: Open up your site’s stylesheet (Hint: its a .css file)

Step #10: Add these lines to your sites stylesheet:

example:

.replace-me { font-size: 18px;  display: none !important; }
h1 { display:none !important; }

OR

.replace-me { font-size: 18px; height:75px; width:250px; padding-left:25px; }
h1 { display:none !important; font-size: 22px; }

The class replace-me will trigger sIFR to replace the text with a Flash movie that has your special font. For those people that do not have flash installed, they will see normal text. By adding attributes to the class you can achieve different results, be creative:) As for the <h1> tag… everywhere a <h1> tag is on your site, sIFR will replace it with a Flash movie.

Step #11: Now we bring everything together. Open up your header.php page if you have one. If not; open up the page you want to have sIFR replace your text on. I usually work with WordPress and it has a header.php file that is included on every page of my site.

Add these lines to the <head></head> of your page:

<script src="sIFR-2.0.7/sifr.js" type="text/javascript"></script>
<script src="sIFR-2.0.7/sifr-addons.js" type="text/javascript"></script>

Step #12: Add this line somewhere in the <body></body> of your page:

<div class="replace-me">This is the text I wanted to replace.  Yippie!</div>

Step #13: Open up footer.php if you have one or continue working with the file you were just working with in Step #12. Add these lines just before the ending </body> tag:

<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }</script>
 
<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"#replace-me", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }</script>

Be sure to set your font and link colors in the code above. Also make sure your paths to stuff are correct. You can also combine these like this:

<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"h1,#replace-me", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }</script>

Notice that I simply added a comma to separate the two CSS elements I wanted to replace. This method would also render the same font colors on both <h1> tags and the replace-me class.

Step #14: You are done!  Upload all of your files to your server and check out your work.  If you have problems… I would first make sure all of the paths to the sIFR stuff are correct and that you have uploaded all of the sIFR files.

I will try to help troubleshoot if you post your comments below.

Cheers!