1. You can see changes instantly without having to download the site from the internet
2. You can work on and edit your theme offline

The best tutorial that I have found online to install a Localhost for a Mac is this tutorial right here by Lullabot.  The tutorial should have everything you need to know.

Next step is to install Wordpress on your Local Host:

1. Open the Start Page for Mamp (http://localhost/MAMP/)
2. Click on phpMyAdmin (one of the tabs on top)
3. Click on the drop down menu for MYSQL connection collation and select utf8_unicode_ci
4. Click on the box under Create New Database and write wordpress
5. Click “Create”
6. Download Wordpress from http://wordpress.org/
7. Open the wp-config-sample.php file
8. Make the following edits:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define(’DB_NAME’, ‘wordpress‘);

/** MySQL database username */
define(’DB_USER’, ‘root‘);

/** MySQL database password */
define(’DB_PASSWORD’, ‘root‘);

/** MySQL hostname */
define(’DB_HOST’, ‘localhost’);

1. Save the file as wp-config.php
2. Open up your Local Host folder (created from the Lullabot video tutorial above)
3. Find the folder titled “wordpress” (if the folder was not automatically created, create it right now)
4. Transfer ALL of the wordpress files into the Wordpress folder
5. Go to the following url to install Wordpress onto your Localhost: http://localhost/wordpress/wp-admin/install.php
6. Follow the steps and you’re done!

If after you’ve read the entire tutorial, and read the entire comment section, and you still can’t figure out how to install a Localhost on your Mac, leave me a comment here and I will walk you through the installation.

1. You can see changes instantly without having to download the site from the internet
2. You can work on and edit your theme offline

The best tutorial that I have found online to setup a Localhost and install Wordpress for Windows XP is this tutorial right here by Geeks are Sexy.  The tutorial should have everything you need to know.

If after you’ve read the entire tutorial, and read the entire comment section, and you still can’t figure out how to install a Localhost on your Windows XP, leave me a comment here and I will walk you through the installation.

Note: Do not copy and past the code below into your .php files.  This code has been formatted through html.  Please type in the actual code into your .php file.  This also helps you learn how to code html and you’ll be a CSS master in no time 

1. Open up header.php for JunPress or open up sidebar.php for PhenPress

2. The code that you will be looking for is in the “about” div which is seen here:

<div id=”about”>

<div id=”about-left”>

<div id=”about-title”>
<a rel=”nofollow” href=”<?php echo get_bloginfo(’url’);?>/about/”>About</a>
</div>

<div id=”about-description”>
Description about you that you can edit.
<p />
<a rel=”nofollow” href=”<?php echo get_bloginfo(’url’);?>/about/”>Learn more about me</a>
</div>

</div>

<div id=”about-image”>
<img src=”http://junloayza.wordpress.com/files/2009/05/junpress-about.jpg” alt=”JunPress About Image”>
</div>

</div>

3. To change the title of the About section, change the “about-title” div

<div id=”about-title”>
<a rel=”nofollow” href=”<?php echo get_bloginfo(’url’);?>/about/”>About Jun</a>
</div>

4. To change the description for the About section, change the “about-description” div

<div id=”about-description”>
My name is Jun Loayza and I am the Co-Founder of Viralogy.com
<p />
<a rel=”nofollow” href=”<?php echo get_bloginfo(’url’);?>/about/”>Find out more about me</a>
</div>

5. Put it all together and you get

<div id=”about”>

<div id=”about-left”>

<div id=”about-title”>
<a rel=”nofollow” href=”<?php echo get_bloginfo(’url’);?>/about/”>About Jun</a>
</div>

<div id=”about-description”>
My name is Jun Loayza and I am the Co-Founder of Viralogy.com
<p />
<a rel=”nofollow” href=”<?php echo get_bloginfo(’url’);?>/about/”>Find out more about me</a>
</div>

</div>

<div id=”about-image”>
<img src=”http://junloayza.wordpress.com/files/2009/05/junpress-about.jpg” alt=”JunPress About Image”>
</div>

</div>

6. Save the file

If you have any questions about this, feel free to ask me in the comment section.  Thanks!

1. Download and Install the Firebug Add-on for Fire Fox

2. After restarting Fire Fox, you should see a little Bug Icon on the bottom right of your browser

3. Click on the icon to open the Firebug window

4. Click on “Inspect” to be able to actively inspect any element on the Viralogy Themes

5. Hover your mouse over any element and you’ll notice Firebug will tell you the exact Div and style element that corresponds to section your mouse is hovering over

6. Go to the appropriate section on your style.css file and edit the style to how you want it to look

7. Save the file

Notice: Do not copy and past the code below into your .php files.  This code has been formatted through html.  Please type in the actual code into your .php file.  This also helps you learn how to code html and you’ll be a CSS master in no time 

1. Open the header.php for JunPress or PhenPress and open the sidebar.php for ChouPress

2. For JunPress or PhenPress locate the “menu-subscribe” div

<div id=”menu-subscribe”>

Subscribe via: <a rel=”nofollow” href=”">RSS</a> | <a rel=”nofollow” href=”">Email</a>

</div>

3. Add your RSS url and your Email subscription url to the appropriate blue highlighted sections.  For example:

<div id=”menu-subscribe”>

Subscribe via: <a rel=”nofollow” href=”http://feeds.feedburner.com/livingthestartuplife“>RSS</a> | <a rel=”nofollow” href=”http://feedburner.google.com/fb/a/mailverify?uri=livingthestartuplife“>Email</a>

</div>

4. Save the file

5. For ChouPress, locate “subscribe” div

<div id=”subscribe”>

<ul>
<li><a rel=”nofollow” href=”"><img src=”http://junloayza.wordpress.com/files/2009/05/twitter-icon.png” width=”40px”></a></li>
<li><a rel=”nofollow” href=”"><img src=”http://junloayza.wordpress.com/files/2009/05/rss-icon.png” width=”40px”></a></li>
<li><a rel=”nofollow” href=”"><img src=”http://junloayza.wordpress.com/files/2009/05/email-icon.png” width=”40px”></a></li>
<li><a rel=”nofollow” href=”"><img src=”http://junloayza.wordpress.com/files/2009/05/facebook-icon.png” width=”40px”></a></li>
</ul>

</div>

6. Add your RSS url and your Email subscription url to the appropriate blue highlighted sections.  For example:

<div id=”subscribe”>

<ul>
<li><a rel=”nofollow” href=”http://Twitter.com/JunLoayza“><img src=”http://junloayza.wordpress.com/files/2009/05/twitter-icon.png” width=”40px”></a></li>
<li><a rel=”nofollow” href=”http://feeds.feedburner.com/livingthestartuplife“><img src=”http://junloayza.wordpress.com/files/2009/05/rss-icon.png” width=”40px”></a></li>
<li><a rel=”nofollow” href=”http://feedburner.google.com/fb/a/mailverify?uri=livingthestartuplife“><img src=”http://junloayza.wordpress.com/files/2009/05/email-icon.png” width=”40px”></a></li>
<li><a rel=”nofollow” href=”http://www.facebook.com/home.php#/profile.php?id=2522723&ref=profile“><img src=”http://junloayza.wordpress.com/files/2009/05/facebook-icon.png” width=”40px”></a></li>
</ul>

</div>

7. Save the file

If you have any questions about this, feel free to ask me in the comment section.  Thanks!

Notice: Do not copy and past the code below into your .php files.  This code has been formatted through html.  Please type in the actual code into your .php file.  This also helps you learn how to code html and you’ll be a CSS master in no time 

1. Open up the Sidebar.php (works for all themes)

2. Locate the “sidebar-widget” div that looks like this:

<div class=”sidebar-widget”>

<div class=”sidebar-title”>
Sidebar Widget
</div>

<div class=”sidebar-content”>

<ul>
<li><a href=”">Sample Content</a></li>
<li><a href=”">Sample Content</a></li>
<li><a href=”">Sample Content</a></li>
<li><a href=”">Sample Content</a></li>
<li><a href=”">Sample Content</a></li>
</ul>
</div>

</div>

3. Change the title of the Sidebar Widget with the “sidebar-title” div

<div class=”sidebar-title”>
Connect with me
</div>

4. Change the content of the sidebar widget and add links in the “sidebar-content” div

<div class=”sidebar-content”>

<ul>
<li><a href=”http://Twitter.com/JunLoayza“>Twitter</a></li>
<li><a href=”http://www.facebook.com/profile.php?id=2522723&ref=profile“>Facebook</a></li>
<li><a href=”http://www.linkedin.com/profile?viewProfile=&key=11722472&locale=en_US&trk=tab_pro“>LinkedIn</a></li>
<li><a href=”http://junloayza.stumbleupon.com/public/“>Stumble Upon</a></li>
<li><a href=”jun.loayza@gmail.com“>Email</a></li>
</ul>
</div>

5. The final code should look like this:

<div class=”sidebar-widget”>

<div class=”sidebar-title”>
Connect with me
</div>

<div class=”sidebar-content”>

<ul>
<li><a href=”http://Twitter.com/JunLoayza“>Twitter</a></li>
<li><a href=”http://www.facebook.com/profile.php?id=2522723&ref=profile“>Facebook</a></li>
<li><a href=”http://www.linkedin.com/profile?viewProfile=&key=11722472&locale=en_US&trk=tab_pro“>LinkedIn</a></li>
<li><a href=”http://junloayza.stumbleupon.com/public/“>Stumble Upon</a></li>
<li><a href=”jun.loayza@gmail.com“>Email</a></li>
</ul>
</div>

</div>

6. Save the file

If you have any questions about this, feel free to ask me in the comment section.  Thanks!

Notice: Do not copy and past the code below into your .php files.  This code has been formatted through html.  Please type in the actual code into your .php file.  This also helps you learn how to code html and you’ll be a CSS master in no time 

1. Open the sidebar.php (works for all themes)

2. Locate the “twitter-feed” div. (I highlighted my username in red for your convenience)

<div class=”twitter-feed”>
<h2>What I’m up to…</h2>
<ul id=”twitter_update_list”></ul>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/JunLoayza.json?callback=twitterCallback2&amp;count=1″></script>
<div class=”follow-on-twitter”>
<a rel=”nofollow” href=”">Follow me on Twitter</a>
</div>
</div>

3. Replace my Twitter username (JunLoayza) with yours

<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/AddYourUsernameHere.json?callback=twitterCallback2&amp;count=1″></script>

4. Now you will want to add your twitter URL to the “Follow me on Twitter” link.  The following code is listed in blue above:

<a rel=”nofollow” href=”http://Twitter.com/AddYourUsernameHere“>Follow me on Twitter</a>

5. The final code should like this:

<div class=”twitter-feed”>
<h2>What I’m up to…</h2>
<ul id=”twitter_update_list”></ul>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/AddYourUsernameHere.json?callback=twitterCallback2&amp;count=1″></script>
<div class=”follow-on-twitter”>
<a rel=”nofollow” href=”http://Twitter.com/AddYourUsernameHere“>Follow me on Twitter</a>
</div>
</div>

6. Save the file

If you have any questions about this, feel free to ask me in the comment section.  Thanks!

Notice: Do not copy and past the code below into your .php files.  This code has been formatted through html.  Please type in the actual code into your .php file.  This also helps you learn how to code html and you’ll be a CSS master in no time 

1. Open up header.php for JunPress or open up sidebar.php for PhenPress

2. The image size is currently set to 100px by 125px.  If you would like to add an image without resizing the header, just add an image that is 100px by 125px.  If you would like to change the size of the image, go to this tutorial.

3. The code that you will be looking for is in the “about” div which is seen here:

<div id=”about”>

<div id=”about-left”>

<div id=”about-title”>
<a rel=”nofollow” href=”<?php echo get_bloginfo(’url’);?>/about/”>About</a>
</div>

<div id=”about-description”>
Description about you that you can edit.
<p />
<a rel=”nofollow” href=”<?php echo get_bloginfo(’url’);?>/about/”>Learn more about me</a>
</div>

</div>

<div id=”about-image”>
<img src=”http://junloayza.wordpress.com/files/2009/05/junpress-about.jpg” alt=”JunPress About Image”>
</div>

</div>

4. In the “about” div, locate the following code which pertains to the about image:

<div id=”about-image”>
<img src=”http://junloayza.wordpress.com/files/2009/05/junpress-about.jpg” alt=”JunPress About Image”>
</div>

5. Add the url for the image you want to the <img src=””>.  For example:

<img src=”http://domainforthesite.com/images/filenamefortheimage.jpg”>

6. Add the short description for the image in the alt=””.  For example:

alt=”Short description of image”

7. Put it all together and the new code looks like this:

<div id=”about-image”>
<img src=”http://domainforthesite.com/images/filenamefortheimage.jpg” alt=”Short description of image”>
</div>

8. Save the file

If you have any questions about this, feel free to ask me in the comment section.  Thanks!

Notice: Do not copy and past the code below into your .php files.  This code has been formatted through html.  Please type in the actual code into your .php file.  This also helps you learn how to code html and you’ll be a CSS master in no time 

1. Open up the header.php for JunPress

2. The image size is currently set to 625px by 225px.  If you would like to add an image without resizing the header, just add an image that is 625px by 225px.  If you would like to change the size of the image and the size of the header, go to this tutorial.

3. On lines 64-66, locate the following code:

<div id=”header-left”>
<img src=”http://junloayza.wordpress.com/files/2009/05/junpress-header.jpg” alt=”JunPress Header Image”>
</div>

4. Add the url for the image you want to the <img src=”">.  For example:

<img src=”http://domainforthesite.com/images/filenamefortheimage.jpg”>

5. Add the short description for the image in the alt=”".  For example:

alt=”Short description of image”

6. Put it all together and the new code looks like this:

<div id=”header-left”>
<img src=”http://domainforthesite.com/images/filenamefortheimage.jpg” alt=”Short description of image”>
</div>

7. Save the file

If you have any questions about this, feel free to ask me in the comment section.  Thanks!