Therefore we thought that it might be useful to create a ‘how to’ post to act as a guide for those installing and customising Wordpress.
We’d love to hear your thoughts on this post, and if you’ve any other hints and tips to share please let us know via the comments.
The easiest way, (if it allows you to) is to install the blog through the control panel for your site. In the control panel click on the fantastico deluxe button, then on the left hand navigation under the title blog, click on the WordPress link, now click the new installation link that will appear on the page and follow the instructions provided on screen.
If you don’t have a control panel that allows you to automatically install a WordPress blog, you can manually install the blog. Instructions for this can be found on http://codex.wordpress.org/Installing_WordPress
Once WordPress is installed it will appear in a folder on your remote server (where the site is hosted). Download this folder to your computer.
The folder containing the files you need to edit can be found using the following path from the blog folder: \your-blog-folder\wp-content\themes\default\
1. Open style.css in a text editor and replace everything on it with the code below.
/* Begin Typography & Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
color: #333;
text-align: center;
}
#page {
background-color: white;
border: 1px solid #000000;
text-align: left;
}
#headerimg {
margin: 7px 9px 0;
height: 90px;
width: 800px;
}
#content {
font-size: 1.2em
}
.widecolumn .entry p {
font-size: 1.05em;
}
.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}
.widecolumn {
line-height: 1.6em;
}
.narrowcolumn .postmetadata {
text-align: center;
}
.thread-alt {
background-color: #f8f8f8;
}
.thread-even {
background-color: white;
}
.depth-1 {
border: 1px solid #ddd;
}
.even, .alt {
border-left: 1px solid #ddd;
}
#footer {
border: none;
}
small {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
}
h1, h2, h3 {
font-family: ‘Trebuchet MS’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
font-weight: bold;
}
h1 {
font-size: 4em;
text-align: center;
}
#headerimg .description {
font-size: 1.2em;
text-align: center;
}
h2 {
font-size: 1.6em;
}
h2.pagetitle {
font-size: 1.6em;
}
#sidebar h2 {
font-family: ‘Lucida Grande’, Verdana, Sans-Serif;
font-size: 1.2em;
}
h3 {
font-size: 1.3em;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: white;
}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}
.entry p a:visited {
color: #b85b5a;
}
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}
.commentlist li ul li {
font-size: 1em;
}
.commentlist li {
font-weight: bold;
}
.commentlist li .avatar {
float: right;
border: 1px solid #eee;
padding: 2px;
background: #fff;
}
.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}
#commentform p {
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}
.commentmetadata {
font-weight: normal;
}
#sidebar {
font: 1em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}
code {
font: 1.1em ‘Courier New’, Courier, Fixed;
}
acronym, abbr, span.caps
{
font-size: 0.9em;
letter-spacing: .07em;
}
a, h2 a:hover, h3 a:hover {
color: #06c;
text-decoration: none;
}
a:hover {
color: #147;
text-decoration: underline;
}
#wp-calendar #prev a, #wp-calendar #next a {
font-size: 9pt;
}
#wp-calendar a {
text-decoration: none;
}
#wp-calendar caption {
font: bold 1.3em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
text-align: center;
}
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
/* End Typography & Colors */
/* Begin Structure */
body {
margin: 0 0 20px 0;
padding: 0;
}
#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 800px;
border: 1px solid #000000;
}
#header {
background-color: #FFFFFF;
margin: 0 0 0 1px;
padding: 0;
height: 90px;
width: 800px;
}
#headerimg {
margin: 0;
height: 90px;
width: 100%; float:left;
}
.narrowcolumn {
float: left;
padding: 0 0 0px 0px;
margin: 0px 0 0 10px;
width: 500px;
}
.widecolumn {
padding: 0px 0 20px 0;
margin: 5px 0 0 10px; float:left;
width: 500px;
}
.post {
margin: 0 0 40px;
text-align: justify;
}
.post hr {
display: block;
}
.widecolumn .post {
margin: 0;
}
.narrowcolumn .postmetadata {
padding-top: 5px;
}
.widecolumn .postmetadata {
margin: 30px 0;
}
.widecolumn .smallattachment {
text-align: center;
float: left;
width: 128px;
margin: 5px 5px 5px 0px;
}
.widecolumn .attachment {
text-align: center;
margin: 5px 0px;
}
.postmetadata {
clear: both;
}
.clear {
clear: both;
}
#footer {
padding: 0;
margin: 0 auto;
width: 760px;
clear: both;
}
#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
}
/* End Structure */
/* Begin Headers */
h1 {
padding-top: 70px;
margin: 0;
}
h2 {
margin: 10px 0 0;
}
h2.pagetitle {
margin-top: 10px;
text-align: center;
}
#sidebar h2 {
margin: 5px 0 0;
padding: 0;
}
h3 {
padding: 0;
margin: 30px 0 0;
}
h3.comments {
padding: 0;
margin: 40px auto 20px ;
}
/* End Headers */
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
/* Using ‘class=”alignright”‘ on an image will (who would’ve
thought?!) align the image to the right. And using ‘class=”centered’,
will of course center the image. This is much better than using
align=”center”, being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right; width:50%; height:30px; text-align:right;
}
.alignleft {
float: left; width:50%; height:30px; text-align:left;
}
/* End Images */
/* Begin Lists
Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets. */
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}
html>body .entry li {
margin: 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before {
content: “0BB 020″;
}
.entry ol {
padding: 0 0 0 35px;
margin: 0;
}
.entry ol li {
margin: 0;
padding: 0;
}
.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}
#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}
#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}
#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
}
#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}
ol li, #sidebar ul ol li {
list-style: decimal outside;
}
#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0;
padding: 0;
}
/* End Entry Lists */
/* Begin Form Elements */
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}
#sidebar #searchform #s {
width: 108px;
padding: 2px;
}
#sidebar #searchsubmit {
padding: 1px;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}
select {
width: 130px;
}
#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}
#commentform {
margin: 5px 10px 0 0;
}
#commentform textarea {
width: 100%;
padding: 2px;
}
#respond:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#commentform #submit {
margin: 0 0 5px auto;
float: right;
}
/* End Form Elements */
/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}
.commentlist {
padding: 0;
text-align: justify;
}
.commentlist li {
margin: 15px 0 10px;
padding: 5px 5px 10px 10px;
list-style: none;
}
.commentlist li ul li {
margin-right: -5px;
margin-left: 10px;
}
.commentlist p {
margin: 10px 5px 10px 0;
}
.children { padding: 0; }
#commentform p {
margin: 5px 0;
}
.nocomments {
text-align: center;
margin: 0;
padding: 0;
}
.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */
/* Begin Sidebar */
#sidebar
{
padding: 0px 0 10px 0;
margin-left: 0px; float:right;
width: 190px; margin-top:10px;
}
#sidebar form {
margin: 0;
}
/* End Sidebar */
/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}
#wp-calendar a {
display: block;
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar td {
padding: 3px 0;
text-align: center;
}
#wp-calendar td.pad:hover { /* Doesn’t work in IE */
background-color: #fff; }
/* End Calendar */
/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
cursor: help;
}
acronym, abbr {
border-bottom: 1px dashed #999;
}
blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}
blockquote cite {
margin: 5px 0 0;
display: block;
}
.center {
text-align: center;
}
.hidden {
display: none;
}
hr {
display: none;
}
a img {
border: none;
}
.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 0px;
}
/* End Various Tags & Classes*/
/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */
2. Open header.php in a text editor. Below is the code that should replace the code between the <body> tags.
3. Now in the <header> section delete any styles containing kubrick.jpg or similar eg: #page { background: url(“<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; }. Take care not to delete anything that isn’t a style as it may break the blog.
4. At this point, if you wish, you can edit the images and styles to suit your site. You will notice that the styles have been written inline. This is for example purposes, so you can and should move inlinestyles to the style sheet when you are happy with the look of the header.
That’s the look sorted, but there are still some other areas that need to be looked at.
For starters when you write blog posts the default URL extensions are not search friendly e.g. /page=2.php
To check this, open a browser and sign into your blog, click on settings, then on perma links and select the option that gives the following url example: http://www.yoursite.co.uk/blog-test/2009/04/sample-post/
Now the post you write will generate search engine friendly URL’s.
Unfortunately this fix has now created another problem. If you have any previous posts and try clicking on them, you will see that they appear as broken links.
Open or create a .htaccess file and paste the following code, make sure you change the word ‘blog’ if you used a different title for the folder you installed it to. Type the correct URL where ‘yoursite’ is written:
The second part of the code (rewrite) isn’t strictly to do with the blog but it helps with the SEO of your site.
Save and upload the .htaccess file to the root folder.
OK, just one more consideration and we’re there. This consideration is also SEO related. Depending on the installation of the blog, it will sit on either a http://site.com/blog address or a http://www.site.com/blog address.
Ideally you want the blog to sit on http://www. with rest of the site. This can be checked by looking at the address bar of your blog and seeing if there is a ‘www.’ infront of the domain.
This is called canonicalisation – you can read more about the effects of this has here .
To move the blog to a http://www. location you have to open functions.php and paste the following code just after <?php at the top of the page. Again replace ‘yoursite’ with your own domain.
Many businesses recognise the potential value of corporate blogging both in terms of potential SEO benefits, and engaging with their customers. As such we’re finding ourselves installing blogs on a fairly regular basis.
Deleting Large Numbers of Comments from your Blog
Friday, January 15th, 2010Every New Year inevitably brings reflections, resolutions, and commitments to self improvement. One of my biggest faults, is that I will generally put off jobs I don’t want to do until I can’t put them off any more. This fault was highlighted to me when I caught a glimpse of comments awaiting moderation for my blog… 3476!
“How did I let it get this far?? How long is it going to take to moderate all these comments, of which 99.9% are likely to be robots from an ‘extension’ company offering ways to improve performance in the ‘evening time’! Is there not a remove all button?”… These and many more questions ran through my mind as I desperately looked for ways to avoid manually deleting the comments 20 at a time!
If you’re wondering if there is a button to press on WordPress that mass removes all comments, the short answer is not at this time. However, I did mange to get rid of all the comments without having to do them 20 at a time. Here’s how I did it… (To do this you will need access to the cpanel where your blog resides.)
Firstly it is always a good idea to back up your blog before you do any fiddling with it. If you don’t know how to do this you can find instructions here on the WordPress site
1. Once you have backed up your blog, go into PHP My Admin in your hosting’s Cpanel.
2. In PHP My Admin, to the left, you will see the blog database listed, click on it and a list of tables within the database will appear.
3. Now all you need to do is click on the tab ‘ SQL ‘ which is in the menu to the right in the main section. Clicking this will open the SQL command input area in which you should copy and paste the following command:
DELETE FROM wp_comments WHERE comment_approved = '0'That’s it, if you log back into your blog you will see that all the comments awaiting approval will have been deleted.
The slate is wiped clean and you can promise yourself you will make a concerted effort to approve comments on a more regular basis henceforth
Tags: Blog, Blogging, Comment Spam
Posted in Blogging | No Comments »