My WordPress Tutorial

Posts Tagged ‘Tutorial’

When I logged into Facebook this morning, I was greeted with the picture to the left. I am sure that many of you have already seen this. I am also sure that many started out the same way I did; looking for the path to add the ‘like’ button to your website. With that said, I decided to write a post explaining how to install this little tool to your website.

Before I begin, I thought I would share what this button can and will do for you. If you look to the right, you will see this button in action on our real estate network. As you can see at this point (originally published 4-22-2010), not many have used it. Over time, the number will grow and people will be able to share our network with their facebook friends a lot easier. All one needs to do is to click the ‘Like’ button once, and it adds them. Below is an excerpt from the facebook page explaining this a little better:

The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.

Now that we have that out of the way, let’s take a look at how we add this neat little tool to our own websites. If you look to the immediate left, you will see the picture of the Like Button Generator. As you can see, I have filled out the necessary fields to create this button for Positive Real Estate Professionals’ main page. Now, in theory, I could do this for each and every page that I wanted to on PREP, but at some point, you run into overkill.

Once all the pertinent information is entered, all you need to do is click on ‘get code’. When that is done, it will generate 2 codes; the first is an iFrame code and the second is a JavaScript code. Once you have selected which code you want to use, all you need to do is add this as a ‘Text’ or ‘HTML’ widget in sidebar of your website. If you do not have access to do that, then contact your webmaster and they can instruct you more on this subject. In some cases this can require coding added to the theme itself or some adjustments to certain parameters that can only be done by an admin or webmaster.

OK, now that we have the why and how to out of the way, let’s get down to the where. I thought long and hard about how I could help you get this tool on your site in the easiest way. I decided that I would add the direct link to the Facebook Developers social media ‘Like Button’ plugin page; http://developers.facebook.com/docs/reference/plugins/like I hope that you find this post useful.

Over my 2 plus years of blogging, I have used many platforms. I have to say that WordPress has to be one of my favorites simply because of it’s ability to allow an author to write posts and then schedule them out to be posted at a later date. In this tutorial we will discuss how to do just that. Accomplishing this is much easier than you might think. I have added a couple of pictures to help you with your learning.

In the first picture to the left, you will see two arrows. The first arrow is red and it is pointing to the section that says ‘Publish Immediately’. To the right of that verbiage will be a section that says ‘Edit’. Click on it and it will open up an option to pick the date and time. Our second arrow, the green one, points to this section. Once you chose the date and time, simply click ‘OK’. Now our first step is completely done.

To finish scheduling a post, write all of your article. Once you are done with that portion, you are then ready to schedule your post. This might be the easiest of the steps as all you need to do is click on the word ‘Schedule’ that our purple arrow in the image to the right points to.

In closing, that is all you need to do to be able to schedule a post. Now you can go on vacation and appear to still be posting on a regular basis.

***There have been changes to the widget discussed in this tutorial since the original publication (9-02-2009) of this tutorial. I have updated the tutorial to reflect these changes. Yellow font indicates where changes have been made. I have used the strike thru to indicate procedures that no longer apply. Also note that some images have been changed or deleted to reflect the changes to the widget.***

In this tutorial you will learn what tags are and how to use them. If you consider the amount of information on the internet it is no surprise that there must be a way to categorize that information for future reference by web surfers who are looking for it. The same holds true for information contained on your site.

To use tags you begin on the same screen where you write a post. After writing a post look to the right of the box where you have just typed the body of your post. You will see a white box labeled ‘Tags’ (notice the RED arrow in the illustration to the right). This is where you enter the tags which accurately describe the content of your post (see the GREEN box in the illustration to the right). Once you have added your tags they will appear under the header entitled ‘Tags used on this post:’ (inside the PURPLE box in the illustration to the right). If your post is about some aspect of the ‘$8000 Tax Credit’ then that phrase would be a good tag. You do not want to use non-relevant tags as visitors might get upset and/or frustrated if they click on ‘$8000 Tax Credit’ and the post(s) which are displayed are not directly related to that tag.

A wonderful tool that is available to help visitors easily use the tags you have entered is the Tag Cloud Widget. This widget is accessed via the dashboard; YOU MUST BE LOGGED IN. From the Dashboard this is the path:

Dashboard>Appearance>Widgets>Tag Cloud

If your tag cloud widget is not active and you want to use it, look for the ‘Appearance’ header on the left side of your Dashboard. If you hover over ‘Appearance’ a GRAY dropdown arrow will appear; click on this arrow. You then click on WIDGETS to open the list of widgets widget page. Simply add the ‘Tag Cloud’ widget to your sidebar by clicking ‘Add’ dragging it to the desired sidebar.

Tags which accurately relate to the content of your post are a great organizational tool. This organization can make your site much more visitor friendly. Imagine for a minute that you are the visitor and you arrive at a webpage looking for information on the ‘$8000 Tax Credit.’ If the site owner uses accurate tags then a visitor can simply click on the topic they are looking for in the tag cloud to display all of the posts that are tagged with that term! See the tag cloud to the right for an example of how a well utilized tag cloud might look.

***There have been changes to the widget discussed in this tutorial since the original publication (August 13th, 2009) of this tutorial. I have updated the tutorial to reflect these changes. Yellow font indicates where changes have been made. I have used the strike thru to indicate procedures that no longer apply. Also note that the first two images have changed to reflect the changes to the widget.***

One of the most powerful developments on the internet for both business and personal connections is the emergence and widespread use of social media outlets. I would surmise that most internet users and even many people who do not use the internet have heard of at least one social media network; even if they do not realize it. MySpace? Twitter? Facebook? One of these three will generally ring a bell with most people as they are mentioned often on television, the radio, and in print media. In addition to these three social medias there are others, lots of others.

As a PREP member you have access to a pre-loaded widget from your Dashboard that can easily allow visitors to your site to connect with you via numerous social medias. This tutorial is going to give you step by step instructions (with illustrations) on how to:

1. access this widget
2. enter your social media usernames
3. place this widget on your sidebar

To begin with you will need to be logged into your Dashboard. From your dashboard, here is the path to access the widget:

Dashboard > Settings > Social Media Page (SMP)

As you can see from the graphic to the left, the Widget named ‘Social Media Page’ is where you need to begin. Locate the ‘Setting’ tab on the left hand side of your dashboard. When you hover over the settings tab a grey arrow will appear next to the tab name; click this arrow. When you have clicked this grey arrow a dropdown with numerous options will appear. In this list of dropdowns you will need to locate ‘Social Media Page.’ This is the widget we will be working with. In the image to the left I have placed a red box around the widget with a red arrow pointing to it. Click on ‘Social Media Page’ to begin working with this widget. Follow the directions on the image to the left.

When you click on ‘Add profile to list‘ the image to below  will appear on your dashboard:

From this point you fill in your Username/User ID for each of the social medias that you belong to and that you would like to utilize to easily connect with visitors to your site. Be sure that once you have filled in this information that you click ‘Update Profiles & Options’ at the bottom of the page to save the information you have entered. WARNING: If you do not click update the info you entered will not be saved and you will have to re-enter it. Now you are ready to place the widget on your sidebar.

To place the completed Widget on your sidebar, here is the path:

Dashboard > Appearance > Widgets > Add

On left hand side of your dashboard, locate the ‘Appearance’ tab. Just like you did with the ‘Settings’ tab above, hover over Appearance and a grey arrow will appear. Click this grey arrow to open up a dropdown. In this dropdown, locate ‘Widgets’ and click on it. I have placed a blue oval around widgets in the image to the right.

When you click on widgets, a new screen will open on your dashboard. From this screen, you can now add the completed ‘Social Media Page’ widget to your sidebar. Simply click ‘Add’ to place it in drag the widget to the sidebar you have selected. Once you have added it to your selected sidebar be sure to click ‘Save Changes’ or it will not be added.

That’s it! Now if you open your PREP site you will see the widget added to your sidebar with the various social media icons present and linked to your accounts. Just another way to connect with those potential clients.

Whether you hold classes, set up at local events, or simply want to promote an open house you are hosting then The Events Calendar is the perfect tool for you. This tool allows you to not only add the specifics of your event to both your blog and your calendar, if you enter a specific address it will embed a Google map in your post! If you have experienced underwhelming attendance at any of your events then this tool can help you to get more publicity and provide a map to help boost attendance. In addition to increasing attendance at your event, it will also help to garner more Google juice through the use of Google tools!

See the two images below for both visual and written directions on how to use this tool; clicking on either image will enlarge them. THIS TUTORIAL ASSUMES THAT YOU HAVE ALREADY INSTALLED THE EVENTS CALENDAR.

Lets face it, your website, be it for personal or professional use reflects who you and your business are. Most people realize this and in an effort to make it more accurately reflect who they are use the easily customized HTML coding intended for sidebars. Whether you are integrating a (Face Book Like button), local weather widget coding, or any of the numerous other features that can be added to your sidebar, the process is very easy and definitely helps to personalize your website. In this tutorial you will learn how to integrate this coding into your website’s sidebar.

For those of you who are visual learners there is a graphic at the bottom of this post that should be helpful. To view a larger image of this graphic simply click it!

Here is the path to add HTML coding to your sidebar:

Dashboard>Appearance>Widgets>Text>Sidebar (Drag to desired sidebar and add HTML coding)

1. Login to your Dashboard.
2. From your Dashboard hover over the Appearance tab. This will allow you to click on the gray dropdown arrow to the right of that tab.
3. Click this gray dropdown arrow.
4. You will now want to click on the Widgets tab (under Appearance). This will open up your widgets page.
5. Drag a Text widget to your Sidebar or open an existing Text widget in your Sidebar. IF YOU OPEN AN EXISTING TEXT WIDGET BE SURE NOT TO DELETE (OR REPLACE) THE EXISTING CODE UNLESS YOU WANT TO GET RID OF THE EXISTING WIDGET.
6. Insert the HTML coding and hit SAVE.

That is it! Visit your site to see the new widget you just added.

Many people are intimidated by the prospect of actually writing a blog post, writing does not come easily to everyone. The best advice I can give about actually writing is to write about what you know and what your site visitors will be looking for. Also, the more you write posts (a.k.a. blog), the easier the process will become.

Technology can also present a barrier to writing a post. On the actual subject of using the technology I can be more of a help. Below you will find a step by step guide on how to use the technology to write a post. Be sure to check out the image at the bottom of this post, if you click on it, a larger version of it will appear.

1. Login to your Dashboard.
2. From your site’s ‘Dashboard’ you can access the screen where you write a post in two ways (SEE THE RED IN THE IMAGE AT THE BOTTOM OF THIS POST). Under the ‘Posts’ header on the left hand side of your ‘Dashboard’ you can click on ‘Add New’ or you can click on ‘New Post’ in the upper righthand corner of your ‘Dashboard’.
3. You now want to enter the title of your post.
4. There are two different modes you can write your posts in: Visual (SEE THE GREEN IN THE IMAGE AT THE BOTTOM OF THIS POST) and HTML (SEE THE BLUE IN THE IMAGE AT THE BOTTOM OF THIS POST). The Visual mode is the the easiest to use, especially if you are not familiar with writing in HTML code. The visual mode allow you to insert media, change font size, use bullet points, and other options (SEE THE LARGE GREEN BOX IN THE IMAGE AT THE BOTTOM OF THIS POST). The HTML mode is great if you are familiar with writing in code. Select which writing mode you are most comfortable with by clicking on that tab.
5. Once you have selected your writing mode you can now write the body (content) of your post. *IF YOU NEED HELP INSERTING PICTURES, CLICK  HERE FOR A TUTORIAL*
6. Once you have written your post, you want to remember to use tags and categories (SEE THE BLACK BOX IN THE IMAGE AT THE BOTTOM OF THIS POST). *IF YOU NEED HELP WITH CATEGORIES (CLICK  HERE FOR A TUTORIAL) OR HELP WITH TAGS (CLICK HERE FOR A TUTORIAL)*
7. Once you have written your post, you can now ‘Preview’ it prior to publishing it (SEE THE PURPLE BOX IN THE IMAGE AT THE BOTTOM OF THIS POST).
8. Once satisfied with the post, you simply click the ‘Publish’ button (SEE THE PINK AND YELLOW IN THE IMAGE AT THE BOTTOM OF THIS POST).

Some of the best ideas for tutorials come from questions I get. A prime example is the following question:

What to do about comments I get (how do I know its not a competitor leaving a comment)?

This is an interesting question with several distinct parts. First I want to let you know how to access your comments. Remember all the magic happens from your Dashboard so be sure you are logged into your Dashboard. Once you are on your Dashboard locate the Comments header about halfway down the column on the left hand side (See the image to the right). Click on this header to open up your Edit Comments page.

The image below is an example of how your Edit Comments page will look (CLICK THE IMAGE TO SEE A LARGER SIZE). You will notice that there is a lot of information on this page. In the image below you can see information about the comment’s Author (RED ARROW). This information includes their name, URL, email, and IP address. To the right of that information you can read the author’s Comment (BLUE ARROW). When hovering over the comment you will see six options (GREEN ARROW) appear under the comment. These options allow you to

1. Approve the comment as it is written.
2. Spam the comment; marking it as spam will help the spam filter to recognize a comment from the same author in the future.
3. Delete the comment will simply delete it from your post entirely while allowing the author to leave comments in the future.
4. Edit the comment allows you to alter the comment. This is a very controversial action as many view it as censorship and/or changing a comment to such an extent that it no longer reflects the commentors original intent. IF YOU PLAN ON USING THIS FEATURE, LET ME CAUTION YOU TO USE IT VERY CAREFULLY; YOUR COMMENTOR MAY BECOME VERY INCENSED BY YOUR EDITING OF THEIR COMMENT AND WRITE NEGATIVELY ABOUT YOU OR YOUR BUSINESS ON THEIR SITE AS A RESULT! WITH THIS IN MIND, IT IS YOUR SITE AND YOU HAVE EVERY RIGHT TO DISALLOW COMMENTS YOU FEEL ARE INAPPROPRIATE!
5. Quick Edit – SEE ABOVE.
6. Reply to the comment allows you to respond to comments on your post.

Please excuse the “Wall of Words” but here are a couple of tips on separating the good comments from the spammy comments. Generic comments (i.e. “nice post”, “some good information”, or any blatant advertisement) that do not address anything in your post, especially when they have a link (called a backlink) to their URL can generally be regarded as spam comments.There are actually people who make their living by leaving thousands of these backlinking spam comments everyday; once they successfully leave one, they will then bombard you with MANY MORE. As you are given several options for each comment you can decide what you want to do with the comments you receive. You can always follow the link to see where it leads especially if you are more concerned about competitor comments rather than spam comments. Keep in mind that just because a competitor leaves a comment does not mean that they have malicious intent. I would be more concerned if a visitor left the same comment repeatedly or if their page does not have any type of system in place for you to comment on their posts. A perfect example of a spam comment that is merely trying to get a bit of a Google juice boost from your site can be seen in the graphic above. First, that particular author has left the same comment at least 3 times. Second if you visit the URL you can clearly see that this is a simple 4 page site with some basic contact information and no place for public commenting. As an FYI, I actually called and spoke with someone at the number listed and was informed that there was nobody by the name of William (name left in the comment) employed there. What I make of this is that the site owner, a web developer, or an SEO “expert” is using the services of a comment spamming operation to create backlinks. These types of tactics are considered “black hat” and will get the sites who use them penalized by the search engines regardless of whether the actual person whose business is being promoted by these tactics knows what is happening. Comment spam is a huge annoyance that is probably here to stay. You can combat it by marking these as spam. As an aside, the definition of exactly what comment spam is is very fluid. What I mean by this is that many site owners have their own idea of what spam is. Some site owners do not allow for any URL linking at all (click HERE to read why this is a bad idea) while others allow the spammers to have free reign over their comment section. Whether any links left in the comment section ever see the light of day is left up to you, the site owner. My general rule of thumb is that if a link in my comment section adds direct value to the topic of my post then I will generally allow it.

In this tutorial you will learn how to add pages and subpages to your website (NOTE: THIS METHOD SHOULD WORK FOR ALL WORDPRESS PLATFORMS WITH THE ONLY RESTRICTIONS BEING THOSE IMPOSED BY A PARTICULAR THEME; THEME DESIGN MUST ALLOW FOR MULTI-LEVEL PAGES.)

A page appears as a ‘tab’ in the navigation menu bar while a subpage appears as a ‘sub-tab.’ The main pages are the parents to the subpages. Please see the graphic below (if you click the graphic, you will get a larger image):

To edit an existing page or add a new page you begin on your Dashboard. On the left hand side locate the ‘Pages’ header. If you hover over it a gray drop down arrow will appear; click on this arrow. This will open the two sub-categories, ‘Edit’ and ‘Add New.’ Edit will allow you to edit existing pages (remember pages are ‘tabs’ or ‘parent’). From this selection you can edit or delete info on that particular page.

If you select ‘Add New’ you will be able to add a new page or subpage. Please see the graphic below for an example of what will appear if you choose ‘Add New’ (if you click the graphic, you will get a larger image). You will notice that you name the new page (in green), just as you would a post, and that this name will appear in your navigation menu. Any content, whether text or media goes in the body (in orange), just as it would in a post. Be certain that you are writing under the correct tab; either Visual or HTML.

Congratulations! If you followed the steps above you have either edited an existing page or added a new page!

If you have added a new page, let’s look at how you construct the ‘subpages’ or ‘child.’ Before you publish your new page look to the far right under the publish button. You will see another box titled ‘Attributes’. This box allows you to make your new page the ‘subpage’ or ‘child’ of another main page or ‘parent.’ The default for all new pages is ‘no parent.’ Simply select the appropriate page to be the parent and you are done. You can edit existing pages to make them ‘subpages’ or ‘child’ using this same process. As in the first image above you can have multiple levels similar to what I have written out below.

Mortgage Forms PARENT (Tab)

• Refinance CHILD (Subpage)

• Purchase CHILD (Subpage)

Conventional CHILD (Subpage)

FHA                  CHILD (Subpage)

USDA               CHILD (Subpage)

VA                     CHILD (Subpage)

BE SURE TO SAVE YOUR DRAFT OR PUBLISH THE NEW PAGE!

In this tutorial, you will learn how to insert pictures into your posts. Please leave any questions in the comments section and I will try to answer them promptly.

The image to the left is an illustration of the first step in adding an image to your post (article). On your Dashboard where you write posts you will want to locate the “Add media” icon as indicated by the red arrow in the image to the left. It is located between your post’s title and your post’s content. You simply click on the first icon which looks like a square inside a square.

When you click on the icon, a box identical to the image above opens up. There are four options indicated by the numbers 1, 2, 3, and 4.

Each option is different and will be explained below.

Once you have uploaded your image to your post using one of the four methods above, a new window will open that will give you options for your image.