WordPress

WordPress Security 2017

Reading the following articles will give you a good introduction to WordPress security:

YOAST: WP Security in a Few Easy Steps:
https://yoast.com/wordpress-security/#wpsecuritykeys

WP-CONFIG Security Keys ( WP Beginner )
http://www.wpbeginner.com/beginners-guide/what-why-and-hows-of-wordpress-security-keys/

HOW TO REMOVE GOOGLE BLACKLIST WARNING ( Succuri )
https://sucuri.net/guides/how-to-remove-google-blacklist-warning

CODEX: HARDENING WORDPRESS
https://codex.wordpress.org/Hardening_WordPress

ULTIMATE GUIDE TO WORDPRESS SECURITY (wpmudev)
https://premium.wpmudev.org/blog/ultimate-guide-wordpress-security/?utm_expid=3606929-108.O6f5ypXuTg-XPCV9sY1yrw.0&utm_referrer=https%3A%2F%2Fwww.google.ca%2F

Standard
WordPress

WordPress Theme and Plugin Configuration Exercise #8324

In this exercise, you will download and configure a free WordPress theme, and some plugins. You are welcome to use the Internet or your notes.

 

First, please download this sample duplicator package and install it in your MAMP testing environment. Make sure to add yourself as a new ADMIN user in this process.

The content is approximately 12 posts, with feature images and summaries. Each post has a youtube video right at the beginning.

Then, download and install the following.

  • the Ryan theme
  • the Ninja Forms plugin
  • the Yet Another Related Posts plugin (YARPP)

If you are at Langara College, don’t forget that we have to install themes and plugins manually, owing to network restrictions.

You may not install any other plugins.

You job is to make the site look like the one at this url.

A lot, but not all, of what you will do will take place in the theme customizer.

Front Page

The front page is NOT a static page.

Use the theme customizer to enable the slider. The images are included in the Duplicator package you have already installed: reuse feature images from three articles. For the text that appears on those images, use the names and the quotes that are on the live site.

Because the images are black and white, make the changes (visible in the live site or in the image below) to make the text in the slider more legible.

Billie Holiday Text Design

Use the theme customizer to set up the three featured content areas that are underneath the slider. Use the same icons and text as in the live site (or the screenshot below). Do not link the featured content to anything (we don’t have any pages to link them to at this point).

Featured Content Design

If the front page is not showing article summaries instead of the long articles, make sure that it does.

Menus

Make the menus in the header area like they are on the live site.

Posts

Change the publication date of all posts to be within the last year. Remove any tags that are not explicitly music-related.

Another User

Make another user with Editor access level. Give that author the name Walter White and the email walterwhite@kevinmc.ca.

Assign all posts to this user.

At the end of every post (in single view), make sure that the author bio and gravatar is displayed: “Walter White is a very enthusiastic jazz fan and chemist.”  It will look similar to the one below:

The Favicon

Included with the files you downloaded to start this exercise is a PNG file. Upload it and make it work as the favicon on the site (visible in in the browser tab in Chrome, for example).

Working Favicon

Related Posts

Using YARPP, make the site display up to three related posts at the end of each article when it is viewed in single mode (ie when we’re on a post page, not an index or archive). The title of that section, set via the plugin, will be You might also like…

Related Posts

Set YARPP to say “So sorry: no related articles” if no related posts are returned.

Body Text

Change all paragraph type to the typical georgia font stack.

The Sidebar in Posts Full Views

When we see a post in full view, make sure there is a sidebar with only Search, Recent Posts, Categories, and Archives, in that order. 

Single View

Contact Form

Using the Ninja Forms plugin, make a Contact page. Make sure you that the CONTACT link in the header goes to that page.

 

BONUS MARKS

For a 25% bonus mark, figure out how to get that contact form to show up at the bottom of every page in the site.

For another 25% bonus mark, figure out how to make the videos not show related posts when they finish playing.

Remember that you may NOT install any other plugins than the two used in the exercise.

 

Hand It In

When you are done, make a Duplicator package of your site. Put the installer and the zip archive in a folder with your name + midterm in the name, then hand it into studentshare (PUBL 1232, if you are a PUBLISHING student).

Make sure that you are in CHROME when you are making the DUPLICATOR package: Safari will automatically unpack a ZIP when you download it, thereby making it unusable.

 

 

 

 

 

Standard
WordPress

Moving A WordPress Site

There are a number of scenarios under which you might need to move a WordPress installation.

  • a changed domain
  • changed hosting
  • creating a testing environment
  • moving a site created in a testing environment to a live server

The easiest way to move a site is to use the Export / Import functionality available in the Tools section in the Dashboard. If you choose to import attachments, WordPress will even get the media that are attached to your posts.

As I say, this is the simplest method. As long as the importing site can see the site from which the content was imported, this typically goes smoothly.

However, there are some drawbacks to this process. There is still a lot of manual set up (plugins, themes, etc). Media that was imported to the original site but not attached to posts will not be imported. And a live site cannot see a site created in a test environment like MAMP.

For that reason and more, it is a good idea to learn how to transfer a site from a testing environment to a live server. In my mind, the easiest and most reliable way to do this is to use the Duplicator plugin.

If you have ever installed a Duplicator archive to set up a WordPress installation in a testing environment, the process is almost exactly the same.

How to Do It

Upload the Duplicator Files

First of all, upload a Duplicator installer and archive file to your hosting environment. In the screenshot below, I am putting the files in a subfolder of one of my sites, but if you wanted the site to be at root of your domain, you would not use the subfolder.

Make a Database

In your host company’s control panel, look for where databases are created. 

In my example here, I would click on MySQL Database. When making the database, use obscure names and passwords as possible. Copy each field into a text file, though, because you will need that information during the Duplicator installation process.

.

( The database name used in this example wasn’t allowed: no uppercase allowed at my host. This database was also destroyed after making this page, so there’s no security risk in posting this. )

Once your database has been created, you will typically be shown a screen showing your databases, as well as other relevant information, such as the database server name. For security reasons, I have blurred the server name as well as the names of the other databases I’m using in the next screenshot:

Add the database server name to your text file.

You are now ready to run the Duplicator installation process.

Install the Site

In a Web browser, go to the URL of the installer file that you uploaded earlier. You probably won’t be able to just go to the folder: for security reasons, most hosts will be configured to not generate an index of the files in a directory in the absence of an index file.

Here is the Duplicator process that starts when I go to this URL:

Test the Connection. If you have any problems here, contact your host company. Otherwise, the process is the same as when you are setting up a MAMP installation with a Duplicator package.

However, there is one exception: make sure that you delete the DUPLICATION installer and archive files from that directory. You definitely do not want someone to find them.

NOTE: the site listed above was setup for the purposes of making these screenshots. It, and the database listed above, no longer exists.

 

 

 

Standard
WordPress

Underscores Menu Exercise

If you download and install an underscores-based starter theme (underscores.me), you will notice that it comes with only one menu location (called Primary in the dashboard’s menu area):

Menu Location

In this exercise, you will add another menu or two. Then you make one work with font-awesome.

Introducing Functions.php

One of the mandatory files in a WordPress theme is functions.php. It acts like a plugin for your site, calling functions that happen when the site loads. With functions.php we can run setup functions, modify (filter) default WordPress output or other functionality, or add or remove features, etc.

As an aside: as you get more comfortable with theming, you might write plugins to achieve various aims rather than putting such code into functions. The reason for this is that a plugin is portable: it can be easily installed on other sites, whereas functions.php is obviously tied to the theme. At this point, though, file that thought away for future use.

Anyway, open functions.php in your editor.

Scoll down about 40 or 50 lines. You are looking for the register_nav_menus() function. It should look more-or-less like this:

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
    'menu-1' => esc_html__( 'Primary', 'guitarmania' ),
) );

(The theme name, the second argument passed to the esc_html sanitizing function, will be whatever you named the theme at underscores.me ).

What do these elements mean? There’s really only two things we need to make note of here.

  • the register_nav_menus() function is passed an argument in the form of an associative array
  • that array links machine-understandable names with human-friendly names. The former are used in template files to call that particular menu location. The latter are the names seen in the Dashboard menu locations area.

To illustrate, copy the single line that is inside the array and paste it twice, each copy on its own line. Change the number in the first part (ie menu-1, menu-2, etc) and the human-friendly names to the way I have done below:

// This theme uses wp_nav_menu() in three locations.
register_nav_menus( array(
    'menu-1' => esc_html__( 'Primary Menu', 'guitarmania' ),
    'menu-2' => esc_html__( 'Secondary Menu', 'guitarmania' ),
    'menu-3' => esc_html__( 'Social Menu', 'guitarmania' ),
) );

Now go to the Menu area of the Dashboard. You should now see in the MENU LOCATION setting area all three menu locations.

menu locations

The key here is that the human-readable text can have spaces and special characters, whereas the machine naming has to follow typical coding naming conventions.

I do not, moreover, have to keep the menu-1, menu-2, menu-3 machine names as above. I typically change the machine names to something easier to remember, like the following:

// This theme uses wp_nav_menu() in three locations.
register_nav_menus( array(
    'menu-primary' => esc_html__( 'Primary Menu', 'guitarmania' ),
    'menu-secondary' => esc_html__( 'Secondary Menu', 'guitarmania' ),
    'menu-social' => esc_html__( 'Social Menu', 'guitarmania' ),
) );


Since it is this name by which we will call the associated menu in template files, it makes sense to me to name them as above, but you may find other names more obvious for each project.

Menu Locations in Template Files

If you go to the front page of your site now, you will find that your menu does not show up (or worse). The reason is that we changed the machine-name from menu-1 to menu-primary.

We will fix that first. Open header.php in your editor.

Scroll down to where you find the NAV element, somewhere near line 40 after the site-branding section.

<nav id="site-navigation" class="main-navigation" role="navigation">
   <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'midterm' ); ?></button>
   <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->

Change the value associated with the theme_location key to menu-primary as below:

 <?php wp_nav_menu( array( 'theme_location' => 'menu-primary', 'menu_id' => 'primary-menu' ) ); ?>

You will no doubt have noticed that there is another key here: menu_id. This is the ID that WordPress will attach to the menu in the outputted HTML so that you can refer to it uniquely in your CSS.

A New Menu Location

In the Dashboard, make a menu called Social Links, or something to that effect. Add links to Facebook, Pinterest, YouTube, and Twitter. For the purposes of this exercise, just link to the front pages of those sites: if this were a real site, you would of course link to more specific pages on those sites.

Don’t forget to assign this new menu to the Social Links menu location,

Now back to your code editor: copy the entire NAV element from the header.php file and then open the footer.php file.

Paste your copied content just inside the FOOTER element inside footer.php.

We will need to change a few things here:

  • change the NAV element ID and class
  • remove the BUTTON element: that is for the hamburger menu in the header
  • change the value of the THEME_LOCATION to the machine-readable name
  • change the value of the MENU_ID to a unique ID

We should be left with something like this:

<nav id="social-navigation" class="social-navigation" role="navigation">
   <?php wp_nav_menu( array( 'theme_location' => 'menu-social', 'menu_id' => 'social-menu' ) ); ?>
</nav><!-- #social-navigation -->

Save your footer.php file and then go to any page in your site.

You should now see the links to your social sites, in presumably unstyled text.

In part two of this menu exploration, we will add font awesome and learn about the enqueuing functions that are fundamental to WordPress.

Standard
WordPress

WordPress Underscores & Basic Loop Exploration

Basic Setup

For this exercise, we will learn about the WordPress Template Hierarchy, the WordPress Loop, and some basic WordPress template tags.

First of all, please download this zip archive. Inside it you will find a folder of screenshots and a folder with a Duplicator installer and archive combination.

Copy the installer and the archive from inside the DuplicatorPackage folder into your MAMP htdocs folder. Put them in a folder called themingbasics.

Then start up MAMP and make a new database called themingbasics.

Go to the root level of your local server (localhost:8888 on Mac), click the themingbasics folder and then run the Duplicator installer.

As part of the installation process (step two or three), create a new ADMIN account with your name as the user and password (for ease of recollection. This is just a lab exercise, so we are not worried about a site being hacked here).

Download A Starter Theme

Go to http://underscores.me, fill in the form, and download a starter theme. In the ADVANCED options section, click on SASSIFY! if we have covered SASS in class. Otherwise, leave it unclicked.

Install the theme into wp-content/themes.

Now activate the theme in the WordPress dashboard.

Go to the front page of your site. What you will see is that the underscores-based theme you just created has all of the functionality you would expect from a modern WordPress theme, but none of the styling.

The idea here is that you will build your own styling onto the starter theme rather than spend time overruling someone else’s styling decisions.

Set Up Netbeans

Explanations of how to use Netbeans with WordPress are here.

The WordPress Template Hierarchy

When a user goes anywhere in a WordPress site, the URL determines which theme file will be used to generate the page.

This is what is meant when people speak of the WordPress Template Hierarchy. For more information, consult these links:

A useful tool for a WordPress developer is the Show Current Template plugin. It will show in the Admin menu bar which template files are involved in generating the current page.

In a nutshell, if a particular template file is available, WordPress will use it. If it is not available, it will use the next available file. The second link in the list above makes evident all of the possibilities in an easily understandable infographic.

For example, looking at that infographic, we learn that when the user clicks on any archive content (author link, tag link, category link, date link, etc), any number of files could be used to generate the content.

The key here is specificity. If we click on a link to an author’s posts (me, for example), a slightly simplified hierarchy is like this:

  1. author-nicename.php
  2. author-id.php
  3. author.php
  4. archive.php
  5. index.php

Going in order, WordPress will use the first template it finds in the theme. If author-kevin.php exists, that file will be used. If not, it will look to see if author-5.php (assuming Kevin is author number 5).

Otherwise, it will use author.php.

But if author.php is not in the theme, then archive.php will do it, if it exists.

Finally, if no more specific template file exists, WordPress will use index.php to generate the page. In this way index.php is the template file of last resort. 

You could, in fact, make a basic theme with just three files:

  • index.php
  • styles.php
  • functions.php

Add A Couple More Theme Files

Let’s add a couple more files. Technically speaking, these are not necessary, but I like to leave the index.php file untouched.

In your underscores starter theme, create a new file called front-page.php and home.php.

If we have a static home page (specified in Settings > Reading), it will be generated by front-page.php, while the blog posts page will be generated by home.php

Into it, copy the following code. You can remove anything that was put there by default by your editing program (such as Netbeans).

<?php
    get_header();
    if ( have_posts() ) : while ( have_posts() ) : the_post();
        the_content();
    endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
    endif;
    get_sidebar();
    get_footer(); 
?>

Now go to the front page of your site.

What we are going to do is build on this loop in class in order for you to get comfortable with how WordPress pulls content from the database and displays it in the browser.

The template tags we will use will be these (and perhaps a few more):

  • the_title();
  • the_feature_image();
  • the_tags();
  • the_category();
  • the_excerpt();
Standard
WordPress

WordPress Theme & Gallery Plugin Setup Exercise

Originally Created for WMDD 4840 2017 Midterm

Set Up a Testing Site

Download the latest version of WordPress.

Unzip it, and rename the resulting wordpress folder to your first name and last intial (for example: kevinm ). Put that folder where it needs to go to work in MAMP.

Set up your site. The site name will be European Guitarist. The site tagline can remain  Just Another WordPress Site.

Import Some Content

Download this xml export of WordPress content. Import it into your site.

( If you’re at Langara, remember the workaround we need to use to install themes or plugins in the labs ).

Assign all posts to you rather than importing the user in the xml file (which is me). As part of the import, be sure to include the images.

Make Some New Content

Make two pages with the following names:

  • Berlin—portrait
  • Berlin—landscape

You can leave them blank for now.

Configure the Site

In your WordPress installation, install the TONAL theme.

Use the theme customizer to make the main Navigational area look like the screenshot below. This area shows up when the user clicks the hamburger menu.

Main Navigation

Hint: there are three menus visible, even though the theme has support for only one menu. Figure out how to add the other two. In the xml file you imported, there is content for the main menu: categories or pages. The other two you will need to make.

Download Some More Images

Please download these photos for use in the next section.

Install a Gallery Plugin

Install the NEXTGen Gallery plugin (official name: NextGEN Gallery – WordPress Gallery Plugin). When installing NGG, skip the offer to link it up to some other service.

Make two NGG galleries. One will be called Berlin—portrait and one will be called Berlin—landscape. Yes, these names match the names of the pages you created earlier.

Use the images you just downloaded in the section above. As you can guess from the names, the portrait gallery will have the “tall” images. The other will have the landscape (“wide”) images.

Put each gallery in its respective page that you created earlier. Make sure that the links in the main navigation area work.

Each gallery page should look like this when it loads.

When the user clicks on an image, they will get taken to a slideshow style interface like this:

Bonus Marks

For 50% bonus marks, complete the following tasks.

Category Cleanup

Figure out how to delete the uncategorized category.

Capitalization

If you compare the following two screenshots, you will see that in the first one, not all the words in the descriptions on the images are capitalized. In the second screenshot, that is fixed. Make this happen without actually editing the descriptions: use CSS. ( And please ignore the fact that there’s a word selected in the first screenshot. )

Watermarks

Figure out how to have NextGen Gallery add PHOTO Markus Spiske / raumrot.com as a watermark on each image, in the bottom left corner. These will be added to the actual image, not overlaid via CSS.

Overlay Color Change

When a user clicks an image, they are taken to a slideshow-style interface, with a light grey, partially see-through, screen. Change the color of that screen to a dark blue, as in the screenshot below:

Center the Galleries

If you look at the first screenshot of the gallery (not the single image view), you will notice that gallery is not centered in the page. Figure out how to fix that.

 

WMDD HAND IN Instructions

If you are a WMDD4840 student, install the Duplicator plugin and then make a Duplicator package. The package will have an installer.php file and a zip archive with a long name.

Put both in a folder and then hand them into your handin folder on studentshare.

Then go get a coffee and relax.

 

PUBL HAND IN Instructions

If you are a PUBL student, install the Duplicator plugin and then make a Duplicator package. The package will have an installer.php file and a zip archive with a long name.

Now give the Duplicator package to someone else in the class. Install their project in your MAMP setup, in a folder with the name other-student. 

Once you’re done, show me or one of our friendly Instructional Assistants both your site and the newly installed site of your classmate.

Standard
WordPress

WordPress Plugins – Highly Rated, 2017

Installing a plugin is always a compromise. They can slow your site down. They can represent a security risk. They can conflict with other plugins or theme features.

But they can add a lot to the site user experience, or the site owner experience.

In other words, before installing a plugin, do as much research as you can about it, and potential competitors or complications.

I’ve use a lot, but not all, of these plugins over the years.

 

SECURITY

  • WordFence
  • Sucurri

SEO

  • WordPress SEO by Yoast
  • All in One SEO Pack

BACKUP

  • Duplicator Pro
  • Updraft Plus
  • Backup Buddy

FORMS

  • ContactForm 7
  • Ninja Forms
  • WPForms

TWO-Factor Authentication

  • Clef
  • Duo
  • Google Authenticator

SEARCH

  • Relevanssi

SUBSCRIPTION MANAGEMENT

  • OptinMonster

CACHING

  • W3 Total Cache
  • WP Super Cache

EDITORIAL WORKFLOW

  • Edit Flow

SLIDESHOW

  • Soliloquy

GALLERY

  • Envira Gallery
  • NextGEN Gallery

IMAGES

  • Smush
  • Regenerate Thumbnails

MAINTENANCE MODE

  • Coming Soon Page & Maintenance Mode by SeedProd

SOCIAL

  • Floating Social Bar
  • JetPack

COMMENTING

  • Akismet
  • Disquus

RELATED POSTS

  • YARPP
  • JetPack

ANALYTICS

  • Google Analytics
  • JetPack

CUSTOM FIELDS

  • Advanced Custom Fields

EDITOR

  • Tiny MCE Advanced

DATA Management

  • Duplicate Post

Some Plugin-Related Links:

https://www.youtube.com/watch?v=jn3O4wOlF3Q

37 Plugins Rundown from WPMUDEV

https://premium.wpmudev.org/blog/essential-wordpress-plugins/?utm_expid=3606929-97.J2zL7V7mQbSNQDPrXwvBgQ.0&utm_referrer=https%3A%2F%2Fwww.google.ca%2F

Standard
WordPress

WordPress Lab Exercise: Theme Tryouts

One trouble in figuring out which themes or plugins to try out is that there are tons of reviews on the web, but with a lot of them you don’t really know who’s doing the reviewing.

After awhile, though, you start to recognize sites that have respect in the WordPress community. Some I would mention would be

  • Smashing Magazine
  • the wordpress codex
  • wpmudev
  • wpbeginner
  • creative bloq

As well as some of the more general computer industry publications like MacWorld or PCWorld.

What I want to stress here, though, is that you need to research themes and plugins before you use them—especially on a live site. A bad one can contain malware, slow your site down, or bring it down entirely.

Never, in other words, download themes and plugins unless you are clear where they come from. 

For this exercise, I want you to try out at least 10 themes from the following article. You should be able to get all or most of them through the WordPress Themes area in the dashboard.

WPMUDEV: Best 100 Free WP Themes Ever

When I say try out, I mean check out all the configuration options that theme provides. Look in depth to how the theme behaves, and what customization options it has.

Try also to test themes that look different, and have different intended audience or uses.

Finally, from the WordPress dashboard, install the theme entitled parabola.

When you are done, in a TextEdit (or NotePad) file, explain which three you thought were the most impressive. Provide reasons why. Point form is totally OK.

Explain also what you thought of the parabola theme.

 

Standard
WordPress

WordPress Lab Exercise 4: Free WebHost Install & Automated Backup

For this exercise, I want you to get WordPress running on a free web hosting service: 000webhost.com and use their automated WordPress installation.

First, sign up with the service. Then figure out how to install WordPress on the site.

When you sign up for the service, you will need to use a more secure username and password than the ones we’ve used in class, so please use your real email address so you can get the password reset if needed. Similarly, make sure that you use a secure username and password for the WordPress installation you do.

Once you’ve done this, download this xml file of a sample wp site backup then go Tools > Import in the Dashboard. When prompted to install the plugin, do it.

In the installation, make sure that you:

  • assign all posts to the user you created when you set up the site
  • import the any attachments (media): this will work because the content you’re importing is a backup of a site that’s still live.

As noted, 000webhost is a free service, so it’s not perfect. But the price is right.

Automated BackUp Setup

Once you’ve done the site setup and importation of content, set up an automated backup scheme, using:

  • a new gmail account
  • a new dropbox account
  • an automated backup plugin such as Updraft Plus.

If you’re at Langara,you can install plugins directly from the Plugins area of the Dashboard because your WP site isn’t being blocked by the Langara network, as it’s not in our testing environment.

Once you’ve got all this working, show me.

 

 

Standard
WordPress

WordPress Lab Exercise 3

NOTE: in this exercise, do not edit any theme template files. 

Task One: Installing Your Site, Pt 1

  • Download the content. Unzip the file.
  • Inside that folder will be a folder called theming-basics-duplicator. Put it in /Applications/MAMP/htdocs
  • Rename the folder to wpconfigurationexercise. 
  • Inside that folder is a folder called usefulplugins. Delete it: it’s not needed for this exercise.
  • Start up MAMP.
  • In phpMyAdmin, make a new database called wpconfigurationexercise
  • Go to your web folder (on Mac: localhost:8888)
  • Click the link to the wpconfigurationexercise folder

Task Two: Running Duplicator

In the downloaded material is a file called installer.php and a zip file with a name with a lot of numbers in it. You will see links to both in your web browser.

Index View

These files are created with an amazing plugin called Duplicator, which allows you to move WordPress sites very easily. Click on the installer.php link.

In the next screen, use the settings in the screenshot below if you’re using MAMP on Mac. With other approaches, your database user and password might be different. Be sure to click Connect and Remove All Data rather than Create New Database (the former approach is more widely supported).

Duplicator:New Database

Click Test Connection. If you’ve entered the correct information above, you should see a message saying the connection is working:

At the bottom of the screen, click the “I have read…” button and then click Run Deployment. Finally, click OK when the Alert message comes up.

This will take you to Step 2 of the Duplicator Process.

In that screen, click on Advanced Options, and go to the Add New Admin Account section. Duplicator: New Admin Account

Do three things here:

  • Make a New Admin Account with your name as user and password. ( We’re doing this so that the lab isn’t delayed by people forgetting the name or password they used. It goes without saying, hopefully, that this would be a very bad idea on a live site… )
  • Click Keep Post GUID unchanged.
  • Click Run Update

The Final Step in the Duplicator process is to update your permalinks and delete the original Duplicator files.

Just click on the Save Permalinks button and you will be taken to the site.

Duplicator: Save Pe

All you need to do here is save the Permalinks setting (although you can change the permalink scheme if you want, it’s not required).

Finally, in the Permalink settings page, you will notice a box at the top. After you’ve saved the Permalink settings, click the link in the box:

When you go to the Cleanup page, click on Delete Reserved Files and then click on Clear Build Cache. We do this because there is content such as user data (including passwords in the database) in the site you’re moving.

Once you do this you will likely get this message: It is recommended to remove your archive file from the root of your WordPress install. This will need to be done manually

 

To do this, go on your computer to the root level of your WordPress installation. In this case it would be in htdocs/wpconfigurationexercise.

 

Task Three: Change Themes

Change to the twentyfourteen theme.

(You might see a message about updating WordPress and the themes in this exercise. If you’re at home, please update. If you’re at Langara, don’t bother trying: the network blocks it, and the manual workarounds would be a bit tedious.)

Task Four: Set Up The Menu and A Contact Form

Install the Contact Form 7 plugin. If you’re in a Langara lab, you will need to install it manually:

  • download it from wordpress.org (search the plugins section)
  • unzip it if it doesn’t do that automatically
  • put the resulting folder in htdocs/wpconfigurationexercise/wp-content/plugins
  • go to Dashboard > Plugins and activate Contact Form 7

Now figure out how to make the form, and put it in a page called Contact Us.

Now put a link to that page in the menu (you might need to activate the main menu, but there is a menu already built). From the already-built menu, make sure you  remove the link in to Contact ( you’re replacing the old Contact link with a Contact Us link ).

Task Five: Set a Static Home Page

Set the page called Sample Page to be the first page of your website.

Set up a link to BLOG in the menu. When a user clicks this link, they will see all the latest blog posts.

Task Six: Set Up a Slider

Figure out how to make a slider on the first page of your site that shows posts that are tagged with canada. You must be using the twentyfourteen theme for this to work.

Task Seven: Add A Background Pattern

Go to DINPattern.com and download all the patterns (search the home page for “kitchen sink”). From the downloaded files, find the file entitled battle-royale and set it as the background image of the website.

Task Eight: Add A Logo To The Sidebar

Download this file and add it as a logo in the sidebar, sitting above Recent Posts but below the Site Name.

If you were able to update WordPress (ie you’re not at Langara), there is an easy way to do this. If you weren’t able to update, you’ll need to figure out another way.

Once you add the image to the sidebar, you will notice that the words look pretty crappy.

Without reuploading, figure out how to edit the image file in WordPress itself and crop off the text.

Your site should now look more or less like this:

Task Nine: Quotation

If you click on Politics, Food, or Culture in the menu, you will see a quotation at the top of the Category Archive page that loads. But if you click on Sports, you will notice that there is not a quotation in that section. Figure out how to add the following one:

“It isn’t the mountains ahead to climb that wear you out; it’s the pebble in your shoe.”
– Muhammad Ali

Task Ten: Blog Post Order

On the blog posts page, make the posts entitled Tempora, voluptat! and Tenetur, faceless! sit at the top of the post listings—without changing their dates of publication.

Task Eleven: Modify your Contact Form

Figure out how to modify your contact form to have a question like Can We Send You Spam? like in the screenshot below:

Task Twelve: CSS Modifications

In the CSS area of the Theme Customizer, add code to do the following. Don’t edit the theme files directly: just add CSS in the Customizer. 

If you were not able to update WordPress (ie if you are in a Langara lab while doing this exercise), you won’t have the CSS panel in the Customizer. A workaround is to install the SIMPLE CSS plugin. ( Don’t forget how we install plugins in Langara labs…) 

Please download and consult the screenshots to see what I’m describing here.

  • Make the entire content not take more than 1000px
  • Make the entire content sit in the horizontal middle of the page
  • Make the background image repeat down the right side of the page only
  • Make all text in the site use the GEORGIA font stack
  • Make the quotations at the top of category archives 2.5rem.
  • Make the background to the Search icon grey.
  • Make that background darker on hover
  • When on category archives, make the self-referential menu item background color the same grey background as the one you put behind the search icon.
  • Make the background to the submit button on the contact page orange—and red on hover.

Final Task: Duplicator

Using the Duplicator plugin (it’s already in your site), make an archive of your site that you can then hand in to the studentshare server.

If you are in WMDD 4840, include with the handed in files a text file called GROUP. Inside that file, list your group members. If this is WMDD 4840, this exercise is for marks. 

If you’re in PUBL 1232, this exercise is for lab exercise marks. Show me or one of our friendly Instructional Assistants your work when you are done.

 

Standard