Essential HTML for Editing WordPress Content

In today’s coding generation, HTML is a very basic language. For that reason alone, I am going to call this a beginner’s tutorial on HTML and its use in WordPress. There are several HTML tags that are vital for customizing content in a WordPress blog. I will concentrate on things that you cannot do with the WYSIWYG editor. The WordPress WYSIWYG editor is the tool in the WordPress admin that allows most WordPress users to know little or no HTML code at all and still make a somewhat decent looking blog post or page. However, if you know the basics of HTML that I will cover here, there are more content styling options available to you when developing a post or page in WordPress. That’s why it is essential to know a little HTML when adding content to your WordPress blog or website.

What are HTML Tags?

HTML tags are the basic building blocks of any web page. Even if a more advanced coding language is used to produce a website, there is still going to be some HTML output to the screen. WordPress relies heavily on PHP as its main language of choice for the backend. PHP however generates HTML for the front end of a WordPress site that visitors see when visiting your blog or website. So, while WordPress uses mostly PHP, PHP in turn uses HTML, so there is not getting around the use of HTML in WordPress.

Using HTML in the WYSIWYG Editor

The WYSIWYG editor generates HTML as well. In fact, you can click on the editor’s HTML tab and see the HTML that the editor produces as you insert text in the user interface. It is automatically converted to HTML using the Tinymce PHP and JavaScript class libraries that are part of the WordPress installation core files.

What some WordPress bloggers and users may not realize is that you can edit the HTML directly when viewing it in the HTML tab of the WYSIWYG editor and you can even see the changes live in the regular editor’s view when you switch back to the default tab. It isn’t recommended often to try and use much advanced HTML code in the WYSIWYG editor, but here is a list of safe tags to play with. Any of the following tags can be surrounded with greater than and less than signs to make a tag:

H1 – H6 – tags are header tags that display header text at six levels or sizes with one being the largest.

P – tags are paragraph tags and surround each paragraph of text leaving a space before and after each block of text.

br – tags are line break tags that force the text following them onto a new line when rendered in a webpage.

blockquote – tags are used to add style to a quotation by the author or other source in a blog post.

Opening and Closing HTML Tags

One thing it is important to understand about most HTML tags is that they normally have an opening tag and a closing tag. The opening tag is the tag, such as p for paragraph, surrounded by a less than sign before it and a greater than sign after it. Then the content the tag is to effect follows the opening tag. Finally, the closing tag follows the content the tag is to effect. The closing tag also starts with a less than sign and ends with a greater than sign. However, the closing tag also usually has a forward slash before the tag name so a paragraph closing tag would actually be /p surrounded by the less than and greater than signs.

More Complex HTML Tags

Above we covered some of the more simple HTML tags that are commonly used in WordPress. Now I want to get into some of the more complex tags in HTML that can also be used with WordPress. One such tag is the auto closing tag. An auto closed tag is one that doesn’t have an opening and a closing tag, but is only one tag. The br tag is a good example. An auto closing HTML tag is a single tag that also contains the closing slash inside of the less than and greater than signs. However the br tag can be used with or without the closing slash. In HTML5 it is proper syntax to use the slash though, so get used to doing so. Another example of an auto closing tag is the input tag which is normally nested within a form tag. The common usage of an input tag goes like this:


Notice how the slash is placed before the closing greater than sign.

Another example of more complex HTML tags are nested tags. Remember how I mentioned that the input tag is nested within the form tag normally? Well there are other cases where this is practically mandatory or at least proper coding. Once such case is with list tags. There are two main types of lists. There are ordered lists that use the ol tag and unordered lists which use the ul tag. Both also make use of the li tag nested inside of them. The following section shows a common use case scenario for each.

Ordered Lists

Ordered lists are lists that are numbered and look like this:

  1. item one
  2. item two
  3. item three

The above HTML would produce something like the following:

  1. item one
  2. item two
  3. item three

Unordered Lists

Unordered lists are lists that use bullets instead of numbers. The HTML for an unordered list looks like this:

  • item one
  • item two
  • item three

The above code produces the following effect:

  • item one
  • item two
  • item three

With either an ordered list or an unordered list, the listed items get surrounded by the li HTML tag. The group of li tags in turn get surrounded by the ul opening and closing tags.

Nested HTML Tags

I mentioned nested tags when discussing lists tags and form tags above, but the general concept of nesting tags can be used with many other basic tags as well. For example, you could have a p tag inside of another p tag and it would still work like in the following example:

This is the start of a paragraph

this is inside of the paragraph but a paragraph of its own

this is the end of the original paragraph.

The above code would produce the following effect:

This is the start of a paragraph

This is inside of the paragraph, but a paragraph of its own

This is the end of the original paragraph.

In essence, the effect is the same as if the coder would have used three p tags, but accomplished the same thing with two. That is not really the intended purpose of this. You will understand why this might be done after reading the next section on attributes of tags.

Tag Attributes

Another great thing about using HTML in WordPress is the ability to assign attributes to HTML tags to change their functionality. For example, the p tag or paragraph tag can use the align attribute to center align or right align the text inside that tag. Also, you can use the CSS style declaration like an attribute to change the color of the text inside the tag. Consider the previous nested paragraph tags with the following changes and it makes more sense:

This is the start of a paragraph

this is inside of the paragraph but a paragraph of its own

this is the end of the original paragraph.

The above would print a red line followed by a blue line followed by another red line, making the coder only have to enter two inline styles instead of three because of the nested p tags. The p tag has one attribute, the align attribute, but also HTML has global attributes that can be called inside almost any tag. The inline style attribute used in the above example is just one of many global HTML attributes. Read on to learn more.

Global HTML attributes

Attributes are assigned to an HTML tag to alter the behavior of whatever is inside of that tag. In WordPress, these can be applied in the HTML view of the WYSIWYG editor. Here is a list of some of the more common global HTML attributes that might be assigned to any HTML tag:

style – used for declaring inline CSS styles for a tag.

class – used for assigning a CSS class to the tag.

title – used to display extra information about an element. Often triggers an on hover event so that text is shown to the user when the mouse hovers over that element.

lang – specifies the language used in that element.

id = assigns a unique id to the element.

accesskey – indicates a shortcut key to allow the end user to focus on the element on the webpage.

draggable – a new attribute to HTML5 that determines that the element can be clicked on and moved around the screen by the user.

contenteditable – tells whether the content within an element is editable or not and is also new to HTML5.

As you can see from some of the possible attributes, there are some things that could be added to a WordPress blog using raw HTML code and attributes that couldn’t be done with the default WYSIWYG editor’s functionality.

Summary

I hope you have learned some useful HTML tricks for customizing WordPress in this tutorial. If you make use of both HTML tags and their attributes, there are lot of extra things you can do to your content on your WordPress blog or website. Don’t forget HTML is easy compared to most other coding languages, so try it today. You might have fun making changes that you couldn’t do before in WordPress. Enjoy your new possibilities.

30+ Ways to Use API’s in WordPress with NO Coding

Over the years I have received countless requests to customize WordPress. Design and layout, those kinds of things are easy enough. The more complicated projects have requests to connect WordPress with something. Can you send my form to Campaign Monitor or Salesforce? People ask things like can you import and post my tweets and Instagram pics? It seems like I’ve integrated everything from forms to maps, auctions to videos, and back again.

About a year ago I became very excited about a service called Zapier.com. Zapier is basically a commercial version of the very popular If This Then That website. Zapier is an “API” integration service. You can integrate your WordPress website with any public API if you know how to code it. That’s the barrier. Zapier is a middle man service that manages these API’s for you – so you don’t have to do any coding.

The best way to explain Zapier is it’s a service that automates repetitive tasks:

  1. An event happens on your website or externally
  2. Zapier is notified of the event
  3. Zapier performs an action

Zapier supports more than 300 apps, such as:

  • Gmail
  • Google Docs
  • Dropbox
  • Facebook Pages
  • Twitter
  • Salesforce
  • RSS
  • Trello
  • MailChimp
  • Basecamp
  • Box
  • WordPress
  • Aweber
  • Quickbooks
  • Gravity Forms
  • Google Talk
  • LinkedIn
  • Freshbooks
  • Paypal
  • Stripe
  • SugarCRM
  • Twilio
  • Yammer
  • Instagram
  • Constant Contact
  • YouTube
  • Get Response
  • Survey Monkey
  • Woo Commerce
  • Office 365
  • FourSquare
  • Jira
  • Amazon S3
  • Tumblr
  • GotoMeeting
  • Formidable
  • Vimeo
  • Google+
  • eBay
  • Sharepoint
  • Pardot
  • You get the picture…and many more

Example:

If you simply signup for Zapier service, you can create a “Zap” to setup your triggers and actions. Here’s what a simple WordPress connection looks like. Take something as simple as creating a new post. You could create an action to create and post an image Tweet on Twitter. Once it’s setup – no more posting to Twitter! You could even do the reverse of that, and every time your Tweet, created a post in your WordPress blog.

Zapier has the following built in integrations with WordPress:

  • new comment
  • new category
  • new post format
  • new post type
  • new author
  • new post status
  • new taxonomy
  • new post
  • new comment status
  • any webhook, plugin, or trigger

Here’s some examples to get your mind going:

  1. You could save your WordPress posts to evernote.
  2. Send yourself an SMS text to your phone through Twilio every time you receive a comment.
  3. Create a new post every time somebody saves a document or spreadsheet to Google Docs (Drive).
  4. Create a Basecamp to-do item to follow up on social media every time a post is published
  5. Automatically update Twitter, LinkedIn, Instagram, etc., when you publish a new post
  6. Create a new blog post as a draft when you save a Google doc, Evernote note, draft Gmail, etc.
  7. Allow users to submit posts using a gravity form on your website (as drafts or live)
  8. Create a new post every time a new video is posted in your YouTube channel
  9. Create a new post every time a new file is added to your Dropbox
  10. Create Google Calendar events for new WordPress posts
  11. Create new posts from Twilio SMS Text Messages
  12. Create Trello cards from new WordPress posts
  13. Send contact info from a Gravity Form to Salesforce, SugarCRM, Campaign Monitor, etc.
  14. Every time a new post is added to your tumblr blog, add it to WordPress as well
  15. When you get a new comment send an IM message in Google Talk
  16. Append a text file in your dropbox every time a Gravity Form is submitted
  17. Save a Gravity Forms e-commerce sale to Quickbooks or Freshbooks
  18. Send a Gravity Form submit to GitHub, Basecamp, ActiveCollab, or Jira as an issue
  19. Take a Gravity Form submit and create a PDF with the data using Formstack, JotForm, Google Forms, etc.

We haven’t even begun to talk about double zaps yet. You might have been wondering why you can’t have a triple zap, if this, then that, then that. Well, it doesn’t exactly work like that, but you can have two zaps that work n concert with one another. You can really build some custom things in this way.

For example, Semantria is a service that can monitor sentiment in text. Let’s say you wanted to monitor if somebody was saying something positive (or negative) about you or your company on Twitter? You could easily setup a first zap to send all your Tweets to Semantria. Then do a second Zap to post the positive tweets to your WordPress website. Here are the instructions for a Semantria double zap like that.

Creating these integrations with custom code or plugins could cost thousands in WordPress development, provided you find (or are) a capable programmer. Even then, over time as API’s are updated – the code or plugins will need to be updated again and again. By using a service like Zapier, you don’t have to pay to code the integration, and you don’t have to pay for maintenance over time. Zapier is a paid service, and you do have to pay for the amount of usage you have (beyond 100 zaps per month in a free account), but it’s pennies on the dollar compared to the standard method. And you can easily customize zaps in the future with just a few clicks – something that would be very difficult with programming code.

Getting Started: An Overview of the WordPress Admin

So, you’ve just installed WordPress and signed in to your new WordPress via “yourwebsite.com/wp-admin”. Now what? If you’re unfamiliar with WordPress, your first encounter with the admin section can seem intimidating, but we assure you, with a little exploration and experimentation you will get the hang of it in no time. This post can be your guide.

The Dashboard

The backend of your brand new WordPress website will look like this:

wp admin overview dashboard 1

The home page of your admin is called just that, Home, and it is located as a submenu under Dashboard on your admin’s main sidebar menu. You’ll notice right away that there is a welcome box with lots of helpful links and action steps to get you started. Feel free to poke around any of these and refer back to this post if you happen to get stuck somewhere. The easiest way to learn (and retain the information) is to experiment and figure things out. On the other hand, if you like having the full “bird’s eye-view” first, then read on.

wp admin overview dashboard-2

In the image above you will notice that I’ve selected the “Screen Options” drop-down tab. This allows me to choose which dashboard widgets I’d like to display and which to hide. I’ve chosen to hide Welcome, Quick Draft, and WordPress News. As I install WordPress themes and/or plugins, more options are likely to appear in the screen options. This is why I like to keep the widgets I choose to remain seen to a minimum, avoiding screen clutter.

wp admin overview updates

The next and final submenu you will find under Dashboard is called Updates. This is where you will be able to update WordPress core files (new versions of WordPress), themes, and plugins. It is always a good idea to run updates as they are released. However, it’s important to always back up your website completely first. To learn more about why that is important and how to do it, check out our tutorial on backing up WordPress.

Posts

There are four submenus under Posts. The first, which is also your post archive, is called All Posts. This is where you are able to see, sort, search, and take bulk actions on all of your blog’s posts.

wp admin overview posts all

If you would like to create a new blog post, simply click the Add New submenu or the Add New button at the top of All Posts. This will take you to the post editor, seen below.

wp admin overview posts add new

This is where the magic happens, you might say. For anyone primarily blogging that is. And thankfully, it’s all relatively simple to navigate and use. There is a title space for your post’s headline, an editor that–if you’re familiar with basic visual editors, like you might find in your email or in a word processor–should be self explanatory. It’s the boxes on the right-hand side that really need explaining.

Starting at the top and working down we have the publishing controls, post format, categories, tags, and featured image. Publish is where you are able to save your post as a draft (or other status), preview what it will look like once published, edit post visibility, choose to schedule your post for a later date, and of course actually publish to your live blog.

Post format is where you are able to choose between eight different types of blog post–depending on what your theme supports (as in, has a stylesheet to display). Unless you want your blog post to be just one item, the standard post will most likely suite all of your needs as you can combine all of the other post elements within a single standard post.

Categories, which we’ll get into in more detail in just a moment, can be chosen and/or created in the category section of the post editor. Ideally you will have already narrowed your blog down into between 5-10 categories before adding a lot of blog posts. In that case you will simply check of the appropriate box and head on down to the tags section.

Tags is where, you guessed it, you can add tags to your blog posts. Tags, as a general rule, should be used sparsely and specifically. Try not to bombard your posts with a massive wall of post tags since they are primarily used as a means of filtering down to just the most relevant content on your site–as opposed to helping your content become discovered on a large social network; like facebook, twitter, or instagram.

Finally, we come to the featured image. If supported by your theme the featured image will be displayed in two places: at the top of your post and as a preview on your blog and/or posts archive page(s). To add a new image simply click on the “set featured image” link and select your preferred image from the media library or upload it from your computer.

Speaking of adding media, let’s take a look at how you can add images, video, audio and more into your blog posts from the Add Media button located above the main text editor box.

wp admin overview posts add new media

As you can see from the image above, when the Add Media button is clicked you are brought to a screen with a few (but powerful) options. To insert media into a blog post all you need to do is set your cursor within the editor at the location you’d like your media to appear, click the Add Media button and then use one of the pictured methods for selecting said media. You can upload it from your computer, use media you’ve already uploaded to the WordPress Media Library (which we will explore together below), or you can insert media via URL.

wp admin overview posts categories

Now let’s get back to categories, which is the next submenu under Posts. As I mentioned above, you will most likely want to limit yourself to a handful of categories. Ideally, a blog consists of just one or a few closely related topics. The idea should then be to create a hierarchy of information, where each subset gets more and more specific, so that it is easy for your blog visitors to find exactly what they are looking for.

For instance, if you were running a blog about working on cars your over-all blog topic would be auto mechanics. After that you might have categories that broke down into the various sections of auto mechanics: engine, transmission, carburetor, etc. After that, tags are meant to be even more specific while post titles (the most specific) are meant to be unique. In this way visitors to your blog will be able to navigate from broad blog topic, all the way down to the exact information they are looking for by using the categories and tags you provide.

wp admin overview posts tags

That wraps up the basics of creating blog posts, now it’s time to talk about media.

Media

When you click on Media in the sidebar menu the first submenu it brings you to is Library. This page, sort of like your All Posts submenu, is where all of the media you’ve uploaded to your WordPress website will be archived.

wp admin overview posts tags

On this page you can change from gallery to list display, sort by media type, search by keyword and execute bulk actions. If you click on an item you are brought to a details page with edit options.

wp admin overview media library details

If you click on the “Edit Image” button, you will be able to make some minor edits right within the WordPress backend.

wp admin overview media library edits

While basic, these simple editing tools can help you to fit your images to the dimensions of your blog posts so that each post appears uniform, creating a more enjoyable reading experience.

wp admin overview posts add new media

And finally, if you’d like to add new media to your library all you have to do is click on the “Add New” button in the media library or click on the Add New submenu. In either case you will be brought to the screen shown above where you can drag files from your computer or select them using the finder button.

Pages

In WordPress, pages are very similar to posts. The All Pages and Add New submenus under the primary Pages menu option are almost exactly like those of the Post menu above it. Obviously, a page is not displayed on the front end of your website as a blog post, but on the backend there are few practical differences.

wp admin overview pages add new

With the pages archive being so similar to the posts archive, I have instead limited this section to just the new page editor–as seen above. The main difference here being the lack of format, category, and tag boxes. And the addition of the Page Attributes box. This box provides you with the option of choosing a parent page, the page template (if your theme provides any other than its standard) and page order. All of which you can leave on their default setting.

Comments

The Comments section has no submenus. It’s simply an archive of all the comments left on all your blog posts (and pages, if that feature is activated). This archive, like the other archives, allows for quick searching, sorting, and bulk actions. As well as individual comment management; from marking a comment as unapproved, to responding to it, marking it as spam, and more.

wp admin overview comments

Appearance

The appearance section of your admin’s sidebar menu is one you will visit often (at least during initial setup) as it is where all of your primary customization features are located. This of course includes your WordPress theme.

wp admin overview appearance themes

Every new install of WordPress comes pre-loaded with several free WordPress themes. To activate a theme, all you have to do is hover over the theme you want and click “Activate”. To view more details about a given theme, just click the theme’s thumbnail image. You can even see what each one will look like before activating by viewing the theme demo. Once you’ve made your choice it’s time for further customization, which is our next submenu.

Note: adding new themes, such as the one you might have purchased here at WPHub.com, is its own tutorial. To learn how to do that check out our post How to Install and Configure a WordPress Theme.

wp admin overview appearance customize

Clicking on the Customize submenu will take you to a unique visual editor with customization controls on the left-hand side and a large preview window on the right. This is extremely useful for previewing potential changes to your theme/site design before making those changes live. Depending on the theme that you have installed, the customization options on the left-hand side are likely to change.

wp admin overview appearance widgets

The next submenu under Appearance is called Widgets. Widgets add content and features/functionality to your sidebars or other widgetized areas. The Widgets submenu is where you are able to drag and drop various widgets into the different widgetized areas of your website. Or, if you do not want a widget to appear where you’ve either placed it in the past or it happens to be by default, you can can simply drag it back into the available widgets section.

wp overview appearance menu

Most themes support one or two menus: a primary menu and a secondary menu. Together, these menus are what make up your site’s navigation. To create and manage these (and possibly many more) you’ll want to go to the Menus submenu option under Appearance. In this section you will be able to create and organize menus within a drag and drop environment.

wp admin overview appearance header

Many, but not all WordPress themes will take advantage of the Header subsection under Appearance. This is where you will be able to make some very basic changes to your header (such as color and whether or not to show the header text) as well as the option of uploading an image header.

wp admin overview appearance background

Similarly, the Background subsection of the Appearance menu will not be utilized by every theme. In those cases that it is not, as with the header, those options are typically folded into a “theme options” panel that is unique to that particular theme. That said though, for all themes that do take advantage of the built-in background options, you are able to select an image (often a repeating pattern) and/or change the color code.

wp admin overview appearance editor

And finally, we have the editor. This is a section users are often discouraged from using by theme creators. Mostly because any changes you make to files in this editor will be overwritten when you run the next theme update. It is recommended that instead you use a child theme for custom edits that would require you use this Editor. If you are not sure how to create a child theme, check out our tutorial.

Plugins

Plugins are php scripts that extend and expand the functionality of a WordPress website. To learn how to install and configure a plugin, check out our tutorial on that topic. To check out which plugins your fresh install comes with (and the location all future installed plugins will appear) navigate to the primary Plugins menu option; it will default to the submenu Installed Plugins.

wp admin overview plugins installed

On this page you are able to activate, edit, or delete individual plugins as well as take bulk actions on all of your plugins. To add a new plugin, click the Add New button this page or navigate to the next submenu Add New.

wp admin overview pages add new

As of WordPress 4.0 the Add New submenu section is completely re-worked to make finding and installing the very best free WordPress plugins from the official WordPress Directory easier than ever. On this page you can find plugins by Featured, Popular, Favorites, Tag Cloud and of course keyword search. As mentioned above, learning how to properly install and configure these plugins is covered in another tutorial.

wp admin overview plugins editor

Again, the plugin file editor is often discouraged unless you consider yourself proficient in php and at least an intermediate WordPress user (if not developer). With that being the case, this section is easy enough to understand for those with the know-how to use it. Everyone else is probably best off using their plugins as they are or hiring professional help to make alterations.

Users

The Users section is, as the name would suggest, where you manage all things associated with site users. The default submenu is All Users.

wp admin overview users all

Just like the archives we have seen previously, the All Users archive is a single screen where you can search for all the different users/user type associated with your website. From this page you are able to quickly and easily find and edit any user.

wp admin overview users add new

To add a new user simply click on the Add New submenu option or the “Add New” button on the All Users page. The process is simple and straightforward. Simply fill in the required data fields, select your prefered settings, and click “Add New User”.

wp admin overview users profile

Once a user signs in they are able to go to the Your Profile link and fill in the fields you see in the image above to complete their profile.

Tools

WordPress does not come with an over abundance of built of tools (that’s what plugins are for) but those that it does come with are housed under Tools. When you click on this primary sidebar menu option, it defaults to Available Tools.

wp admin overview tools available

There are only two tools under Available Tools: Press This and Categories/Tags Converter. The first is what’s known as a bookmarklet. You can drag Press This into your browser’s bookmark bar and use it to blog to your self-hosted WordPress blog from any page you might happen to be viewing. The Categories and Tags Converter is meant to make it easy for you to convert your categories to tags or vice versa.

wp admin overview tools import

The next option under the Tools menu is Import. Every source shown on this page is a potential source for blog posts. Simply click the appropriate link and follow the step by step instructions.

wp admin overview tools export

And finally we have the Export option under the Tools menu. This submenu section is dedicated to helping you create an exportable file comprised of your posts, pages, comments, custom fields, terms, navigation menus and custom posts.

Settings

The Settings menu option is actually one of the most essential sections of your WordPress admin; especially for the initial setup period. Once these items are configured once, there are few occasions in which you will have to revisit them. That said, and while there are many things here that can be left on default, getting the few vital settings right the first time is pretty important.

wp admin overview settings general

In the General section almost everything can be left on default. You’ll probably want to delete or change the tagline. You can leave the URL as is. Your email address will be the same one you signed up with. And all other settings can be left alone unless for reasons of you own, you would prefer to change them. From a best practices perspective, they’re fine.

wp admin overview settings writing

The writing section is the same. Literally everything here can be left on the default settings.

wp admin overview settings reading

Here is where things begin to get important. If you would rather have a static home page instead of showing your most recent blog posts on the home page, this is the place to make that happen. First you’ll need to navigate back up to Pages and create two pages: Home and Blog. Once those pages are published you’ll want to come back to Reading and change your Front page display settings. Select Static Page and make Home your front page and Blog your posts page. Everything else can stay on default unless you prefer otherwise. Be sure to click “Save Changes”.

wp admin overview settings discussion

Pretty much everything in Discussion can stay as is. On this page there isn’t anything that you have to change, but if you prefer something different then by all means change things up.

wp admin overview settings media

You may or may not want to change the media dimensions based on what displays best for the theme you’ve chosen. This will be on a case by case basis though.

wp admin overview settings permalink

Finally we come to one of the most important settings there is: Permalink settings. This is the one case in which you overwhelmingly DO NOT want to keep the default setting. When it comes to publishing your pages and posts and getting the most out of your SEO efforts (that’s search engine optimization for the uninitiated) you’ll want to make sure you choose a permalink option that at least includes the name of your post/page. Our recommendation would be that you choose the post name option. It’s simple and puts the focus on the keywords associated with your post (as long as you’ve included them in your title or made a point to edit your permalink on the post editor page).

And that, is the WordPress admin!

In Conclusion

As I mentioned at the top of this post, new users are often intimidated by the WordPress admin and it can take a while for that feeling to wear off. However, once you take the time to walk yourself through each section you realize that it’s not that any one aspect of the site is too difficult to grasp but that it’s just a matter of becoming familiar with each section/setting and how they affect everything else that takes time. Having done that in this one post though, you are well on your way to mastering WordPress.

Next, we’d recommend learning how to install and configure new themes and plugins. Or perhaps you’d like to get right down to blogging. In that case, we’ve got some fantastic posts on how to approach and master content strategy/publishing in a way that is sure to grow your readership as quickly as possible.

How to Install and Configure WordPress Plugins

In this post we’re going to show you three ways to install a WordPress plugin. But first, let’s take a moment to make sure we all know exactly what a WordPress plugin is and what it does. A WordPress plugin is a php script that extends the functionality of your WordPress website, allowing your site to do something it otherwise wouldn’t be able to do–such as integrate a newsletter service like mailchimp; sync your website with facebook; create an editorial workflow/calendar; and the list could go on.

A good rule of thumb to follow when locating a plugin on the official directory is to only install plugins with an average rating of four stars or higher. Granted, some newer plugins may not have had a chance to accrue this rating but as a general rule this should be effective in identifying quality design/development as well as safe/secure plugins. You’ll also want to make sure that the plugin has been updated recently and is compatible with the latest version of WordPress.

plugin directory sidebar highlight

Ok, so now that you know what a plugin is and how to determine that you’ve found one of high quality, let’s go over the three ways you can install them on your WordPress website.

Finding and Installing Plugins from the Dashboard

Perhaps the easiest way to find and install the plugin you’re looking for is by completing the entire process within the WordPress Dashboard itself. To do this simply navigate to Plugins > Add New and search for the plugin you’d like to install.

plugins add new search

Once you’ve found the plugin you’re looking for, you can install it by clicking the “Install Now” button found to the right of the title of the plugin or, if you’ve clicked on “Details”, at the bottom of the resulting lightbox style information panel.

plugins install now highlight

plugins install now button highlight

Once you have installed the plugin you will be asked to “Activate” it. Do so by clicking “Activate Plugin”.

plugin activate

In most instances, after activating your new plugin you will notice that your admin sidebar has a new primary menu or that the menu for your new plugin has been added under the primary menu for Settings. In either case, it is important to configure the settings for your new plugin if you want it to function as desired (or at all, in some cases).

plugin new primary menu

In most cases plugins come with a section, subsection or series of either dedicated to its settings with the appropriate help text included to explain what each option does. To configure your plugin simply review each option, the help text associated with it, make your selections and be sure to click “Save” when a “save button” is provided. If for some reason no new menu or submenu appears then your plugin does not require any configuration.

Installing Downloaded Plugins via the Dashboard

Let’s say you’ve purchased a premium plugin from a third party or that you prefer searching for plugins on the official WordPress plugin directory instead of in your Dashboard. How do you install those plugins?

Simply download the plugin’s zipped file from the directory by clicking the large orange download button on the plugin page or using the download prompts provided by the third party.

plugin page orange download button

Next, in your WordPress Dashboard navigate to Plugins > Add New > Upload. Use the “choose file” option to select the zipped folder you downloaded.

plugin upload page

Click “Install Now” and follow the same steps for activation and configuration as before.

Installing Downloaded Plugins via FTP/SFTP

Finally, in certain cases you may wish to have more control over the installation process. At these times it may be necessary or preferable to install your plugin via FTP or File Transfer Protocol (a standard network protocol for transferring computer files from one host to another). To do this you will need an FTP client (a desktop application for your computer that provides an interface for you to use FTP). Popular FTP clients include FileZilla for Windows and Transmit for Mac, but a simple web search will reveal a wide variety for you to choose from; some free, some premium.

Once you’ve downloaded your FTP client of choice you’ll be asked to provide the proper login credentials to access the files that comprise your website. This information can be attained through your hosting account. You will need to provide your site’s domain and/or IP address and the username/password associated with it. Again, this information will be specific to your host; it is not your WordPress username and password.

Once you are logged in (preferrably to the SFTP option, as in secure file transfer protocol, not simply FTP) you will see a local file tree on the left panel representing the files on your computer and a hosted file tree on the right panel representing the files that are being hosted for your website.

Note: any time you are uploading/deleting files via FTP/SFTP it is highly recommended that you first backup your site completely. If you do not know how to do this please refer to this tutorial on backing up your WordPress website.

To install a plugin via FTP/SFTP you will first need to download the plugin files to your desktop. If the files are zipped you will want to unpack them and read the specific install instructions for that plugin. Unless otherwise specified, you will then select the unpacked plugin file from the left panel and drag it into the plugins folder (which can be found within the wp-content folder) on the right panel.

plugins sftp install

Once the file transfer is complete, navigate within your WordPress Dashboard to Plugins > Installed Plugins and locate the new install.

installed plugins activateugins add new search

Click “Activate” and then configure the plugin by finding the new sidebar menu and following the help text associated with each setting, same as the two options above.

In Conclusion

WordPress plugins are fantastic tools for extending and expanding the functionality of your WordPress website. Installing a plugin is easy and can be done in three different ways depending on your preference:

The first and easiest way is to use the built-in plugin installer found in the WordPress Dashboard under Plugins > Add New. The second and nearly as simple method is downloading a plugin’s zipped file from the plugin directory and installing it via Plugins > Add New > Upload. And finally, the third method for installing a WordPress plugin is to use an FTP/SFTP client such as FileZilla or Transmit and manually place the unpacked plugin files directly into your site’s plugins folder, which can be found within the wp-content folder.

No matter which method you choose, they all get the job done in just a few seconds or minutes. And just like that, your WordPress site is equipped with new and useful functionality that extends or expands the way you are able to use WordPress.

We hope you found this tutorial helpful, if you have any questions or need clarification on one of the methods mentioned above, please feel free to drop us a line in the comments section below.

How to Install WordPress Locally

It is always good practice to have testing environment installed locally where you can access it with out internet connection. It can be a real life saver if your internet connection slows down or is lost completely as you can continue to work on modifying your WordPress site in your test area and then update your live site later.

This tutorial will show you how to install WordPress locally. It may seem daunting at first, but as you shall soon see, it’s actually very easy and it will give you a controlled environment to work on themes or plugins.

XAMPP is a great free tool that can be installed easily on a Mac, PC or Linux. This open source package contains all the necessary tools that a WordPress install requires; Apache, MySQL, PHP and Perl. The following install was done on a Mac but installing on a PC or Linux machine are virtually identical. Let’s get started.

1. Download and install XAMPP https://www.apachefriends.org/download.html to the /Application/XAMPP

download xampp

Then run the install wizard.

download xampp

Then select your components. You will need both XAMPP Core and Developer Files for this install.

Setup Select components

You can download the latest version of WordPress right from the bitnami site or download the latest version of WordPress from WordPress.org (https://wordpress.org/)

XAMPP is an Apache distribution that contain MySQl, PHP and Pearl

2. Drag the dmg file to your application folder

This installs by default into these locations:

On Windows:   C:\xampp,

On Linux: /opt/lampp

On OS X:   /Applications/XAMPP

3. Start XAMPP in the application folder

Load XAMPP screen

4. Click on ‘Manage Servers’ then ‘Start All’– this will change the red status lights from red to green once all the servers are running.

manage servers

Apache default is port 80

MySQL started at port 3306

5. Click on ‘Welcome’ tab then click ‘Go to Applications’– this will take you to this page http://localhost/xampp/splash.php Click on your preferred language and you will see this page:

You successfully installed XAMPP on this system

6. In the left column under Tools, click phpMyAdmin

Log in to the admin if asked to

7. Click ‘New’ on top left column then check ‘Create database’ and enter ‘wordpress’ then select utf8_general_ci

8. Click ‘Create’ button

create wp database

9. Download the latest version of WordPress– https://wordpress.org/download/

10. Open the ‘Application Folder’ for XAMPP here c:\xampp\htdocs\

11. Create a new folder for your WordPress installation– (e.g. wordpresslocal) and copy all of your WordPress files to it.

wordpresslocal folder

13. From the folder, open wp-config-sample.php in a text editor.

14. Edit the connection details as follows:

// ** MySQL settings ** //
define(‘DB_NAME’, ‘wordpress’); // The name of the database
define(‘DB_USER’, ‘root’); // Your MySQL username
define(‘DB_PASSWORD’, ”); // …and password
define(‘DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this

So the connection details should look like this:

wp_config php

15. Rename the wp-config-sample.php file to wp-config.php and hit ‘SAVE’

16. Install WordPress– Loading this URL into your web browser: http://localhost/wordpresslocal/wordpress/wp-admin/install.php

5 minute install

17. Fill out the form– and voila you have a local installation of WordPress for your testing pleasure.

wordpress installed

*IMPORTANT NOTE: In order to update the WordPress core or add/update plugins, you will most likely get all kinds of errors when attempting to do so. These errors are from permission and ownership conflicts with the FTP server, your computer and WordPress. You can spend many hours chasing down all the conflicts or you can follow these easy steps that will show you how to by-pass FTP for your updates.

1) Access /wp-config.php

Open your /wp-config.php file from the WordPress root folder from your installation folder wordpress/wp-config.php

2) Add FS_METHOD direct.

FS_METHOD forces the filesystem method. Paste this line of code below all other lines of code in your /wp-config.php:

define(‘FS_METHOD’,’direct’);

FS_METHOD

3) Save the changes to the file and close it. When you attempt to upgrade to the most current WordPress version you should see this:

successfully updated wordpress

That is all there is to it. Just follow the above instruction and you will have a locally installed fully functioning WordPress website.