New terms from treehouse – How to Make a Website with WordPress – Installing WordPress, WordPress Themes, Customizing WordPress Themes, Custom Post Types and Fields in WordPress, WordPress Widgets and Custom Menus, and Plugin Best Practices

Installing WordPress

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.

Screen Shot 2014-12-16 at 1.06.14 PM


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.


WordPress Themes

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.

Screen Shot 2014-12-16 at 1.22.20 PM


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).


Premium Themes

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.


Theme Frameworks

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.

Screen Shot 2014-12-16 at 1.30.26 PM


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.

Screen Shot 2014-12-16 at 1.36.59 PM

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.

Screen Shot 2014-12-16 at 1.38.23 PM

Here’s the options page for the Attitude theme.

Screen Shot 2014-12-16 at 1.39.25 PM

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.

Screen Shot 2014-12-16 at 1.41.16 PM


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.

Screen Shot 2014-12-16 at 1.47.40 PM


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.

Screen Shot 2014-12-16 at 1.59.26 PM


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.

Screen Shot 2014-12-16 at 2.08.49 PM

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.

Screen Shot 2014-12-16 at 2.09.34 PM

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.

Screen Shot 2014-12-16 at 2.17.07 PM

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.

Screen Shot 2014-12-16 at 2.25.09 PM Screen Shot 2014-12-16 at 2.24.55 PM

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.

Screen Shot 2014-12-16 at 2.26.28 PM


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.

Screen Shot 2014-12-16 at 2.36.24 PM

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.

Screen Shot 2014-12-16 at 2.38.07 PMFor wordpress, single.php pages are used for what a single entry page will look like. The get_content_type() function receive two arguments for the content, and the name of the page.

Screen Shot 2014-12-16 at 2.41.37 PM

Once we’ve uploaded them, go to Pages > New Page > enter a title and description > Under Template on the right choose Art Page > Publish.

Screen Shot 2014-12-16 at 2.43.57 PM


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.

Screen Shot 2014-12-16 at 3.02.20 PM

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.

Screen Shot 2014-12-16 at 3.09.55 PM

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.

Screen Shot 2014-12-16 at 3.10.41 PM

Screen Shot 2014-12-16 at 3.12.30 PM

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.

Screen Shot 2014-12-16 at 3.14.20 PMScreen Shot 2014-12-16 at 3.14.40 PM

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.

Screen Shot 2014-12-16 at 3.22.49 PM

If you go to Manage Locations at the top, you can set which of your themes menu spots you want to set it to.

Screen Shot 2014-12-16 at 3.23.20 PM


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.

Screen Shot 2014-12-16 at 3.28.28 PM

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.

Screen Shot 2014-12-16 at 3.29.21 PM

After you upload it, you’ll see it listed as a new option under Appearance > Menus > Manage Locations.

Screen Shot 2014-12-16 at 3.31.11 PM

Screen Shot 2014-12-16 at 3.31.56 PM


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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s