WordPress is a blogging platform and content management system (CMS). You used WordPress.com in a previous course, which is a limited version of WordPress hosting on the WordPress.com servers. You will be installing the WordPress system (files and database) to a subdomain on your domain, so you can use the full feature set of WordPress options.
WordPress was co-founded by Matt Mullenweg and Mike Little in 2003. It started out as a simple open-source platform, gradually evolved into its present form as a powerful CMS that is technology that runs about 34% of sites on the Web and holds 60% of the CMS market. It is powered by PHP and uses MySQL as the DBMS.
Reclaim Hosting
Your Reclaim Hosting account allows you to install a self-hosted WordPress installation on your domain or on a subdomain. We will be doing this and customizing it for your final project.
Creating a Subdomain
Go to ReclaimHosting.com and login with your username and password. Then go to the CPanel and under Domains click on Subdomains. Here you will be instructed to create a subdomain for your website. Keep in mind to make the name short and related to your topic that you are choosing. You will find the subdomain under the root of your domain when you ftp (it is mapped to public-html, but you will find it in the root). For this exercise, you can just do a “test” subdomain. You can do another subdomain and install later for your project.
Let’s Encrypt
When you set up a subdomain on Reclaim Hosting, you need to issue an SSL certificate to it. In the CPanel, under Security, choose Let’s Encrypt. There you can choose this subdomain and click on the Issue button.
Installing WordPress
In the CPanel, go to WordPress under Applications. On the right of the page select the button that says ‘Install this Application.’ Once you get to the next page it is very important that you install WordPress to the correct domain/subdomain under the Location tab. Use the secure version of your subdomain (ex. https://subdomain.yourdomain.com). Under the directory section, remove the word “blog” and make sure it is blank. Next, scroll down to the Settings tab and create a username and password. After you’ve changed these, click Install.
Accessing your Site
To access and edit your new WordPress installation, go to your new subdomain (ex: subdomain.yourname.com/wp-admin). The username and password that you selected above will be used to login here.
Making Modifications
Once you are signed in, you will see the dashboard area of your site. This is where you will have access to all the admin options of your WordPress site. In the admin panel, go to Users, then click Your Profile. Make appropriate changes to the way your name displays and any contact info. You should change your Display Name to your full name. This is particularly important for users who will be making posts on the site, so their name shows up appropriately.
When you first sign in, you may see that your WordPress version is out of date and needs to updated. Click to go through the process of updating your site.
There are many options and settings to control with WordPress. Under the Settings tab, select General. This is where you can change the Site Title, add a Tagline, and make other changes.
Under Writing, Reading, Discussion and other sections, you can change other settings to customize your blog.
The Reading section allows you to determine how your blog posts page functions. You can choose to have one or not, and choose whether it is the home page or another page that is your home. For your projects, it is not likely that you will be using a blog page, so you will create a page and select that here as a Static Page for your Home Page.
If you have installed any plugins that have Settings, you might find those options in the Settings area that allow you to customize your shite.
Under Posts, you can see the list of posts. This is where authors will be able to make blog posts. If you are using this feature, the first thing you should do is remove the Hello World post and start adding new posts.
You can go under Pages and Add and Edit any pages you want on the site. This is where you will create the pages of your site. Use the form to add content to the pages.
WordPress has a new method and layout for its posts and pages forms. It is called Gutenberg and was introduced in 2018. The entire editing experience has been rebuilt for media rich pages and posts. When you are adding content to a page, you use the + sign to choose from a series of blocks, whether you want a paragraph, image, code, heading and more. Yoou use the floating toolbars to select options and the arrows to the left of the blocks to move them up or down. The options to the right allow you to Publish, Update and Preview your page and adjust settings for Document and Block.
Gutenberg was introduced in response to plugins that were used to improve the WordPress editing experience. Expect changes to Gutenberg to continue through the near future as the platform is fine tuned. For more information, see the WordPress Gutenberg page. Gutenberg also allows you to create your own blocks, if you want to develop templates for frequently used features.
The Document settings allow you to establish a Featured Image (important if you want social media to display an image when linked to this page or post), Page Attributes and Layout options.
Adding Columns
Choose the Columns block when using the + button to insert a block. The default is two columns. To increase the number of columns, select the row containing the columns with the indicator to the left and in the right sidebar under Blocks, adjust the slider for the number of columns you want in that row.
Users – You may add additional users to your blog. Use Add New User Admin Panel. Provide info, password and give them a Role. They can login and change the password later.
Administrator – can do anything
Editor – can do anything related to posts, including delete
Author – can only affect their own posts
Contributor – can make posts, but they need to be moderated
Subscriber – has limited access to the site
Appearance
Widgets – you may include a variety of widgets on your site that can add content and/or functionality to your sidebars. Simply select a widget, drag it into the area you want it to be located and set the options. A common widget is to add a text block to a sidebar. You should also remove any of the default widgets that you are not using.
A good widget to include is a Twitter widget. WordPress now has a Custom HTML widget. Go to the Twitter Publish page and enter a Twitter url. Choose an Embedded Timeline. Customize the size and other options and get the html code it provides. Include this code in the Custom HTML widget that can display in a sidebar or footer on your page.
Menus – you can use the Menu feature to rearrange your menu items. When you create a new page, it goes in the nav bar. But you might want that page to be part of a dropdown or to be arranged in a different order. You can also add custom links or categories as items in your nav here, but carefully consider how this will be used.
Customize – depending on your theme, you may have the ability to customize certain aspects of your site in this area, including customizing CSS.
Plugin Options – additional options may appear in this area depending on what plugins you select. See Plugins below.
Themes and Customizing
You can change the theme under Appearance. Find a very simple theme that can be modified to the desired design. We will be looking at various themes. Find a Bootstrap-based theme that you can modify. Use the search under Add Themes and search for Bootstrap. If your theme has other options, they may be available under Appearance (theme options, menus, header background, etc) One of the themes I have used frequently is Spacious, but feel free to look around at others.
We will discuss how to use the Editor and Plugins to customize the site. There is much flexibility in having a self-hosted WordPress website that you cannot do with a WordPress.com site or other type of cloud-hosted CMS.
Themes
Themes use HTML, CSS and PHP to determine the look of the site. You can view new themes or download new themes from the thousands that are available on the Web. Under Themes, Choose Add New and search and browse through the themes. You can get a Preview of what your site would look like with each theme. Once you find a theme you like, Choose Install to automatically install a theme. Make sure you find a well designed, updated theme to install on your blog. Once you Install a theme, you will need to Activate it for your site.
For testing purposes, let’s start with the WP Bootstrap Starter theme. Under Appearance, notice the new options for Header, Background, Additional CSS, etc. Here you can work on customizing the design of your site. Use the options under Customize the modify the Site Identity, Preset Styles, Header, etc. Some of the settings in this area mirror the changes you can make in the Settings area of the WordPress sidebar.
Keep in mind that different themes will have different options. You will need to take time to become familiar with your chosen theme in order to modify it.
Modifying CSS
We already know CSS. So you can go into the CSS to change styles on the site. If your theme offers a Customize area under Appearance, you can add styles there. Or under Appearance, choose Editor. You can see all the template files, including any CSS files associated with your site.
You can use the Inspect Element feature of your browser to determine which styles to change. Look for the sections you want to change and feel free to experiment. Change things and see what it effects, colors, fonts, sizes, etc.
Child Themes
If you are not using the Customize CSS area under Appearances, WordPress recommends creating a child theme anytime you make modifications to a theme. By creating a child theme, you avoid losing all your modifications when the original designer updates the theme. The original designer may be updating a theme for security reasons or to be compliant with new standards, so being able to retain your changes and work when that happens is important.
The easiest way to get a child theme is to use a Child Theme plugin (see Plugins below for more on Plugin operations) to make this process a little smoother. The Child Theme Configurator Plugin is recommended. Install it. It will create a Child Theme option under Tools. There you can pick the theme for which you want to create the Child Theme. Pick Create a New Child Theme and use the Analyze Button. You can keep the default options and choose the Create New Child Theme button at the bottom. Now under Appearance, Theme Editor, you can choose the new Child Theme to edit and add to the CSS.
Quick Edit Options
There are a few things you can easily do in the Quick Edit section of the WP . interface. When you are viewing a list of Pages or Posts, hover over a post and choose Quick Edit. Here you can change the Template (say if you want a sidebar or not). For the theme we are testing, try out the Template option for Full Width and Left Sidebar.
You can also allow or disallow comments in the Quick Edit area. For your sites, turn off the box for comments.
Plugins
Plugins are developed throughout the WordPress community and made available through the WordPress interface. They allow you to easily add a range of functionality to your site, things like different types of social media widgets, social sharing features, slideshows and content sliders.
To install a plugin, go to the Plugins area. Here you can review installed plugins or browse for new plugins under Add New. Search by keyword to find desired plugin and choose Install Now. You can see your installed plugins and deactivate or remove them, if necessary. Every plugin functions differently, so you must read the instructions to apply it. Plugins also have a user star rating, so check for those that have been used and approved by many users. There are thousands of plugins, but we will cover a few popular ones. Feel free to seek out and find plugins to use.
Some Recommended Plugins
Social Media Share Buttons & Social Sharing Icons – install this plugin and set up the options for selecting the social sharing buttons, including your desired information and the location you want them to show on a page.
All In One Favicon – install this plugin and go to its Settings on the Plugins page. Create a square version of your logo. This plugin lets you upload png or gif versions, as well as a favicon.ico file that you create via a Favicon Generator. It also allows you to create a different favicon for frontend and backend.
Nivo Slider – there are many Photo Slider plugins. The Nivo Slider is one you can try, but feel free to check out others. After installing and activating, you will see Nivo Slider in the sidebar. Choose Add New Slider, give it a title and with the Configure button, upload your images from the Media Library. Be sure your images are exactly the same size and include captions on them (all good photo presentations have captions in the Media Library. Pick the Nivo Slider Default theme (or other theme). After you publish the Slider, you can use the shortcode to put it into your page (choose a shortcode block with the + sign).
WP Quiz – there are also numerous Quiz plugins for WordPress. Install and activate WP Quiz and find it in the sidebar. Choose Add New, then pick your type of quiz. Then you can add questions and results and work with Styling and Settings. You can include images with your questions and answers. Use the shortcode to include the Quiz on a page.
A Trivia Quiz has right and wrong answers. Set up the questions and identify correct answers. You can set up the result based on how the user scores. A Personality Quiz, like a Buzzfeed-style quiz, lets you set up results and then weight answers for each question. The Flip quiz lets you provide images to flip for the user to select.
Another quiz tool you might consider is Quiz Cat, that also does Buzzfeed-style quizzes. You can use it to easily set up quiz questions, answers, images and scoring.
Easy Charts – allows you to include data presentations on your site. After you install and activate Easy Charts, you will find it in the sidebar. Click Add New. Include your data (modify the data they have provided as a sample) and pick the type of chart (bar, area, pie, etc.). Depending on your chart type, there are various options to include. Use the shortcode to include the chart on the page.
GA Google Analytics – use Google Analytics to track site usage. This plugin allows you to add the tracking code from Google Analytics to your site. You first have to Sign Up for Google Analytics with your Google account and get the Tracking ID. You will use this in the plugin and it will be set up for your entire site. Then you can go to Google Analytics to check their range of reports.
You have to be careful when installing plugins. Occasionally you will encounter conflicts with different plugins that will have to be resolved. Choose and activate only the plugins you need. There are many plugins, with new ones being created all the time. You may need to research and try several depending on your desired functionality.
One Page and Scroll to Anchor
You can create a one-page site that uses anchors for navigation, much like we did in the Bootstrap tutorial. First, create a heading block and choose the three dots that represent options. Select Edit as HTML. For your heading, include an id to identify the anchor location.
<h2 id="about">About</h2>Then you need to set up a menu with custom links. You will remove any other links you don’t need, and use the Custom Link option to create a menu with a # (for example, url would be #about and label would be About. Choose Add to Menu.
There is a Plugin called Page Scroll to ID that you can add that will provide the Scrolling navigation feature.
There is also a Sticky Menu (or Anything) plugin that allows the menu to stick at the top of the page. This is a good idea if you are doing a one-page site. For the WP Bootstrap Starter theme we are using, simply use header#masthead as the “sticky” element under Settings (after installing the plugin). For other themes, you can use the Chrome, Inspector to identify the correct element.
Changing the Subdomain of a WordPress Site
Sometimes students start with one subdomain, but decide they want to change it later. Maybe they like another name or they changed the topic of their project. Changing a subdomain for a WordPress site involves a lot of intricate things. All the file references and databases need to be updated. But Reclaim Hosting makes that process simple by allowing you to Clone a WordPress site. Create the new subdomain first in the Subdomain area of the Cpanel (see above). Then go into the WordPress section and find your installation. (Click where it says My Installations). For the installation you want to clone, find the Clone tool to the right. See the red circle in the image below.
Just be sure to pick the new subdomain where you want to install it. It will take a few seconds and you will have a cloned site. You should then remove the old one and remove the old subdomain, to eliminate any confusion.