Web Savvy Mama » WordPress Tutorials

WordPress: Lets talk Plugins.

Plugins are one of the easiest things to include on your blog, but are very under used. Plugins can make your blogging experience a much more enjoyable one if you are dealing with issues like spam!

After searching plugins on my own and getting some feedback and information from Michelle at Waterswebblog, I found some plugins that I think every WordPress user should at least look over. First you need to know how to install a plugin. That’s the easy part! After downloading and unzipping you connect to your host via FTP and find your “plugin” folder. Then upload the applicable parts into the plugin folder. Each plugin comes with a readme text that will tell you exactly what parts to upload to your host. Then login to your WordPress admin and click Plugins and activate your plugin! Some plugins will have features that can be managed through the admin and others will need a simple code placed into the template, this varies per plugin and the information should be available in the readme file or on the website you downloaded it from.

Spam: Lets start with the most annoying experience related to blogging: SPAM. You post a new message and start getting umpteen comments all in reference to the newest drug craze or adult entertainment website. Puh-leaze, do I look like someone who would benefit from an “all natural male enhancement”? First thing on my list to conquer. A quick search at WordPress led me to this lengthy list of spam fighting plugins http://codex.wordpress.org/Plugins/Spam_Tools. But which one will work for me? That’s when I IM’d Michelle (like us geek mommies have anything else to do at 11pm?) and asked her advice on a spam plugin. She led me to Spam Karma: http://unknowngenius.com/blog/wordpress/spam-karma/ Spam Karma was an easy plugin to install. No need to place code on my template,just upload and activate. There are settings for how strict you want to set your spam protection that you can mess around with on the admin. Spam Karma checks all my comments messages before it posts them and rates them on how spammy they are and assigns numbers to those characteristics. A URL in the comment may kick back a negative rating but not enough to “spank” it. (Spank is what it calls nipping the spam in the bud). Multiple URLs will red flag the comment and it gets spanked and placed in a managing area of your admin for you to view when you get time. It also rates based on linkback URL and how quick the comment it was made after the visitor logged onto your blog. Each day I get an email stating how many comments were flagged and how many were passed. At anytime I can manually go in and approve a comment that was flagged or vice versa. This turned out to be a very handy tool and saves me a bunch of time.

Technorati Tags: The next plugin I checked out was a Technorati Tags plugin. Have you ever visited the Technorati website? http://technorati.com/ You can find blog enteries based on tag words. Its a great way to find new blogs based on a few keywords. Technorati is also a great way to get your blog out there more! Being able to tag words in your enteries to appear in Technorati searches is a neat idea right? It’s not hard either! This plugin called Simple Tags is a easy to use plugin that lets you create tags in your entries: http://www.broobles.com/scripts/simpletags/ When you put install this plugin and tag words the keywords show up at the bottom of your entry as well and let your reader search Technorati for more blog entries with the same tags. To create keywords or “tags” you tag words with brackets as illustrated on the Simple Tags site I liked to above. Simple enough?

AdSense: How about earning some money from your blog? You’ve seen it elsewhere: AdSense. AdSense is a Google advertising system that lets you place little text or graphic ads on your website. When a person clicks on the ad you get money. An example can be seen here: http://momsfavoritestuff.com You have a few ways of adding Google AdSense code. You can add it to your template directly or you can add it using a plugin. The plugin method is easier to manage and change out the code. The plugin used on Mom’s Favorite Stuff blog is this one: http://www.acmetech.com/blog/adsense-deluxe/ After loading the plugin all you have to do is add a plugin php tag to your template where you want the adds to show up and the rest is manageable through the plugin manager in your admin. With this plugin you can also include adds directly in your posts. But remember, Google only allows 3 ad blocks per page so some will disappear if you add more than that.

There are endless plugins but I’m going to leave you at those 3 for now. Do you have a plugin you’d like to share? Post it in the comments and I will check it out!

Technorati Tags: Plugins, WordPress, SPAM, Technorati, Simple Tags, AdSense

(1) comment

WordPress Themes: Starting Your Custom Theme

Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme

Do you want to create a custom WordPress template? Don’t know where to start? I’ll attempt to de-code the WordPress layout in this series of tutorials to help you learn how to create your own unique layout. While doing these templates I’m assuming you already have WordPress installed on your own host and know the basics of how to upload. Learning how to create a template isn’t hard, but you’ll have an easier time if you already have a grasp of the basics of HTML and designing with CSS and divs. Before we go any further I will warn you that using FrontPage is not ideal and I can’t predict how this will work with Frontpage. If you want to use a editor stick to Dreamweaver or other comprable editor. Otherwise you can create all of the following in a basic text editor like notepad.

Need a recap on these basic skills?

View my FTP guide here: FTP Guide

View my HTML crash course here: HTML Guide

First things first, you need to know what files you’ll be working with. One template is compiled of several files, like puzzle pieces.

Read More…

Technorati Tags: Custom Theme, WordPress template, WordPress

(9) comments

WordPress Themes: Creating the Footer

Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme

This is part of the WordPress Themes tutorial.
Now that your header is finished you’ll want to close your page with the footer. Open the footer.php file. The footer runs along the very bottom of your blog and holds any copyright information. You can be creative in this area too! Add a div and format it if you want to have it span the bottom or to give it a specific style. You can add another list of your pages here if you like, contact information or anything that you think fits your blog. After you have added any footer information you’d like to appear you need to close out any divs you opened at the beginning that were wrapping your page. (table and cell tags if that’s what you are using).

A couple tags you may want to include in your footer are:

<?php echo date("Y")." "; bloginfo(’name’); ?>

The above tag puts in the name of your blog with the year in front of it. Good for automatically including your blog information in the copyright.

<?php wp_loginout(); ?>

The above tag is the login and log out feature. You can log in to make changes and your readers can login to leave comments.

Then add this tag followed by the body tag:

<?php do_action(’wp_footer’); ?> </body>

Save your footer.php file and continue to WordPress Themes: Creating the Loop

Technorati Tags: Custom Theme, WordPress Theme, tutorial

(1) comment

WordPress: Creating the Loop

Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme
The loop is the part of your page that holds the content of your blog. Your posts and pages. It’s called a the loop because it loops repeatedly on the page, starting anew with each post. Make sence? Open theloop.php and we’ll get started!

Insert this code to start the loop:

<?php if (have_posts()) { ?>

Now we’ll start actually grabbing the posts. Anything you put after this will be repeated in every post. Lines, borders etc as well.

<?php while (have_posts()) { the_post(); ?>

Now we’ll start formatting what’s included in the posts. The example tags I give are just basics. You can change these to use different formats and move them around to suite your needs. The links provide more examples and uses of each tag.

<?php the_title(’<h3>’, ‘</h3>’); ?> Title, this tag inserts the title of the post. This example wraps the title in header tags.

<?php the_time(’F j, Y’); ?> at <?php the_time(’g:i a’); ?> Time/Date, this tag gives the time and date the post was added. Shown are 2 tags that combine the date and time. You can use these both, only one or another combination.

<?php the_author_nickname(); ?> Author tag, this tag includes who the post was made by. The shown tag includes the author’s display name. There are several different author tags including ones that show first name, last name or link to the author’s website or other posts. See link for more information.

<?php the_category(’, ‘); ?> Category, this tag displays the categories that the post is attached to.

<?php edit_post_link(’edit’); ?> Edit post, this tag appears only to the administrator/author of the post.

<?php the_content("more"); ?> Content, this displays the content of the post. The "more" between is what displays if you use the text displayed when the <!–more–> Quicktag is used. The quick tag is used when creating the post. The author inserts the tag <!–more–> and the text after that is excluded from teh post leaving a link that the reader clicks to view the full post.

<?php comments_popup_link(’No comments yet’, ‘1 comment so far’,
‘% comments so far’, ‘comments-link’, ‘Comments are off for this post’); ?> Comments, this tag shows the number of comments and allows the reader to click to add a comment as well.

<?php the_permalink(); ?> Permalink, this tag displays the permalink for your post. You can combine this to display the full URL or to a text link.

<!– <?php trackback_rdf(); ?> –>
Trackback, this tag shows the RDF information to track back to your post when posted elsewhere. Also known as Pingback.

These are just a smidge of the possibilities. You can find more tags on the WordPress Template Tag list . Now that your loop is complete you’ll want to close the loop. Add these tags to the end and save your file.

<?php } ?>
<?php } else { ?>
<?php } ?>

Here is an example of a finished loop. This loop layout is show on the Web Savvy Mama blog.

<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>

<?php the_title(’<h3>’, ‘</h3>’); ?>
Posted: <?php the_time(’F j, Y’); ?> at <?php the_time(’g:i a’); ?> | by <a href="<?php the_author_url(); ?>"><?php the_author_firstname(); ?></a> <br>
Filed under: <?php the_category(’, ‘); ?>
<?php edit_post_link(’edit’); ?>
<?php the_content("more"); ?>
<?php comments_popup_link(’No comments yet’, ‘1 comment so far’,
‘% comments so far’, ‘comments-link’, ‘Comments are
off for this post’); ?>
| <a href="<?php the_permalink(); ?>">permalink</a>
<p><img src="http://websavvymama.com/blog/wp-content/themes/websavvy/images/blogline.gif" />
<!– <?php trackback_rdf(); ?> –>
<?php } ?>
<?php posts_nav_link(); ?>

<?php } else { ?>
<?php } ?>

Continue on to WordPress Themes: Creating the Sidebar

Technorati Tags: Custom Theme

(3) comments

WordPress Themes: Creating the Sidebar

Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme

The side bar is not a required file but it’s a usefull one. The sidebar will display vertically down one either side of your blog next to the loop. This is where you’ll want to put the search feature, category lists and any other information you choose. To select which tags you want to include on your side bar visit the <a href="http://codex.wordpress.org/Template_Tags" target="_blank">WordPress Template Tag list </a>. I’ll list the tags that I use and find helpful. Remember pages, archives, categories etc are outputted as lists and will accept list formatting and css styling. These all go in sidebar.php file.

<?php wp_get_archives(’type=monthly’); ?> Archives, this tag displays a list of archived posts by month. The link provide gives other options for archive display.

<?php wp_list_cats(’sort_column=name&list=1&hide_empty=1′); ?> Categories, this tag displays categories on your blog.

<?php wp_get_archives(’type=postbypost&limit=5′); ?> Latest entries, this displays the latest entries to the blog. The number shown can be edited. This is the same as archives but given a different property

<form method="get" id="searchform" action="<?php echo $_SERVER[’PHP_SELF’]; ?>">
<b>Search</b><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" />
</form> Search box, this allows readers to search your site/post.
Link list, this tag lists your links and the category they are located in.

You can also add more information such as links to your RSS feeds, button banners etc. After you are finished adding content to your sidebar save your file. Continue to WordPress Themes: Adding Comments

(4) comments

WordPress Themes: Adding Comments

Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme

We are almost done! Next you need to include the files to handle your comment form so visitors can reply to your posts. No need to do editing here unless you really want to.

Open comments.php and copy and paste the following and then save the file.

<?php // Do not delete these lines
if (’comments.php’ == basename($_SERVER[’SCRIPT_FILENAME’]))
die (’Please do not load this page directly. Thanks!’);

if (!empty($post->post_password)) { // if there’s a password
if ($_COOKIE[’wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
?>

<p class="nocomments">This post is password protected. Enter the password to view comments.<p>

<?php
return;
}
}

/* This variable is for alternating comment background */
$oddcomment = ‘alt’;
?>

<!– You can start editing here. –>
<div id="comments">
<?php if ($comments) : ?>
<p><b><?php comments_number(’No Responses’, ‘One Response’, ‘% Responses’ );?> to “<?php the_title(); ?>”</b></p>

<ol class="commentlist">

<?php foreach ($comments as $comment) : ?>

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />

<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date(’F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(’e',”,”); ?></small>

<?php comment_text() ?>

</li>

<?php /* Changes every other comment to a different class */
if (’alt’ == $oddcomment) $oddcomment = ”;
else $oddcomment = ‘alt’;
?>

<?php endforeach; /* end for each comment */ ?>

</ol>

<?php else : // this is displayed if there are no comments so far ?>

<?php if (’open’ == $post->comment_status) : ?>
<!– If comments are open, but there are no comments. –>

<?php else : // comments are closed ?>
<!– If comments are closed. –>
<p class="nocomments">Comments are closed.</p>

<?php endif; ?>
<?php endif; ?>

<?php if (’open’ == $post->comment_status) : ?>

<h3 id="respond">Leave a Reply</h3>

<?php if ( get_option(’comment_registration’) && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option(’siteurl’); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>

<form action="<?php echo get_option(’siteurl’); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<br>Logged in as <a href="<?php echo get_option(’siteurl’); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option(’siteurl’); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a>

<?php else : ?>

<br><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label>

<br><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label>

<br><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label>

<?php endif; ?>

<!–<p><small><strong>XHTML:</strong> You can use these tags: <?php echo allowed_tags(); ?></small></p>–>

<p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action(’comment_form’, $post->ID); ?>

</form>
</div>

<?php endif; // If registration required and not logged in ?>

<?php endif; // if you delete this the sky will fall on your head ?>

Open comments-popup.php and copy and paste the following code then save the file:

<?php
/* Don’t remove these lines. */
add_filter(’comment_text’, ‘popuplinks’);
foreach ($posts as $post) { start_wp();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo get_settings(’blogname’); ?> - Comments on <?php the_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo(’html_type’); ?>; charset=<?php echo get_settings(’blog_charset’); ?>" />
<style type="text/css" media="screen">
@import url( <?php bloginfo(’stylesheet_url’); ?> );
body { margin: 3px; }
</style>

</head>
<body id="commentspopup">

<h1 id="header"><a href="" title="<?php echo get_settings(’blogname’); ?>"><?php echo get_settings(’blogname’); ?></a></h1>

<h2 id="comments">Comments</h2>

<p><a href="<?php echo get_settings(’siteurl’); ?>/wp-commentsrss2.php?p=<?php echo $post->ID; ?>"><abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.</a></p>

<?php if (’open’ == $post->ping_status) { ?>
<p>The <acronym title="Uniform Resource Identifier">URI</acronym> to TrackBack this entry is: <em><?php trackback_url() ?></em></p>
<?php } ?>

<?php
// this line is WordPress’ motor, do not delete it.
$commenter = wp_get_current_commenter();
extract($commenter);
$comments = get_approved_comments($id);
$post = get_post($id);
if (!empty($post->post_password) && $_COOKIE[’wp-postpass_’. COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
echo(get_the_password_form());
} else { ?>

<?php if ($comments) { ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) { ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>
<p><cite><?php comment_type(’Comment’, ‘Trackback’, ‘Pingback’); ?> by <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite></p>
</li>

<?php } // end for each comment ?>
</ol>
<?php } else { // this is displayed if there are no comments so far ?>
<p>No comments yet.</p>
<?php } ?>

<?php if (’open’ == $post->comment_status) { ?>
<h2>Leave a comment</h2>
<p>Line and paragraph breaks automatic, e-mail address never displayed, <acronym title="Hypertext Markup Language">HTML</acronym> allowed: <code><?php echo allowed_tags(); ?></code></p>

<form action="<?php echo get_settings(’siteurl’); ?>/wp-comments-post.php" method="post" id="commentform">
<p>
<input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" />
<label for="author">Name</label>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<input type="hidden" name="redirect_to" value="<?php echo wp_specialchars($_SERVER["REQUEST_URI"]); ?>" />
</p>

<p>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" />
<label for="email">E-mail</label>
</p>

<p>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" />
<label for="url"><acronym title="Uniform Resource Identifier">URI</acronym></label>
</p>

<p>
<label for="comment">Your Comment</label>
<br />
<textarea name="comment" id="comment" cols="70" rows="4" tabindex="4"></textarea>
</p>

<p>
<input name="submit" type="submit" tabindex="5" value="Say It!" />
</p>
<?php do_action(’comment_form’, $post->ID); ?>
</form>
<?php } else { // comments are closed ?>
<p>Sorry, the comment form is closed at this time.</p>
<?php }
} // end password check
?>

<div><strong><a href="javascript:window.close()">Close this window.</a></strong></div>

<?php // if you delete this the sky will fall on your head
}
?>

<!– // this is just the end of the motor - don’t touch that line either –>
<?php //} ?>
<p class="credit"><?php timer_stop(1); ?> <cite>Powered by <a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform"><strong>Wordpress</strong></a></cite></p>
<?php // Seen at http://www.mijnkopthee.nl/log2/archive/2003/05/28/esc(18) ?>
<script type="text/javascript">
<!–
document.onkeypress = function esc(e) {
if(typeof(e) == "undefined") { e=event; }
if (e.keyCode == 27) { self.close(); }
}
// –>
</script>
</body>
</html>

Add this to your style.css:

/* Begin comments*/
#commentform input {
width: 100px;
padding: 2px;
margin: 5px 5px 1px ;
}

#commentform textarea {
width: 500px;
padding: 2px;
}

#commentform #submit {
margin: 0;
float: left;
}

.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: left;
}

.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

.commentlist p {
margin: 10px 5px 10px 0;
width: 500px;

}

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: left;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */

Almost done! Continue onto: WordPress Themes: Finishing Your Custom Theme.

(9) comments