Plugins can often slow down WordPress’ load times so it best to build into the theme if possible. This is why we are going to run through a quick tutorial were we will be adding a like button to a WordPress theme.

Getting The Like Button Code

The first thing that you are going to need is the like button code itself. I will be providing it for you but if you would like to go and get it yourself there are some more customization options by going to the Facebook developer page.

1
2
3

<iframe src="http://www.facebook.com/widgets/like.php?href=http://skorg.org/"
scrolling="no" frameborder="0"
style="border:none; width:480px; height:80px"></iframe>

Now we need to find a good place for our like button to go. I would recommend placing it below the post so once the user has completed reading through the article they can then like it. If you put it above there is a chance that they are going to miss the button and just move on.

The button is going to be added to the bottom of the post on the single.php page that you can find in your theme directory. Just go to ‘/wp-content/themes/your-theme-name/single.php’.

Now we will simply add the code in and tweak a couple of things so it will work on each page.

1
2
3

<iframe src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink()?>"
scrolling="no" frameborder="0"
style="border:none; width:480px; height:80px"></iframe>

Adding the Code to Your Theme

The code will be inserted and your single page should look something more like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="clear"></div>   
	<div class="meta-entry clear">
		<?php
			//full post
        	the_content(__('read more...', 'skorg-cwd1'));
        ?>
        <iframe src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink()?>"
        scrolling="no" frameborder="0"
        style="border:none; width:480px; height:80px"></iframe>
 
       	<?php edit_post_link(__('Edit!', 'skorg-cwd1')); ?>
        <?php wp_link_pages(); ?>
    </div><!--end entry-->
	<div class="post-footer">

Notes

When inserting the post just look for something call the_content() then simply past the code bellow this and your like button should work without a flaw.

Related posts:

1. Google’s Plus 1 Button Integration And Options
2. Creating multiple sidebar menus in wordpress
3. Creating a top button

In this tutorial I won’t just be making a sidebar menu, but three additional menus that will be placed side by side in the footer. Unfortunately the code for this is not as easy as it may seem. The possibility of creating the sidebars through only your footer.php and sidebar.php is not going to happen. Fortunately the code is very simple and involves a lot of copy and pasting with a couple modifications.

For this tutorial I will be using wordpress 2.9.2 (currently the latest release)

When creating multiple “sidebars” You only need to do two things. The first thing is to edit the functions.php page, and the second is to edit the HTML where the sidebar/dynamic menu will be placed.

The first thing that we will be doing is opening our functions.php page. The code for one sidebar should look like this:

1
2
3
4
5
6
7
8
9
10

if ( function_exists('register_sidebar_widget') ){
    register_sidebar(array(
        'name'=> __('Sidebar', 'cwj'),
        'id' => 'normal_sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}

The next thing we will need to do is modify this code so we can have four dynamic menus throughout our WordPress theme. We will need to copy and paste the array and change out the name and the ID to something new and exciting. Because the menus will be placed in my footer I will be calling them “Footer1″ etc for each menu. The ID can be anything as long as it is unique to that specific menu. If you have two menus with the same ID you will only be able to add widgets to the last referenced menu.

The code should now look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

if ( function_exists('register_sidebar_widget') ){
    register_sidebar(array(
        'name'=> __('Sidebar', 'CJDesign-dark1'),
        'id' => 'normal_sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer1', 'CJDesign-dark1'),
        'id' => 'col_sidebar1',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer2', 'CJDesign-dark1'),
        'id' => 'col_sidebar2',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name'=> __('Footer3', 'CJDesign-dark1'),
        'id' => 'col_sidebar3',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}

The next stage in this tutorial is to quickly and easily insert the line of code to display your newly created dynamic menus. Just place this into the HTML where you would like it to be.

1
2

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) : ?>
<?php endif; ?>

You simply need to replace where I have Footer3 with the name of the sidebar that you previously created with the function.

The sidebar now looks as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1') ) : ?>
  		<?php endif; ?>
    </ul>
</div>
<div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2') ) : ?>
        <?php endif; ?>
    </ul>
</div>
<div class="footer-col">
	<ul>
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) : ?>
        <?php endif; ?>
    </ul>
</div>

And the widgets can be modified through the WordPress widget page.

And the final product.

Related posts:

1. Creating user input with menus in java
2. Adding The ‘Like’ Button to WordPress
3. PHP: Array Of Bad Words

For most standard WordPress themes you are stuck with a boring text on the bottom of the screen with a float left and right property. This simple float looks boring however it is a simple solution for going from page to page.

The below image is what my personal blog used to have for a page navigation. This was to simple for what I wanted which made me want to change it to fit the rest of the page style. The solution was a work through of the CSS requiring a little CSS3 to make the borders rounded.

The final result looks as follows:

The first thing we are going to need to do is open up the style.css and the index.php inside of the theme you are intending to modify.

WordPress Root -> wp-content -> themes -> theme_name

Once you have opened up the two files, refer to the index.php and scroll down past the post loops to get to your code that checks for posts and allows you to go forward and backwards in post history. The code should look as follows:

<div>
<h5 class=”float-right”>
<?php previous_posts_link(‘Newer Entries &rarr;’) ?>
</h5>
<h5 class=”float-left”>
<?php next_posts_link(‘&larr; Older Entries’) ?>
</h5>
<div></div>
</div>

As you can see there is a float class above which is in our css file as:

.float-right {

float:right;

}

We could change the float class to have a background and a border but that would change everything that uses the float class. In order to change this we are going to have to create new classes and change the index code. For this I will be changing the index code to “post_new_entries” and “post_old_entries.”

The “index.php” will now look something like this:

<div>
<h5 class=”post_new_entries”>
<?php previous_posts_link(‘Newer Entries &rarr;’) ?>
</h5>
<h5 class=”post_old_entries”>
<?php next_posts_link(‘&larr; Older Entries’) ?>
</h5>
<div></div>
</div>

The final thing to do in this modification is to create the classes inside of the “style.css” file. The first thing that is required for the modification is for us to make them float to their designated sides just like the previous floats from before.

.post_old_entries {
float:left;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
}

The rest of the code is fully customizable and up to you. There is always the option of adding hovers and link colors as well as paddings, backgrounds and borders. The code that is currently used for code with design is as follows:

.post_old_entries {
float:left;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
margin-left:-31px;
padding:5px 15px;
background: #f2f2f2;
border: 1px solid #ddd;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
.post_old_entries a{
color:#666666;
}
.post_old_entries a:hover {
color:#333333;
}
.post_new_entries {
float:right;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
margin-right:-31px;
padding:5px 15px;
background: #f2f2f2;
border: 1px solid #ddd;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
.post_new_entries a {
color:#666666;
}
.post_new_entries a:hover {
color:#333333;
}

Best of luck with your WordPress modifications.

Related posts:

1. Making it that much better with CSS3
2. Creating a Single Page login – Design View
3. Remove images and increase load times with CSS3

Before I get to in depth I would like to quickly revise what I will be getting into. There are three main things your users need for your community go grow. The first and foremost is allowing your users to contribute, the second is community rank and social status. The third and final topic is generating something to get their attention.

contribution

Allowing users to contribute is really needed, not only does it increase the amount of data in your site but it will give your users more things to do and or read when they are visiting your site. The more content that your site consists of will increase your page rank on larger search engines. User contributions also adds to another main point which is user rank and social status and it does this by giving you (the admin) the ability to decide who is a good enough poster for a promotion, the ability to write a blog post or become a moderator etc.. One of the biggest reasons to allow user contributions is that it gives potential users something to go through and the possibility to become a part of something.

Social status and rank

So now that your users are given the ability to contribute you may now proceed to social status and member rank. Everyone wants to feel important and this is your way to give something to the community. Whether you name the points cookies or Kudos (Reference to Dream.In.Code) you should have it originally named or based on the theme of your site. How you base the point system is entirely up to you but keep in mind that you will be receiving some rather large numbers if you decide to hand out 5 points per post. The method that I prefer to give out  is 0.1 per post and 1 point for something larger. (ie. Discussion starter, Tutorial, Popular Blog Post) Rewards and bonus’ are a nice way to reward members also try giving out ranks and titles to the members of your community, they love that kind of thing. As users progress through the ranks they should be able to progress through the community and unlock new abilities such as moderate posts, mark as spam, rate content and try making a verified quality post area on the main page or a spotlight post section where top contributors that deliver quality posts have a place to shine.

Quality of content

The final thing needed to create a community is something to catch new users attention. This can be anything from quality posts to contests to freebies/giveaways. Another thing that gets new users attention are some sleek looking graphics  and a well thought out layout. For example one of the highest density click populations on a blog is the top of the right side bar. This is a good place to place internal site links to catch the eyes of people that are interested in similar topics. It is better to promote your own site and your own content rather then to have space wasted for advertisements, especially if your site doesn’t have a lot of visitors.

Now that you know the basic concepts of how to draw in users, get them to stay and support your community, there are only a few more things needed. The first is user input, this can drastically change the way you think about layouts and the content that your site provides. The second is search engine optimization, this will actually bring people into your site from the search engines. The final thing needed is a good idea. Your site isn’t going to get off the ground if it doesn’t have a good idea and motivated people behind it.

Caleb Jonasson

Related posts:

1. Stop Spammers From Attacking Your WP Blog
2. Creating a Single Page login – Design View
3. Pre planning websites

Introduction

More and more users on WordPress are getting spammed and now I have a few tips on how to prevent this from happening to you. There are two general ways that people have their blogs set up one is more reliable then the other. the first setup is where users don’t need to log in and all that is provided is a username, email and a website is optional. The second setup requires the reader to register prior to submitting a comment on anything. This is the more secure method to choose from.

Setup Number One

The first setup has some flaws but the spammers can be prevented. WordPress is setup so that once a poster has been approved through its IP address they will be accepted in the system. When they are accepted the users can post without being manually accepted. Because of this you should hold the comments for moderation for up to two days. There are some signs as to suspicious user activity these signs consist of posts that have a site end with anything other then the regular .com, .org etc. Also if the email has a lot of one letter repeating then it is most likely a spammer. The reason you want to wait multiple days before accepting posts from a user is so you can check the IP address coming from multiple posters. Generally if someone posts multiple times on the same blog post and they are not contributing anything to a discussion they are spammers who picked up on a permanent link and are monitoring the posts to see if they have gotten through just by posting and being accepted into the system.

The Second Setup

In this setup your users must register to your blog and fill out their username and password. It is much more secure because the spammers are more likely going to just find another blog rather then waste their time trying to get a post worthy account. I recommend going with this setup if you have something to offer regular users, However it may be best to keep the first setup until your community begins to grow. Without a community you are just going to have a blog with no discussions and/or comments.

Stop The Spam

There are some methods that you can use to prevent spam from happening. The first best thing that you can do is install Akismet. This is a WordPress plugin that checks your comments against the Akismet web service. This will check to see if the comment is spam or not. The only downfall is that you will require a WordPress API key. These are easy enough to get your hands, you just need to visit the WordPress site. Another method is to open up your admin page, locate the settings area on the left sidebar, click discussion. Now fill in the comment moderation as you see fit. On blacklist I have set the yandex.ru mail service because the only page requests from Russia are all spam related. Within the moderation section you should enter in all of the bad words you can think of. Another way to stop spam is to install yet another plugin. Math Comment Spam is a plugin that requires the user to answer a simple math equation before posting a comment. This stops a lot of spammers in their tracks but there are some that do get by.  This plugin is a little annoying to install because it requires that you modify the comment or post page within your theme. There are step by step instructions on achieving this. The final thing that you can do to prevent spam is moderate the comments properly and use your best judgement. Don’t immediately accept positive feedback just because it is there. This is how spammers work. They gain your trust and then fill your database up with spam.

No related posts.

There are many ways to go about creating a single page login. There are also many different styles that you can use when creating these logins. Before you start it is a good idea to have a good idea of what you are creating, this way you can always use it as a template in case things start to go wrong.

The design I would like to create is going to consist of the title of the site, a quick description and the forum to login with. For this tutorial I will be creating the login so it will look similar to WordPress’ login screen except it will be off center and there will be no header. These types of login pages are great if the login information is in its own folder or you have a site that requires users to login prior to seeing any of the information.

The first step to creating a login that looks good knowing where the content will be placed. Because I plan on having my content in the middle area of the screen I am going to have to rely on percent based margin properties. After I get all of the padding and margin properties sorted out It will then be time to create a functional and easily useable text.

<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Login || Code With Design</title>
<link href=”main.css” rel=”stylesheet” type=”text/css” />
</head>

<body>

<div id=”container”>
<div id=”mainContent”>
</div>
</div>
</body>
</html>

By using the code above you will create the base structure for the design. It contains all of the div tags required to line this all up later with the CSS file. Now all we need to do is create a functioning form that users can enter their password and username.

<h1>Code With Design</h1>
<form id=”form1″ name=”form1″ method=”post” action=”somepage.php”>
<table width=”375″>
<tr>
<td width=”142″><label>
<div align=”right”>Username:</div>
</label></td>
<td width=”162″><input type=”text” name=”username” id=”username” /></td>
<td width=”55″>&nbsp;</td>
</tr>
<tr>
<td><label>
<div align=”right”>Password:</div>
</label></td>
<td><input type=”password” name=”password” id=”password” /></td>
<td><input type=”submit” name=”login” id=”login” value=”Login” /></td>
</tr>
</table>
<h5><a href=”somelink.php”>Lost your password?</a></h5>
<label></label>
</form>

If you read over the information above you will notice that the information in the tables has been moved around with the tables and not with the CSS sheet. Whatever method you use is up to you, Normally its safer to go with the CSS method but at the time of creating this login I wanted to keep the CSS clean for creating more login pages.

@charset “utf-8″;
body {
font: 100% Plantagenet Cherokee;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
body a {
text-decoration:none;
color:#333333;
}
body a:hover {
text-decoration:none;
color:#666666;
}
.oneColElsCtr #container {
width: 100%;
margin: 0 auto;
text-align: left;
}
.oneColElsCtr #mainContent {
padding: 3px 20px;
margin-top:20%;
margin-left:20%;
margin-bottom: 10%;
width:400px;
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.oneColElsCtr #mainContent h1 {
background: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.oneColElsCtr #mainContent input {
font-family: “Plantagenet Cherokee”;
background: #e4edfe;
border: 2px #333 solid;
}

Now we are going to go through the CSS file that was entered above. The body is pretty standard here and doesn’t have a whole lot to do with the placement of the login container. The placement of the login container is built up within the one column elastic container main content. If you look at the code you will see that there is padding so the information is not touching the outside of the div. There is also a lot of margins created here and as mentioned above its measurement is percent based. This will help the login div stay within the central areas of the page. There is also a set width, this is so the div doesn’t extend all the way to the right.

.oneColElsCtr #mainContent {
padding: 3px 20px;
margin-top:20%;
margin-left:20%;
margin-bottom: 10%;
width:400px;
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

The next thing on the page that you will notice is how the content is wrapped in a round border. This is because of the following code. It is a simple way to make the content rounded inside of your browser. It is also possible to make a border with this style method, however the look of this login is flat so a boarder is not going to be needed.

background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

The third and final thing that you will notice is how the login box contains the same font as the rest of the page and the button does not look like a normal forum button. This is because of the following code in the CSS file.

.oneColElsCtr #mainContent input {
font-family: “Plantagenet Cherokee”;
background: #e4edfe;
border: 2px #333 solid;
}

It forces the input properties within the MainContent to have a background that matches that of the rest of the page and also creates square borders around the button and input text lines.

Here are the final results

Caleb Jonasson

Related posts:

1. Modifying next and previous posts
2. Making it that much better with CSS3
3. Remove images and increase load times with CSS3