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.

---

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.

---

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.

---

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.

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

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.

New terms from treehouse – Build a Simple PHP Application Part 2 – Integrating with PayPal, Working with Functions, and Wrapping up the Project

Integrating with PayPal

Creating a PayPal Account

This makes things wayyy easier than doing it yourself. Also, when someone adds something to their cart, you want it to stay there as they navigate the site. This is called persistence. Paypal offers a shopping cart service for this as well.

---

Configuring Tax and Shipping Rates

In PayPal, under My Account > Profile you can specify your business’s tax id. Under My Money you can add a bank account. You can also set up your sales tax under My Selling Tools. You can also set up shipping costs and options based on weight or number of products sold.

---

Creating PayPal Buttons

We’ll now make some buttons to add items to the paypal shopping cart. Under My selling tools > Paypal buttons > Update > Create New Button. Choose shopping cart for the type, so it adds the item to the cart. Give it a name, price and an item id, which should match the key from our associative array of products. Under Customize button you can add a drop-down for shirt sizes. When you’re done, click Create button. This will give you some code you can paste into your site.

 

This form element has a POST method, and its action is set to paypal’s servers. The target attribute opens the page in a new window or tab. The hidden inputs aren’t displayed on the page but do get submitted with the form. The hosted_button_id is paypal’s id for our red shirt, to help prevent fraud. They then have a table for the drop down. The input with the name on0 lets us know this is the first drop-down. The input with os0 stands for the selection in that drop-down. We’ll add some markup like a label to make things more semantic. They give you an image type input for your submit button, but we’ll instead use the normal submit type with our own text. The last img element is used for tracking. It’s a 1×1 px transparent image that the user can’t see. When the page loads, the image is still requested from the server, which records that request. We don’t need this, so we’ll remove it.

Now we have this. When you click Add to cart, it will take you to the paypal cart page.

Now we need to replace some of the info in that form with info from our product array, and understand the balance between security on paypal’s end, and ease of use on ours. If we try adding a new shirt size via html, like X-large, paypal will accept it. It will also accept if we decide to change the item_name via a hidden input element’s value.

However, this means any visitor to our site can change the html and mess with things and paypal will accept it. The only value that doesn’t have this flexibility is price.

Let’s copy the hosted_button_id into our product array.

We now need to make a button for each item in our catalog. To make it easier simply go back to paypal and click action > create similar button. Once you do that, copy the paypal id for each into your array.

---

Including the Products Array

Now we’ll make one page that can act as the details page for each of our 8 shirts. First we’ll make a file called shirt.php, and link to it in our shirts.php file. The format will be the same, only the data will differ and we have that in our products array. Since both pages need the array, it’s a good idea to put that in it’s own file so that both can link to it with an include.

Now, we need to link to the right shirt details page address. We can do this by adding a ? to the shirt.php link, then a variable name (in this case we’ll choose id, remember it’s arbitrary), then a value, which will be the shirt’s product_id from the array.

However, what we need it to do is pull that from each array in the array, so we don’t need to manually write it each time. Right now in the foreach loop we don’t have access to that, only the main array, not the sub ones.. We can load the key of each element into a variable using the =>. This will give us two working variables in the foreach loop, one with the key and the other with the value.

Remember the key name of each array was the number we gave, 101, 102, etc. When you click on the shirt, it takes you to the appropriate page.

---

Building the Shirt Details Page

For the shirt.php page, we can access the id from the pages web address using the $_GET variable. First, we’ll load that into a regular php variable. We can then choose the array we want by putting it’s key in square brackets after the main array. Rather than typing a specific number, we’ll use the variable declared above, which is set by the id in the url. $product_id is the key, $product is the array itself.

If you click a different shirt, you’ll get a different array.

Now, to set up the page. Like the other pages, first we’ll set the section and page variables and include the header and the footer. Then, we’ll set up the html. Note how we dynamically pulled in the name of the shirt.

We’ll dynamically add the picture as well, using php for it’s src and alt attributes.

Now to do the details on the right.

Finally, we’ll pop in the form for the paypal button. We need to add some php so that the button is customized for each shirt.

---

Redirecting Invalid Shirt ID’s

What if someone manually changes the web url to an invalid id? We can check this using a conditional at the top of the page, and redirect them back to the shirt.php page if it’s invalid. Let’s do a quick test and echo out our $product and $product_id variables. You can see if the url is invalid, there is still a $product_id, but $product comes out as null, since there’s no array for it.

 

We’ll start with a conditional with the isset function to make sure that the $_GET variable named id exists. If it does, it’ll set the product_id variable. Next, we’ll check if our main products array has a shirt with that id in it. If it does, then it sets the $product variable on this page. Using else blocks, if there is no id at all, it will say that message. If there is an id but it’s invalid, then that message will be displayed.

We can write a second conditional after that that checks whether $product has been set. Due to the previous code block, if it was, we know it was a valid ID.

The negation operator ! let’s you check if something is NOT something. Here, we make it so that if the $product variable is not set, it redirects back to teh shirts.php page using the header variable.

---

Adding Available Sizes

We can customize the shirt sizes for each shirt by adding a new value to our second dimension array, which will actually be another array, a third dimension array.

Now we can modify our form to use that array instead of the static html. We will use a foreach loop like we did before for the shirts page.

The shirt sizes listed on the page will now update dynamically based on what is listed in the main product array.

---

Working with Functions

Introducing Functions

Now to update the main landing page. There are some shirts here, but right now they’re just using static html, rather than the stuff we set up for the shirts page.

First, we’ll include the product array right above it. Then, we’ll rewrite the list to be generated by a foreach loop. However, we’ve already done something like this before, so it might be better to set up a function to use. Functions usually perform a small, specific task, and don’t do anything until they’re called. There are three parts to a function: 1. Its name. 2. The argument list – a list of values you can tell it you will pass it when it executes it code. 3, It’s return value. In the example below, the name is count, the argument (which you put in parentheses after the name) is the array, and the return value it gives you is the number of elements in the array. Other examples include isset and date.

---

User-Defined Functions

Here, we’ll make a function that mimics the count function. First, write the function command, then its name. Then, parentheses with the argument list, in this case $array. We can then use that variable $array in our code. Then, curly brackets which will surround the code block that will be executed when the function is run. Note that variables created outside of a function are not available inside of it.

Now to make the code to be run. We need it to count the items, so we’ll make a variable and add 1 to it during each run of the loop, which will give us the total. Before that we’ll make a variable for count and set it to 0. Note that this $count variable is completely unrelated to the $count one outside of the function.

To return this value back to the main code with the return command. Then in our main code we can replace count() with our mimic_count function.

---

Creating the Shirt Display Function

Here’s the gist of the function we need here:

Since we need this in both shirts.php and index.php, we’ll put it in an include file, and since it will only be used with the products array, we can just put it in there. We’ll copy over the code from shirts.php that already does this. Rather than returning a bunch of echo’d things, it’s better to use the technique before where we make a blank variable and add things to it with concatenation.

Now to use this function in our pages. Remember that we need to pass in the arguments as well. What’s nice is that now whenever we need to have a list items of shirts, we can just use this function.

---

Displaying Only Four Shirts

However, on the home page we only want four shirts displayed. First we’ll make an element called total_products, and set it equal to the number of elements in the array, using the count function so the number will always be accurate. We’ll create a second variable called position and set it 0, which we’ll use to keep track of how many items we’ve looped through. In our foreach loop, we’ll add one to it each time we loop.

Now we’ll add a conditional to only add the shirt if it’s one of the last 4 elements in the array. The logic will go like this – we can subtract the total number of shirts from the position. When the result less than 4, we know we’re on the last 4 shirts in the array. Total products = 8, position = 5, remaining = 3. So, the math will be total products – position < 4.

Now, let’s also make it so it adds to a string like we did before. We’ll make an empty variable called list_view_html before the foreach loop. In the loop we’ll have it concatenate to that variable each time it loops. Then, we can echo the variable containing the for list items outside the loop.

If we had a ton of shirts, looping through each one like this to find the last four might not be the most efficient approach, but this is okay for now.

The last thing we’d like to do is have the shirts appear in reverse order, so the most recent one comes first. To fix this, we’ll modify the line of code with the concatenation and have the shirt get added to the beginning of the variable.

---

Wrapping Up the Project

Validating Contact Form Data

Now to set up the email that gets sent when you fill out the form. First we need to validate the form data we receive. We want to make sure that each field has a value entered, starting with name.

But what if someone just puts spaces? There’s a php function called trim you can use which will remove the white space at the beginning and end of the text. We can put it in our conditional, but then that doesn’t help us if we need a trimmed name later in the code.

Instead, let’s trim it up top when we set the variables.

Next we’ll make the conditional return false if the name, email, or message are blank, using OR.

If you submit any of those blank, it now takes you to a new page with just the echo message.

Ok, now we need to protect our form from spam robots. 2 kinds 1. Fill out all forms hoping they’ll be displayed on a website somewhere, like a comments section. 2. More harmful – they have a way of using your form to send out emails to thousands of other people. This is called the email header injection exploit. There it’s described and a code snippet is provided to protect against the attack. Basically, it’s a foreach loop that goes through each post submission to see if it contains a malicious value, and if it does, uses exit to shut it down. We’ll add an error message as well with echo.

To combat the first kind of spammer we’ll use a spam honeypot field. The spammer fills out every field in the form, so we’ll add one our normal visitors can’t see with a normal name and id like address, then hide it with display:none;

Then up top, we’ll add a conditional to see if that field has a value, and if it does display an error message and exit it.

Finally, if there’s an issue with the CSS and a real user accidentally sees it, we’ll add a note to let them know to leave it blank.

---

Using a Third-Party Library

A third-party library is basically a set of include files that other people maintain. We’ll use phpmailer to send our emails. The file we need is class.phpmailer.php, which you should copy over to your project into the inc folder, in it’s own folder. Each library you use should get its own folder in the inc folder.

The require_once command is like include, the difference being that if there’s an error, include will give an error but still execute the rest of the code. But, require_once will instead give an error and execute no more code. There’s require, require_once, include, and include_once. The once ones are good if you only want a file to be loaded once, like if it contains functions or sends emails.

Next we’ll create an object from phpmailer named $mail. This has a method that let’s you validate email addresses. To access an object method or property, first write the objects name, then ->, then the method name, the argument list in parentheses, then curly brackets for the code.

---

Sending the Contact Form Email

Now, we’ll use code from the phpmailer example file to set up our email.  Notice that we’re using the -> to set different methods for our $mail object.

Now, a lot of what we need is already in the variables created from the form submission, so we’ll go through and replace those out. AddReplyTo adds new reply to names to the email. Since we want to reply to the person who filled out the form, we’ll use the variables. SetFrom let’s us set who is sending us the email, in this case once again the person who filled out the form. Since we have that, we don’t actually need the AddReplyTo. The $address variable let’s us set the recipient of this email, in this case us, which we’ll then plug into the AddAddress method.

Methods have parentheses after their names for the argument lists, properties do not. For the Subject property, we’ll edit the message and concatenate the person’s name to the end of it. This makes things more clear and prevents each email from having the exact same subject and getting them all grouped in the same convo. The msgHTML() method sets the body of the email, and we’ll pass in our $email_body variable.

The conditional at the end actually sends the email, calling the method name within it. Here’s how this works. PHP calls the send method, which should send the email, and will return a value of true or false. Since it’s what our conditional is checking, if it’s true, the if block will execute. To check if it did not work we can use the negation operator !.

If there’s an error, we’ll display a message and stop our code from executing. ErrorInfo doesn’t have parentheses after it so we know it’s a property and not a method.

The final thing to do is to modify the email body so it uses html break tags instead of php ones.

If you don’t use a separate mail server, it will use your sites server to send the email, which isn’t recommended.

---

Deploying the Site

In Paypal, under my selling tools you can upload your logo to your cart page. You can also have it redirect back to your site once the transaction is complete. We’ll make a receipt.php page for that. $section can be set to none, because we don’t need anything underlined in the main nav.

Now, we need to make the cart picture in the nav actually link to the cart. It’s under paypal > my selling tools > paypal buttons. We can make this into one link using GET variables using a ? to start, then variable=value, then & to add each new one.

We can now post that link in our header file. Make sure to escape the ampersands with &amp;. The link now works.

Now, load up your site to your server! It’s good to go.

---

Finishing PayPal Configuration

You can customize your payment page under my selling tools.