Say you have a website and would like to add a blog under www.yourwebsite.com/blog, but you don’t want to spend much time designing and tweaking it. Well, WordPress makes it a breeze, provided you are familiar with HTML/CSS and have a general idea about what PHP is.
Here’s how you do it:
- First we need to install WordPress. With all the preparations and it’s famous 5-minute install it should take around 15 minutes.
- Make sure your server supports PHP/MySQL, at the time that would be PHP version 5.2.4 or greater and MySQL version 5.0 or greater – shouldn’t be a problem.
- Make an empty /blog/ directory (or whatever you want to call it) under your public root.
- Download WordPress, unzip it, rename the wp-config-sample.php file to wp-config.php and fill in your Database details (create a new database and a user, if you didn’t have them), you will probably want to change the following lines:
define('DB_NAME', 'your-db'); define('DB_USER', 'youd-db-username'); define('DB_PASSWORD', 'this-users-password'); define('DB_HOST', 'localhost-or-whatever');
WordPress uses “wp_” prefix to avoid naming conflicts with your existing tables, if for some reason you want to change it – edit this line:
$table_prefix = 'wp_';
Last thing to do here is to change the salts to encrypt your cookies:
define('AUTH_KEY', 'your salt here'); define('SECURE_AUTH_KEY', 'your salt here'); define('LOGGED_IN_KEY', 'your salt here'); define('NONCE_KEY', 'your salt here'); define('AUTH_SALT', 'your salt here'); define('SECURE_AUTH_SALT', 'your salt here'); define('LOGGED_IN_SALT', 'your salt here'); define('NONCE_SALT', 'your salt here');
Just put some unique lines in there and you’re good to go.
- Upload the files into your new directory, make sure that /wp-admin/ is located right in your blog directory.
- Run www.yourwebsite.com/blog/wp-admin/install.php in a web browser – that should do it, go to www.yourwebsite.com/blog/ and check out your new blog there.
- Your new blog is up and running, but it doesn’t quite match the rest of your website in terms of look & feel, so chances are you still have some work to do. The good thing is that you probably have a nice theme with all the time-consuming details taken care of (mine was Twenty Eleven), and it’s probably licensed under GNU, so you are free to tweak it to you liking. The time you’ll need here may vary depending on your design, it took me about 40 minutes to get the acceptable result.
- First log into back end (just add /wp-admin to your blog directory) and hit “Appearance” – you’ll find some settings there, change them so that the basic colors and style looks more like your main website. I changed the color scheme and some colors.
- Now go to your blog directory /wp-content/themes/theme-name via FTP (last part will contain the name of your theme), find header.php, back it up under some similar name (say header-old.php) and add your main stylesheet to the “head” part of the HTML code:
<head> ... <link href="/css/your-main-styles.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Make sure your styles are placed above the ones of your theme, this way the theme styles will be loaded after your main styles and any equivalent rules in your styles will be overwritten by your theme. Also use absolute path (start with “/” as your public root) – this way you wouldn’t have to worry about how your styles path relates to the theme path. Now refresh your blog in the web browser – if it got ugly, you’re on the right track.
- Another thing to do in header.php – grab your website’s header part and put it here (use your render function or just copy/paste the static version). Replace the theme’s header (<header> tag in my case).
- Find footer.php in the same folder, back it up, and put your website’s footer in here, my case was again simple with the <footer> tag. Replace the themes footer, just make sure to leave this part:
<?php wp_footer(); ?>
It shows WordPress tab at the top of the screen if you’re logged in. If you use Google Analytics or some similar services that need scripts before closing <body> tag – put them here as well.
- Next thing to do is to create a transitional style sheet where you put “fixer styles” that will only be used by your blog and will take the ugliness away. Create a text file, name it whatever you like (say fixer-styles.css), upload into your CSS folder and place another link in header.php, this time make sure this link comes after (below) the blog style sheets so that these styles overwrite the ones of your theme:
<head> ... <link href="/css/your-main-styles.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> ... <link href="/css/your-fixer-styles.css" rel="stylesheet" type="text/css" /> </head>
- Now turn on Firebug, Web Inspector or whatever tool you like, find ugly elements one by one and make fixer rules in your new style sheet – there were not many in my case. You can also use this style sheet later to add or change styles without touching the theme (use !important if absolutely necessary).
That’s it! Sure the blog can still use some tweaks here and there, you’ll also have to place the link to your blog in your website’s navigation, but the main part is done – in my case it took around 55 minutes + coffee pauses 🙂