Lesson 10: Site Work and Social Networking

Transcription

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

2 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 # 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

3 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

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

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

6 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 Input#searchsubmit #slidearea 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!

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

8 2. Go to the Appearance > Marina Options page, open the Slider post category dropdown, and select slider. 3. For number of slides, enter 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.

9 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

10 (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 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.

11 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 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. Change the font-size to 16px to make it easier to 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

12 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 (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 (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.

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

14 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 s but not forcing them to

15 log in. To save visitors from scrolling too much, I limited each page to 12 comments, with the most recent comments on top. 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.

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

17 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:

18 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

19 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!