Codeable info

Getting Started with WordPress

Posted on by in WordPress Tutorials

This post was updated on October 3, 2014

In this beginner’s guide to WordPress you will learn some of the more important aspects of using WordPress for those of you just starting out. If you just getting started with WordPress for the first time or are still relatively new to blogging with WordPress, this tutorial should have much to offer. Using WordPress can be as easy as using any word processing software if you start out properly. I wrote this guide for beginner’s because without a little push in the right direction, using WordPress could be more difficult than necessary.

What Everyone Should Know About WordPress

WordPress is an easy to use blogging platform based on HTML, PHP, JavaScript and MySQL. It was developed with ease-of-use in mind and can be installed, updated and maintained by most ordinary people with little or no coding or web design background. If you can use a word processor, you should be comfortable with the WYSIWYG editor in WordPress. If you don’t know what that is, don’t worry, you will understand soon enough. WYSIWYG stands for What You See Is What You Get. It is what allows WordPress to be maintained and updated by most ordinary folks without any web development skills. Once your WordPress installation is set up, you will see the WYSIWYG editor pictured below:

add new post

To get to the above screen, navigate to your WordPress dashboard or admin area found in your root directory inside the wp-admin folder. The link will look something like this: You may or may not have a blog directory depending if you have just a blog or are adding a blog to an existing web site. The WYSIWYG editor is probably the most used tool for WordPress beginners because it is the easiest way to enter all of your content. More advanced users may add content with custom themes and plugins, but as a beginner, you are not likely to attempt these more advanced techniques until you are comfortable with the basics.

Using the WYSIWYG Editor

Using the editor is as easy as using almost any word processor and even has very similar tools in the toolbar. I will go over the more common tools with you here in case you have any reservations about using this interface to insert content into your blog. Here are the buttons from the image above:

wysiwyg editor bar

WYSIWYG Buttons:

Bold – this button does the equivalent of the


tags in HTML. It makes bold text.

Italic – This button does the same thing as the


tags in HTML. It makes italic text.

Strike Through – The strike through button does the same as the depreciated




tags that have been replace with the


tag in HTML today.

List buttons – In order of appearance, these are the Unordered List button and the Ordered List button. They are equal to the HTML tags of




and are for making bullet or numbered lists.

Blockquote – The blockquote button is for entering comments with large quotation marks around it like you see in magazines when they are quoting someone in an article. They make your blog look very professional when used correctly.

Text align – The align buttons move text to the left, center and right in that order.

Links – These link buttons are for creating and breaking links using the HTML anchor tag. To make a link, type the text you want to be a link, click the first link button and it will show you a pop up where you can enter the URL to link the text to and you can enter a title as well. The title is what users see when they hover over a link.

Insert More – Using the insert more button is one way to keep your blog neat. If you have a long post and want to shorten it, use this to hide some of the text. Simply go to the place in the page where you want the text to stop and click on the button. It will hide all the text after that and the user will have to click on a “continue reading” link to see the rest of the content after that.

Kitchen sink – This button hides and displays additional buttons. In the image above, the button has not yet been clicked, when you click on the button, another row of buttons appears as in the image below:

kitchen sink button

In the image above, on the second row of buttons, you can see there are more options. Starting from the left, this is what each additional button does:

Paragraph – This is a drop-down for choosing your font, paragraph or header type. Depending on what you select, it could use a


tag, one of the header HTML tags such as




and other HTML tags. Play with it to get familiar with it. It really is self explanatory once you try it.

Underline – The underline button creates a


HTML tag and is used to underline text in your blog.

Align full – This button is used to create even margins and aligns text similar to how news papers do.

Text color – The fourth button in the bottom row from the image above is the text color button and has an “A” on it. Click this drop-down to choose the color of selected text.

Paste as – The next two buttons are special paste buttons where you can either paste contents from your clip board as plain text by using the first one or as Microsoft Word content by using the second one. If you use MS Word, the second paste button can come in very handy for converting Word content directly to your blog nearly flawlessly.

Remove formatting – The next button that looks like an eraser is used to delete formatting from the selected text or objects.

Insert custom character – The insert custom character or symbol button is next and has a weird inside out Q type shape on it. Use this to insert such symbols not found on your keyboard. The copyright symbol and the trademark symbol are common examples of symbols inserted with this button.

Outdent and Indent – The next two buttons are the outdent and indent buttons. The indent button gives you more space before a sentence and the outdent button is used to undo that or give less space before the sentence.

Undo and Redo – Then comes the undo and redo buttons. They will redo or undo your last action in the editor.

Help – Finally, the last button is the Help button. This is a button you can use to link to more information if you have any questions about using the editor after reading this tutorial, which hopefully you will not!

TIP: You can always hover over any of the buttons in the tool bar to see a brief explanation of what the button is for.

Uploading Images

One common feature of the WYSIWYG editor is the image Upload and Insert feature. You can see this in the upper left corner of the editor where it says “Add Media” followed by a camera and music notes symbol. This feature is another that you can play with to get familiar with its functionality. I will describe it briefly here for those who learn best by reading.

To place an image in a post or page using the WordPress editor, simply place your cursor in the textarea where you want the image. Next, click the “Add Media” link at the top of the editor to display the image loader. There are two tabs at the top of the image loader popup page. Here is what each does:

Upload Files – allows you to upload an image stored locally on your computer.

Media Library – gives you access to previous images that you have uploaded for other blog posts or pages. If you need to use an image more than once, this feature comes in handy and keeps you from uploading duplicate images and wasting disk space.

As you can see the image loader has several options for uploading images to your blog. Get to know it and it can help make your blog much more appealing. Once you upload an image, it gives you the opportunity to alter the image’s alt, caption, description, title, alignment and size attributes. After you get all your image attributes set how you want them, you must click on the “Insert to Post” button to make the image appear in your blog. That about does it! If you are not sure about any of the settings, just leave them be and upload your image and click the “Insert to Post” button and it will insert the image with default settings that usually work fairly well for most images. Then you can tinker around with attributes some to get to know what they do. Learn by example. That’s often quicker than trying to read up on every little nuance of the WordPress admin.


From looking at the first image of the WYSIWYG editor above, you may have noticed there are two tabs, the “Visual” tab and the “HTML” tab. The “Visual” tab is the one I cover mostly in this tutorial since it is a beginner’s guide to WordPress and most beginners insert all their content under this tab. The “Visual” tab is the default one you will see when you come to the editor to create or edit a blog post or page. Here are explanations for both tabs in the WYSIWYG editor in the WordPress admin area:

Visual – The visual tab is used for both beginners and advanced users who wish to insert content in a very similar fashion as it will actually appear on the blog page when you are done. However, don’t be fooled completely because it will often appear a bit different when you go to preview the page than it did when you entered the content into the editor. This can be because of the browser you use or just because of the different environment in which the content is displayed in. Content in the WYSIWYG editor acts slightly different when it appears in a textarea than it does in an actual web page. That is why you want to preview your page before publishing it publicly. The visual tab contains all of the tool bar buttons described earlier.

HTML – The second tab is the HTML tab and is used for those of you who are familiar with HTML. If you are not good with it, don’t bother, you don’t need this view at all as long as you are comfortable with the Visual tab. More advanced WordPress users who are more familiar with HTML are likely to use this view a lot to customize aspects of the HTML code to make the blog page appear exactly as they want it to. I suggest you get comfortable with the Visual editor first, then later learn some HTML and mess with the HTML view to further customize your blog pages. One thing that is nice with WordPress, is that you can always return to the admin area and easily edit any of your previous blog posting with a click of the mouse.

Now we have covered the WordPress WYSIWYG editor fairly thoroughly. You should understand most of it by now. Some of you may learn best by playing with it, so dive in! What are you waiting for? Start entering some content in that dusty old blog of yours.

Key Facts About WordPress

Some other important information regarding WordPress that may come in handy includes the fact that WordPress is a PHP driven platform that relies heavily on the use of built-in WordPress PHP functions and some JavaScript functions as well where needed. While you don’t need to know any PHP, HTML or JavaScript to develop your very own WordPress blog, it wouldn’t hurt to get familiar with all three of those languages if you intend to do some of the more customized work possible with WordPress. Theme developers and Plug-in developers for WordPress need to know all three languages fairly well to ultimately customize WordPress. Don’t get me wrong, WordPress is a powerful tool even without customizing it and will work out of the box very well for someone with no PHP, HTML or JavaScript skills. Down the road though, you may find yourself wanting to customize your WordPress installation more and more which may require the use of some or all of these key technologies. You can customize WordPress effectively without using a lick of PHP, HTML or JavaScript with the use of Themes and Plug-ins already developed by a very large online community of WordPress enthusiasts.

Preparing to use WordPress for the First Time

Before you begin your installation of WordPress, there are three main items you will need. They are:

  1. FTP client: In order to upload the files from, you will need a decent FTP client. I use FileZilla so if you don’t have a FTP client already, I suggest going to and get the latest version.
  2. Text editor: You will need to edit the main configuration file for WordPress at least, so a good text editor is also necessary. I use Notepad++ which you can download from It is a notepad utility designed for coders and has many more features than the normal Notepad utility that comes with all Windows installations. You can use the plain on Windows Notepad if you wish though. It can be found by clicking on the start menu in Windows. It in the Accessories folder.
  3. Web Host: Finally, you need to have a web server or hosting provider that supports PHP and MySQL. Most do, so that shouldn’t be an issue. Check to make sure before paying anything up front though. I personally recommend a Linux server because they are much more friendly to WordPress users and PHP developers. Most good hosting providers offer both Linux and Windows servers. Try to get a Linux server equipped with C-panel and MySQL/PHPMyAdmin access to make things easy. PHPMyAdmin makes installing the WordPress database much simpler. At minimum, make sure your hosting provider has an easy to use MySQL database utility that allows you to create a new database from your server’s control panel. If you are not familiar with the process of creating a new database, doing so can be a real headache without the proper tools to do so. Also, with the popularity of WordPress constantly on the rise, many hosts are offering one click WordPress installations from their C-panel, so look for this also. If they have it and all you want to do is get started, go for it and you can even skip the next section if they offer a one click install and you don’t want to mess around with learning how to do it the old fashioned way. Just make sure they offer the latest version of WordPress. If they do not, you may be able to install it and upgrade it before using it without much trouble.

Getting Familiar with the WordPress Codex

The WordPress codex will become your best friend during your adventures with WordPress. Almost everything a beginner will ever want to learn about WordPress can be found in the codex. offers the codex to the public at which is a great place to start your search for anything to do with WordPress, including more advanced WordPress techniques. If you ever decide to get into developing your own themes, plug-ins or other custom WordPress work, the codex is the place to search for how to do anything along those lines. Whenever you have a question regarding how to do anything in WordPress, the codex and Google are there for you. I tend to use them together because if you are searching for how to do something in WordPress and you use Google, many times a link to the codex will show up in the first page of the Google results for your search. Don’t hesitate to talk to Google like it is your personal assistant. I will often type in queries similar to: “How do I change the text color in WordPress comments” or “How to show a list of pages in WordPress”. Knowing how to search for answers is half the battle to unlocking the mysteries of WordPress. If you know how to find the answers, the rest becomes elementary.


WordPress is a large platform, but is very easy to use none-the-less. It has been around a long time and is very well documented. In fact, it has been around since 2003 when it was created by its founders, Matt Mullenweg and Mike Little. WordPress is currently the most popular CMS platform on the internet. WordPress has been tried and tested over and over again. You can’t go wrong with WordPress if you are looking for an easy-to-use blogging platform or any other type of website. Thousands of developers are making new custom themes and plug-ins every day so there are endless options when it comes to using WordPress for your website or blogging needs.

Codeable info

Comments (3)

Comment by Ian Lin says:

No problem. I am glad you enjoyed it. There are several great tutorials ranging from beginner to expert here on that can help you. I hope you find what you need. If you have any questions, feel free to post them here and I will do my best to answer asap. Thanks -Ian L.

Comment by Jim McPartlan says:

Hey Ian,

Thanks for the great input on a very well written and comprehensive tutorial. I’ve been racking my non-techie brain trying to figure out how to get basic answers as to how to proceed. Your advice is most appreciated for my newest project.

Thanks again,


Comment by aromal says:

your explanation on starting a wp site is enough for me,,, thank you very much.

Codeable info