Lesson 10:

Site Work and Social Networking

Chapter 1: Introduction

If you've ever been involved in a building project, you're probably familiar with the punch list, the

minor details remaining after the big jobs are out of the way. In this lesson, we're going to work on the

website equivalent and take care of a few final items to polish for our class project.

Specifically, we're going to organize the home page slider, change the website's color, and tweak the

sidebar a bit more. We'll also make some additional style changes.

Then we'll switch gears and discuss how to take advantage of the many social networking features

available in WordPress. I'll show you how to link your WP site to a Facebook page and a Twitter feed,

how to share your content with others, and how to use a blog to turn casual visitors into loyal fans.

There's plenty to cover, so let's get started by putting the finishing touches to our website. See you in

Chapter 2!

Chapter 2: Getting Our Website Ready for Launch

We're going to pick up where we left off, a few lessons back, by improving our theme's look and feel.

The goal is to achieve a consistent style among the site's major elements.

In Lesson 8, we used the Google Fonts plugin to change the website's main fonts to Open Sans. But it

didn't affect the sidebar headlines. Let's see if we can adjust that now.

1. Open the home page in your browser. Then open it’s element inspector (CTL+SHIFT+I in

Chrome; F12 in IE or Edge).

Right-click the Sponsors title in the first sidebar widget. If necessary, choose Inspect from

the right-click menu, to locate the style. The inspector will tell you that this rule is at line

769 (or thereabouts).

Sidebar headline CSS in Firebug

In the right window, you'll see the title's font is included in the rule covering the element

h3.sidetitl.

2. Go to the Edit Themes page (Appearance > Editor), and scroll to Line 769 on the style sheet.

(If your browser has an Edit > Find feature, you can also find the element by clicking the

Find link (or CTRL + F) and entering h3.sidetitl in the search bar.)

3. Copy this entire rule (appx. Lines 769- through 783), open Appearance > Edit CSS, and paste

the rule at the bottom of the column. (It may be necessary to click Additional CES to open

the code window.)

4. Change the font-family properties to Open Sans, sans-serif to match the Google font we

chose for the main content. Then change the color to #000099.

Remember to end both lines with a semicolon. Changes to the sidebar won’t be

immediately visible in the right side until Step 6 below.

5. Change the font weight from Normal to Bold. When you're finished, the rule should look

like this:

Sidebar headline with the changes highlighted

6. Click Save and Publish, and check the home page sidebar. The widget box titles are now

formatted in the same font and color as the content area headlines.

7. If you don’t like the drop-shadow on the sidebar title text, remove this entire line:

textshadow:1px 1px 0px #ced6db;

Changing the Theme's Overall Look

What do you think? Are the theme's grayish background colors a bit bland? I'd prefer a bluegreen hue

(as in water garden color). In fact, I tried this out, using an image editing app to recolor all of the

background images we can now add to the theme.

Download background images and all other files you'll need for this lesson below.

Download Lesson 10 material

When you open the folder titled Theme Color files, you'll find six image files. We're going to use these

images to replace the ones that came with the theme.

To make things easier, I've kept each replacement filename very close to the original. For example,

bot2.jpg is the revised version of the original bot.jpg (which provides the background for the footer).

If you have an FTP client like FileZilla or CoreFTP, you can use it to move the files. It’s generally easier

though to do what we’ve been doing in earlier lessons. Just use the WP File Manager.

1. Go to Media > Add New.

2. Click Select Files, and a window showing your computer’s hard drive will open.

3. Navigate to the place on your computer where you saved the downloaded background color files,

and select them:

• body2.png

• sidet2.png

• top2.png

• sbutton2.png

• slide2.png

• bot2.png

4. Click Open to upload the files. (Alternately, you can drag and drop the files inside the box on

the Upload New Media screen.)

Newly uploaded images

You should now see the background image files below the “Drop files here” area.

Okay – we’ve uploaded the background images. That’s a start. The rest of this job involves going to the

style sheet and changing the background: urls of the six HTML elements we’re re-coloring. Unless we

change the URLs, WordPress won’t know we’ve changed the background images.

Since our new files have different names, we have to go back to the WordPress style sheet

and change those filenames in the script. And we also have to provide the correct URLs, so

the updated images will appear.

The first image replaces the original file called body.png in the body rule at the top of the

Additional CSS area (go to Appearance > Edit CSS and if necessary, click Additional CSS).

5. Find the body rule’s background property and change the URL, including adding a 2 (with no

spaces) before the .png in the image path. The rule should look like this when you're done:

But be sure to replace the XXXXX with your name (it will be something like Karen41). This

URL must be the long absolute path to the image (not a relative path, a shortcut URL, such

as Images/Body2.png).

In other words, you must include your entire URL, starting with http: and ending with the

image filename. Unless you enter the full path correctly, the image won't show up.

Tip: If you’re having trouble constructing the URL, you can always go to Media > Library,

click Edit under the body2.png file. Then on the right side copy the URL in the field called

File URL.

This change from light gray to light blue-green isn’t dramatic, but you can see it here by

comparing the two backgrounds in this image. The body background has the new color; but

the main headline background is still gray.

Gray versus blue-green

4. With the Stylesheet Editor still open, find the h3.sidetitl rule, and change the background:

URL value to the same path you used above—but change the image filename from sidet to

sidet2. This changes the background under the sidebar titles.

5. Now for each of the other four images, find the original rule in the Theme Editor

(Appearance > Editor), copy it, and paste it into the Additional CSS Editor (Appearance >

Edit CSS). Make these changes as shown in this table:

Rule Name Theme

Editor

Line #

New URL & New Image Name

#top 210 http://watergarden.XXXXX.sg-

host.com/wpcontent/uploads/2018/05/top2.png

Input#searchsubmit 295 http://watergarden.XXXXX.sg-

host.com/wpcontent/uploads/2018/05/sbutton2.png

#slidearea 1388 http://watergarden.XXXXX.sg-

host.com/wpcontent/uploads/2018/05/slide2.png

.bottomcover 1515 http://watergarden.XXXXX.sg-

host.com/wpcontent/uploads/2018/05/bot2.png

6. After you've made the replacements, click Publish, and then take a look.

You've changed the page backgrounds from a dull gray to a soothing blue-green.

If you lost the backgrounds entirely—or if they're still gray—it means you didn't take at least one of

these two steps correctly:

• Upload the background images to the proper folder

• Accurately include the image file's absolute URL (its complete path to the folder) in the style

sheet's background: url value

Check both areas to try to locate the problem. If you can't, visit us in the Discussion Area.

The next item on our punch list is the home page slider. Join me in Chapter 3 to set it up!

Chapter 3: Setting Up the Home Page Slider

In recent years, it's become fashionable to add image slideshows (often referred to as sliders) to

website home pages. I'm not a fan of these rotating image displays. I think they're overused and often

distracting. But because they're so popular, your boss or client may ask for one, so I'm going to show

you how to configure them.

Example of home page slider

You could download a slider plugin and attach it to your front page. But our Marina theme comes with

its own built-in slider carousel, so all we have to do is to decide what to display and set it up!

We could go one of three ways: Display featured posts on how to create and maintain a water garden,

promote some of the products we want to sell, or do both.

Since we have existing posts (one about water quality and some product posts), we'll use those in

addition to a welcome screen explaining what the site is all about. (If you don’t have product posts,

just create a couple of quick ones now. Go to Posts > Add New, and add a title and some body text,

then click Publish.)

Configuring the Slider

You'll configure the website' slider on the Marina theme Options page, but first go to Posts >

Categories.

1. Add a new category called slider in the Name field. Scroll down, and click the Add New

Category button.

2. Go to the Appearance > Marina Options page, open the Slider post category dropdown,

and select slider.

3. For number of slides, enter 4.

4. Go to the bottom of the page, and click Save Changes.

The first slide can be our welcome message.

5. Open on your hard drive the Slider folder in the package you downloaded earlier. It

contains the welcome message's content as well as an image. Open the text file.

6. Because this slider carousel is designed to display only posts, open Posts > Add New.

7. Enter the title (Your Water Garden Information Center), and then paste the text file (slider

content) into text box.

8. Now add the image. Make an insertion point by clicking your mouse before the first word

(top left of the text).

9. Click Add Media.

10. Click Upload Files, find the image file (slider_1_image.jpg) on your hard drive, and drag it

to the upload area. (Or click the Select Files button in the Add Media screen.)

11. After WordPress transfers the picture, click it, and enter the following in both the Title and

Alternate Text fields: We have the instructions and materials to build a water garden like

this!

12. Select Left for Alignment and in the Link To field, click None.

13. Set the size at 300 x 246, and click Insert into Post.

Back end version of slider

That takes care of adding the photo to the article. But to display it on the home page slider, we must

also make this picture the "featured image." Let's do that now.

1. Find the Featured Image box near the bottom of the right column on the Edit Post page,

and click the Set Featured Image link.

Featured image module, bottom of right column

(If you don't see the Featured Image module, select it in the Screen Options on the top right

of the Edit Post page. This is a dropdown menu, so click the down-arrow to show the

options.)

2. When the Set Featured Image screen pops up, click Media Library, and select Uploaded to

this post in the drop-down window (currently this window says Images).

3. Click the photo in the main column, and then click the Set featured image button in the

bottom right corner of the screen.

4. In the Categories box, check the box next to slider.

5. Click Publish (or Update, if you've already published the post).

Check out the slider on the home page. What do you think? I'd like to tweak the slider's appearance a

bit, but first we need to add the other posts to the carousel.

1. Go to Posts > All Posts and click the title of each post you want to add as a slider frame.

2. On the Edit Post page for each post, check the box next to slider in the Categories module.

3. Then go down to the Featured Image box and add the post's photo, just as we did with the

first slide. (You won't have to do this with your product posts, because we uploaded their

feature images in the last lesson.) 4. Click Update to save the changes.

Not too difficult, right? Now let's improve slide's appearance.

1. Go to Appearance > Editor, find the .mytext p rule, at or near Line 1459. It applies to the

slider content. The CSS will look like this:

.mytext CSS rule before changes

2. Copy this rule and paste it underneath the last rule in the Appearance > Customize >

Additional CSS column.

3. Make the following changes (you should be able to see these changes to the slider instantly

on the right side of this page): o Change the font-size to 16px to make it easier to

read. o Change line-height to 24px.

o Change color to: #000 o Add the following property, to

change the look of the font:

font-family: Open Sans, sans-serif;

o Change font-weight to normal.

o Finally, delete the text-shadow property (drop-shadows on body text look pretty

cheesy, if you ask me).

Click Publish. Great work! Now, we need to change the slider headline the same way.

4. Go back to Appearance > Editor. On or around Line 1445, you'll see two rules: .mytext h2 and

.mytext h2 a:link,.mytext h2 a:visited. Copy these two rules and paste them into the

Appearance > Edit CSS > Additional CSS column.

5. For .mytext h2:

o Change color to #000; o Add background-color:

#20353a; o Increase the margin-top value to 45px, so the

text lines up better with the image.

6. Go to the .mytext h2 a:link,.mytext h2 a:visited:

o Change color to #000; o Add background-color

#20353a;

7. Click Save Stylesheet, and return to the home page. It should look like this:

Completed home page slider

Don't worry if everything didn't turn out exactly the way you expected. You can always fiddle with the

CSS later. Remember that CSS is a vibrating set of interacting variables within a cascade… As you work

with it more, you’ll learn more about how to manage the connections and side-effects.

But I think this is a major improvement. And you’re always free to disagree and modify the look any way

you wish.

The only remaining task is to slow down the rotation speed, which makes me dizzy every time I look at

the slider.

To find out where the speed control is located, I checked the Web2Feel support pages and learned

that it's in the tab.php file.

1. In the Theme Editor (Appearance > Editor), click tab.php (in the Theme Files section). Back

up the specs by copying the whole thing (lines 1-42) and saving it as a text file. Just in case.

The file tells us this particular slider is a JavaScript plugin called .jCarousel Lite.

2. Look down and find the line that begins with the word speed. Change the number from

2000 to 6000. (These are milliseconds, so we’re changing the speed from 2 seconds to 6.)

Then change the auto speed (on the line below) from 5000 to

1000. (I came up with these settings by fiddling around with these specs.)

3. Did you notice that the slides "bump back" after stopping? We can smooth out that motion

by changing the easing property to linear.

4. Click Update File button, and you're all set! The next time you see the carousel, you'll notice

it's moving at a more reasonable speed, and not bouncing. I think your visitors will like this

animation better.

Well, that was quite a workout, wasn't it? Don't forget—you can always go back in and modify things

further if you'd like.

For now . . . social networking! When you're ready, join me in Chapter 4.

Chapter 4: WordPress and Social Networking

Before we ever heard of Facebook and Twitter, there was blogging, the original way to interact socially

on the Web. If you're thinking about adding social networking to your WordPress site, you'll want to

include a blog in your strategy.

By its nature, blogging isn't usually the main reason for maintaining a CMS website. But a blog can be a

very useful tool.

• It can notify your audience about new products or services.

• It can open a dialog between you and the people you want to reach.

• It'll enhance your reputation and help to establish you as an expert in your field.

• It'll help with your ranking in search engine results (if you frequently update your blog

content).

An interactive blog is the most direct way of communicating with your online visitors: You create a

post, include a comment box, and they respond. And you'll set the ground rules by going to Settings >

Discussion.

Recommended post comment settings

I've configured the settings above as if I'd just added a blog to my CMS. These settings are pretty close

to the WP default. But let's take a look at what these different sections govern.

• Default article settings: I set this to let other blogs know if I've referred to them in my

posts.

• Other comment settings: I set these options with a moderate amount of security, by

requiring commenters to give their names and emails but not forcing them to

log in. To save visitors from scrolling too much, I limited each page to 12 comments, with

the most recent comments on top.

• Email me whenever: After your blog gets popular, you'll probably want to change these

settings.

• Before a comment appears: This section is set to make sure you see any comments before

they're published online.

• Comment Moderation: These settings allow you to flag visitors' comments if they contain

certain words and to prohibit specific URLs from posting comments.

Reminder

Back in Lesson 4, Chapter 3, I showed you how to make your site into a blog by going to

Settings > Reading and directing the front page to display your latest posts.

If you want to display a static home page, you can create an inside blog page to hold your

posts. Just add a new page (make sure it's a page, not a post), give it a title (but leave the

text box empty), and click Publish.

On the Reading Settings page, choose Front page displays: A static page. Then select the

page you want to use for home, as well as the page you just created for your posts.

Remember that you won't be able to find your blog page in the WordPress back end. That's

because, in order to display the latest posts, it's created "on the fly" when a visitor requests

the page. To edit the posts in the blog, go to Posts > All Posts, and click the title of the

specific post you're changing.

Before I draw the curtain on CMS website blogs, here are a few tips:

• You don't need to post to your blog every day, but try to do it on a regular basis, once every

week or two.

• Solicit visitors' comments if you want to develop a community of users. Express your

opinion and ask for theirs, take a poll, or invite others in your business, profession, or

organization to join in.

• Write about what you know and about your visitors' needs and concerns.

• Create Top 10 and Top 20 lists, which appeal to online visitors.

• Keep your posts brief . . . or risk losing readers along the way.

WordPress and the Social Network

Most of what I read about social networking is a little confusing. It often seems as if many people try to

make it seem more complicated than it really is.

For our purposes, as website designers/owners, social networking is simply a marketing strategy to

give our sites more exposure.

Since WordPress websites are usually content-based, we often want visitors to share our information

with others. The most effective way to share content is by adding icons that let our online guests send

our articles (or links) to social network websites.

Content sharing makes up the largest category of all WordPress plugins. So if you want to put your

website out there for others to see, you'll need to decide the best way to display your sharing buttons,

as well as which buttons to use.

Coming up with a sharing strategy is beyond the scope of this course. But it's likely that after you've

studied the possibilities, you'll want either a simple display or a plugin that will give you a large variety

of social network sites to choose from.

For now, let's try out Social Media Share Buttons and Social Sharing Icons (Ultimate Sharing) This is a

plugin that combines ease of use with plenty of options.

1. Go to Plugins > Add New, and type Social Media Share Buttons & Social Sharing Icons into

the Search box.

2. Go over the description, and click Install Now and Activate.

3. In the WordPress menu, go to Ultimate Social Media Icons to configure the plugin.

4. You’ll be asked a series of questions to choose the icons you want to display, what the icons

should do when clicked, design and animation options, whether to add “Like” counts to the

icons, and a few other options.

5. When you finished, go to the Appearance > Widgets screen, and add the Ultimate Social

Media Icons widget to your sidebar or footer.

Here’s the widget in your sidebar:

Pretty nifty, huh? But as I mentioned, this isn't your only option. Here are a few others you might want

to consider:

• AddToAny: This is a great option if you want a sharing plugin that's a little less complex.

• Really Simple Facebook Twitter Share: This will add only the largest networks to your

website, Facebook and Twitter. And this plugin is very easy to configure!

• Facebook Like: This lets you customize the FB Like button and display it in a sidebar.

• Twitter Tools: With this plugin, you'll be able to send tweets from WordPress.

Network Publisher: If you want to publish posts on your social network pages, this plugin

will let you do that. It sends your WordPress posts automatically to Twitter, your Facebook

profile and page, LinkedIn, Yahoo, and about 25 others.

Check out these plugins. They're very handy and will help you take your website to the next level of

social marketing!

Using RSS to Reach Your Website's Followers

RSS (short for Really Simple Syndication) is a way of allowing people to subscribe to your posts and

read them at their own convenience, using an application called a feed reader. Something you might

not know is that WordPress automatically takes your posts and makes them available to anyone who

wants to subscribe.

When they subscribe to your site, users' feed readers (Feedly, NewzCrawler, and Feed Demon are

among the most popular versions) find and save your articles, allowing subscribers to browse them

anytime they want. It's a great way to encourage readers to continue receiving your content without

having to visit your website.

Here are a few other plugins that will enhance your social media presence:

I could go on and on about how to use the social media to market your website, but we're running out

of time. Let's take a moment to review what you've learned in this lesson and to preview what's

ahead!

Chapter 5: Summary

When you're putting together a website, it's a good idea to keep a running list of the little things you

want to go back and fix after the major work is out of the way. That's how we began this lesson, using

what you learned to make the styles more consistent across our class project site.

With an Element Inspector and CSS, we matched the sidebar headlines with the content.

And we made the content itself a little easier to read by increasing the font size.

To match the website's colors to the topic, we switched out each of the theme's image files to create

an "aquatic" atmosphere.

We also tackled the image carousel on the home page, creating a welcome slide and adapting product

and informational posts so that they'd look better as billboard features. And I showed you how to put

the brakes on the rotator, so its movement would be less distracting.

Ready or not, you now know a lot about using social networking as a tool for marketing websites. We

discussed how adding a blog can help promote your website's message and open a dialog with your

online guests. And we explored how to use some WordPress plugins to expose your content to more

people by leveraging Facebook, Twitter, and the other social network giants.

We're in the home stretch—just two lessons remaining. Next time, we'll examine how to make your

pages rank higher in search results. And then you'll see how WordPress can help you find out more

about your website's visitors—we'll be exploring statistics and analysis!