1 Click WordPress install
You can install wordpress easily via cPanel. Search for WordPress, then click on it to go to its page on Softaculus. Then, install it. You can choose the protocol, the domain (or subdomain) you want to use, give it a name and description. For the admin username, choose something other than admin for security reasons, and put in your own email address. After installing, it will give you a link to see your site, and another to sign in to the admin section, which will just be yourdomain.com/wp-admin/. You’d then sign in with your admin username and password. Note that your hosting provider may auto include some plugins or themes. Under the plugins section you can see which ones you have and deactivate ones you don’t need at the moment.
The Famous 5-Minute WordPress Install
The documentation for that is here. Basically you download the file, upload it to your server using your FTP client. Make sure to put your files in the public_html software. Go back to cPanel and look for the MySQL database wizard. For the name choose something short and unique. Choose a username and password to create a user, giving them all privileges. Once the upload of the files is complete, go to yourdomain.com/wp-admin. You’ll see a screen to start the install process. You’ll need the database info you just set up, then run the install. It’ll then ask for some info like the site’s title and your log in info.
Types of WordPress Themes
They vary based on licensing terms and cost, whether you can customize them, and the community for that theme.
WordPress.org Theme Repository
The repository has a bunch of free themes for you to use. You can filter for certain features, layouts or colors. However, you can also do this in your admin panel under /wp-admin/themes.php. This makes it easier to preview it with your content. If you find one you like, click to install it, then activate it.
Best WordPress Themes
Another good way to look for themes by googling for the kind you want. Here’s a site with 40 good responsive ones. If you find one you like online, download it to get the zip file. Then, go to your admin panel > themes > add new > upload the zip file > install now (which copies the files onto your server).
This means they cost money. Themeforest.net and woothemes.com are good options. Woothemes actually offers a monthly fee that gives you access to multiple themes, rather than having to buy them individually.
This is an advanced kind of theme that comes with the ability to extensively customize the theme from within the admin area. These are good starting points for custom themes. Genesis is a popular one, as is Canvas. If you buy one, it’ll have it’s own section in the admin panel.
Customizing WordPress Themes
The WordPress Theme Customizer
You can customize them under Themes > Customize. You’ll see some options on the left and a live preview on the right. The options available depend on the theme.
However, when they want to give you a lot more options they’ll give you a theme options page as well.
Theme Option Pages
If there is one for that theme, you’ll see the options page in the appearance sub menu.
Here’s the options page for the Attitude theme.
Here’s one for the Heuman one. Notice how they differ. This one also has an Install Plugins section on the left, which has recommended plugins for this theme.
How to Make Child Themes
The devs will likely update their themes. If we edit one, then update it, we lose our changes. A child theme lives in a separate folder than its parent, you just copy over the files you need to it. To make one, you’ll need your FTP software. Go to public_html > your wp site name > wp-content > themes > make a folder with the name of the theme you want and add child to the end of it. We’ll start by making a style.css file that imports the css from the parent theme. Then, copy over the screenshot.png in the parent so the child has the same picture when you’re looking through your themes.
Customizing WordPress Theme Files
To do this, simply add some new rules to your style.css file in the child folder. Let’s say you wanted all pages to no longer have a child section. Find the page.php file in the parent and copy it over to the child folder. Note that with child themes, it will first look for the file in the child, and if it can’t find it it will look for it in the parent folder. Then, simply comment out the section you don’t need.
Custom Post Types and Fields in WordPress
Custom Post Types and Fields Plugins
Posts are used for blog posts and articles, and pages are for things with static info like your about page. However, there are some custom posts that don’t fit just into either category. You can determine what you want in them. The destinations section below shows that. We have a title, photo, destination and description.
If you go to the admin panel, you’ll see Destinations has its own section, and you can view and edit each of these posts.
You normally use two types of plugins for this. Custom Post Type UI for styling, and Advanced Custom Fields for setting up the fields themselves. However, there’s also the Types plugin which does both of these for you.
Setting Up Custom Post Types and Fields
To install the custom post type ui plugin, go to the plugins section > add new > search for it > install now > activate plugin. You’ll now see a new link in the panel for it as CPT UI. Click on it, then Add New. Simply give it a type name, then a label and click Create Custom Post Type. You’ll now see it on the left hand nav. Here, we added one for art.
Next, we’ll add the advanced custom fields plugin the same way. Once again you’ll see it in the side nav. Click on it > add new and under Location make sure that Post type is equal to art.
Then, click add field to start adding some. First we’ll do an image. For return value select image url, so we can make our own image tag and insert it where we want, and for preview size we’ll do medium. Then we’ll add a description field as a textarea, and another for the price. For style, you can choose seamless with no metabox, or WP standard with the metabox. Finally, you can choose what/if any items you’d like to hide on the screen. Click Publish on the right when you’re done.
Now, you can click Art > Add Art on the side nav and you can see we now have a page where we can add our art posts and publish them.
Custom Post Type Templates
He’s given us some php files to upload, art.php, content-art.php and single-art.php. Art.php is almost an exact copy of the page.php file, except for some changes. At the top there’s a comment that says Template Name: Art Page, which tells wordpress this is a template we can now choose from when creating a page. Down at the bottom we have some extra php code that tells wordpress to get the content with the post type art, and to display it in the art.php file. Note that they’re creating an object from WP_query and passing it an array which tells it that. This is used to create custom loops in wordpress.
Under content-art.php we can see that the code is displaying our fields, like the image, title, price and description. The Advanced Custom Fields plug in gives us the function the_field(), which let’s us pass in the name of custom field we want.
Once we’ve uploaded them, go to Pages > New Page > enter a title and description > Under Template on the right choose Art Page > Publish.
WordPress Widgets and Custom Menus
WordPress Widgets Overview
Go to Appearance > Widgets to edit. You’ll see the widget area for your theme and descriptions for where they appear, and the default widgets that wordpress comes with on the left. You can drag and drop them to add/remove them.
You can search for new widgets under the plugins section.
How to Create New Widgetized Areas in WordPress
He’s given us some new files to upload again. The functions.php file lets us add custom code beyond what we’d add in a normal page template file. It works differently in child themes. WP will first process the entire functions.php file from the parent, then read what’s in the child one. The create_widget() function lets you create new widget areas. First we create that function with some arguments, which get passed to the register_sidebar array below. Then we call it, passing in the parameters we want.
The header.php file here is the same as the parent with the exception of a line that says if there’s a dynamic_sidebar aka widget section, display it in the uptop class area. Since we gave it the name uptop in our function folder, it will display. We’ve added some css for this as well.
After uploading the files, if you go to the widget area, you’ll see there’s now a new widget area for the Header that we can add to. In this case we added a notice.
You can follow these steps to add a new widget whenever and wherever you need one.
Custom Menus in WordPress
Under Appearance > Menus you can customize your menus. To make a new one, click Create a new menu > give it a name. You can choose whether to auto add new pages to your menu, and also add custom links or even searches for tags. You can make as many menus as you’d like, but only as many will display as your theme allows.
If you go to Manage Locations at the top, you can set which of your themes menu spots you want to set it to.
How to add Custom Menus to a WordPress Theme
Once again we’ll download some files to upload. We have an updated functions.php with some code for making menus. We’re making a function called register_my_menus(), and inside that using a custom WP function called register_nav_menus(). Inside that is an array where you can create menus. Each element in the array is a new menu. The add_action function is used to hook the function into the initialization phase of when wordpress starts running.
In the footer.php file, it’s the same except for one line we’ve added with the wp_nav_menu function, which is saying if we have a menu called Footer Menu, display it here. If you had multiple menus, you’d copy and paste this code to where they needed to be and would edit the parameters accordingly.
After you upload it, you’ll see it listed as a new option under Appearance > Menus > Manage Locations.
Plugin Best Practices
Finding, Installing and Updating WP Plugins
Plugins add functionality. They can do things like add social media icons or a contact form, or even add ecommerce functionality. When looking for new ones, look at the version number. It’s good to see at least a 1.0 version with incremental updates, as it shows they’re still working on it. Under details you can see what version of WP it has been tested with, and it will give you a warning if you have a newer version. They’ll also have a link to a plugin page, which has a support page. After installing one, make sure to activate it. Premium plugins will be found online outside of the WP repository. To install it, click Plugins > Add New > Upload the zip file. If you’d like to do that manually, plugins are stored under public_html > your domain > wp-content > plugins > unzip your plugin and move it here > active it in the admin area of WP.
Common WordPress Plugins
- BackUpWordPress – Is simple and lets you do automated back ups.
- VaultPress – Premium WordPress backup software – Another good back up service.
- Akismet spam prevention plugin – Prevents spam comments
- WordPress Jetpack Plugin – Combo of plugins, gives good social sharing options.
- WordPress SEO Plugin from Yoast – Optimizes your content for SEO
- Gravity Forms plugin – Making forms, premium though.
- WooSlider Plugin – Premium, lets you make
- Lightbox Plus ColorBox Plugin – Goes through your site and auto-adds lightboxes where it makes sense.
- Custom Post Types UI Plugin – For making your own post pages.
- Advanced Custom Fields Plugin – For making your own post pages.
- Types Custom Post Types and Fields Plugin – For making your own post pages, like a combo of the above two.
- WYSIWYG Text Widget from Black Studio – Gives you a visual editor inside your text editor.
- Display Widgets Plugin – Let’s you control what widgets appear on what pages.
- Google Analytics for WordPress – Let’s you track site visitors.
- Google Analytics Dashboard for WP – Let’s you see them in your WP dashboard.
- Admin Menu Editor Plugin – Let’s you control what a user sees when they sign in to your site.