MASTERING YOUR COMMUNITY WEBSITE 101 THE BASICS OF WORDPRESS AND CPANEL

Transcription

1 MASTERING YOUR COMMUNITY WEBSITE 101 THE BASICS OF WORDPRESS AND CPANEL 1

2 INTRODUCTION STC-Philadelphia Metro Chapter President and Acting Secretary Formerly VP, Treasurer, Webmaster, Scholarship Manager Distinguished Community Service Award Committee Chair Scholarship Committee Member Community Affairs Committee Web Support Former Budget Review Committee Member STC-Philadelphia Metro Chapter President and Acting Secretary Formerly VP, Treasurer, Webmaster, Scholarship Manager Distinguished Community Service Award Committee Chair Scholarship Committee Member Community Affairs Committee Web Support Former Budget Review Committee Member 2

3 EXPERIENCE Taught myself HTML from an online guide in college Created silly college website which was a list of links Landed paid webmaster internship with local hospital Just checked they updated the website since I left in 1996 Took over the PMC website around 2012 CAC webmaster and web support since 2015 Taught myself HTML from an online guide in college Created silly college website which was a list of links Landed paid webmaster internship with local hospital Just checked they updated the website since I left in 1996 Took over the PMC website around 2012 CAC webmaster and web support since

4 INTENDED AUDIENCE People who are new to being a webmaster for their community. People who want to learn WordPress and cpanel basics. People who are new to being a webmaster for their community. People who want to learn WordPress and cpanel basics. 4

5 QUESTIONS I ll address questions at the end. Please add queries to the Question window. Steve will field these questions and give them to me. I ll address questions at the end. Please add queries to the Question window. Steve will field these questions and give them to me. 5

6 OVERVIEW Establishing a Domain Hosting the Content of the Domain Creating Content on Your Hosted Domain (WordPress) Customizations Managing Website Background Details (cpanel) Forwarders, Web File Management, Database Management Establishing a Domain Hosting the Content of the Domain Creating Content on Your Hosted Domain (WordPress) Customizations Managing Website Background Details (cpanel) Forwarders, Web File Management, Database Management 6

7 WEB DOMAIN REGISTRATION Where you define your URL, such as You are responsibe to pay for and renew this domain Some sites offer domain registration and hosting Where you define your URL, such as You are responsibeto pay for and renew this domain Some sites offer domain registration and hosting 7

8 WEB DOMAIN REGISTRATION Set the Name server for your hosting company Tells your domain where to look for content The namesservers tell your domain registration service where your hosting company is located, on the internet. When you set the nameservers for your hosting company and you go to your domain s URL, it directs all URL hits to go to the nameservers indicated, and to look for a website there. 8

9 WEB HOSTING A2 Hosting is the providerchosen by STC. STC pays the hosting fees and logs tickets with the hosting company on your behalf. You also get points on your CAA for using STC s hosting provider. By using this provider you maintain complete control of your website and content. They just control what servers hold your information. 9

10 A TALE OF TWO WORDPRESSES There are two types of WordPress: Not Hosted Hosted Not Hosted is free and has limited capabilities Hosted requires that you register a domain and have a web host That s what you ll be using WordPresshas two sites. for their free blogging site. for the software installed on your hosting site. STC Chapters will use the Hosted form as that is more powerful, and is how STC hosting is set up. 10

11 PHP PHP: PHP Hypertext Processor PHP: Personal Home Page PHPis a scripting language. When you open a website written in PHP, the script is processed and data is pulled from a MySQL database, and the page is rendered. This is different from an HTML-only website, where the pages are each stored as separate HTML files. The name is self-referential, essentially (Personal Home Page) Hypertext Processor 11

12 INSTALLING WORDPRESS You probablyalready have WordPress on your existing site, but if you need to install it fresh, you can do so in the cpanel associated with your hosting site. Additionally you can download the program and upload it to your server, but this is easier. Ideally, you ll already have WordPress established on your existing site and will not need to manually install it. When you migrate to STC Hosting, you can work with Kobla about transitioning to WordPress. Other platforms can be used, but it may be easier to switch to WordPress when you migrate. 12

13 DIFFERENCES BETWEEN CHAPTERS AND SIGS Chapters have the full power of WordPress SIGs have a lightweight version No plugins Limited widgets No direct access to cpanel forwarders must be done through webmaster@stc.org Chapters have the full power of WordPress SIGs have a lightweight version No plugins Limited widgets No direct access to cpanel forwarders must be done through webmaster@stc.org 13

14 CREATING YOUR WEBSITE Withyour domain registered, your hosting company established, and WordPress installed, you are set to create your website. 14

15 QUESTIONS 15

16 WORDPRESS LOGIN PAGE LOGIN.PHP To sign into the dashboardof your website, go to your website, with /wp-login.php appended to the URL. 16

17 DASHBOARD Use the ScreenOptions to control the content on the main pane. We will work our way down the menu on the left. 17

18 POSTS Posts arethe lifeblood of a WordPress site. They are timely updates pushed to feeds, such as the homepage, of your site. Blog posts, event announcements, and newsletter articles are all examples of things to place in a post. Use Categories to sort and control what feed the posts appear in. Feeds are controlled through menus, and the main page can be set to automatically be a feed, as a true blog would be. Tags are used to further detail posts beyond the category. If you click on a tag in a post, all posts with that tag will appear. For example, your category is Events, and each event post is tagged with a type of event: networking, educational, workshop, etc. 18

19 POSTS - EDITING When you edit a post, you can see the published state, controlthe visibility, and see previous revisions. The editor is a WYSIWYG. You can select Categories and add tags. 19

20 PAGES Unlike Posts, Pages are for static content,and define the structure of your website. Pages can have a hierarchy which is reflected by the indentation of the title. In this sample, the Community Achievement Award is a subpage of Leadership Resources. 20

21 PAGES EDITING Much like a post, you can control the publishing information. However, you can control the page hierarchy instead of using categories and tags. A well-structured website is a well-organized website, so take some time to create a plan for the site s hierarchy and your website visitors will thank you. 21

22 EDITING CODE On both pages and posts, you can switch from WYSIWYGto a basic HTML editor by clicking the Text tab. Some sites may ask you to paste code, such as the Google Analytics code featured here. I use this to help clean up formatting if the WYSIWYG editor is being clunky with styles, especially if something was copied from another source and brought in style definitions for each tag. 22

23 MEDIA The Medialibrary lets to organize any attachments that appear on the website, whether they are images or PDFs. You can sort by media type, and can even see what media is not being referenced by the site. Groom your library so you do not have duplicate images or files, unlike in this example. By clicking on each piece of media, you can see where they are referenced. You can also sort by unreferenced media to see if you can remove it from your site. 23

24 MEDIA DETAILS When you click on one ofthe media items, you are given the URL to where the file is stored on the server. Additionally you can give it a useful title, a detailed caption, Alt text, and a description. The caption automatically appears when you insert the image into a page or post. The Alt text is what is shown if the photo does not display, or the page is accessed by a screen reader. The description helps other website users to determine when to use the photo. 24

25 MEDIA INSERTING On a post or page, you can click the Insert Media button, and it will show you a list of media items to insert. The details defined for each item you select appear on the margin. You can customize them here. 25

26 MEDIA INSERTED When you insert media, it appears in the main editor. You can control the centering, or edit the details of the embedded object. 26

27 MEDIA - EDITED If you need to make further custom changes to inserted media, you can edit it for that page. Additionally,you can control what happens when someone clicks on the media. It may just open the image in greater detail, take them to a page for that image, go to a custom URL, or nothing. 27

28 APPEARANCE Appearance lets you heavily customize the look and feel of your website. Themes:Downloadable packages that ensure a consistent look and feel for the site. Customize: Make custom settings to your theme and site. Widgets: Controls the sidebar items that appear on your site. For example: search bar, social media icons, recent post lists, RSS feeds, custom HTML, and categories. Menus: Lets you structure your menu system. Header: Specifically affect the header of the website. 28

29 APPEARANCE: THEMES Themes control the look and feel of your site. Are there two columns or three? A large image at the top, or just text? What color and font scheme do youwant? Those are all controlled by themes. Some themes are meta themes which create a framework for subthemes which are designed to work similarly. Genesis is an example of a metatheme. WordPress has free themes named after each year,such as Twenty Seventeen. Themes are sometimes updated, and you should update them and stay current. This usually does not cause any issues, and can prevent security breaches. 29

30 APPEARANCE: CUSTOMIZE You can customize your site and theme. The levelof customization varies by theme, but they generally have these options. The site identity lets you control the title of your site and set a custom icon. The Homepage setting lets you set a static page as the homepage, or a feed of posts. 30

31 APPEARANCE: WIDGETS Widgets are definedby WordPress and by your theme. Widgets vary, but common ones are Custom HTML, Images, Categories, and Text. You customize them and drag them to various sidebars and footers, where they will be displayed on the website. The theme controls the valid locations on your website to place widgets. 31

32 APPEARANCE: WIDGETS In this sample, you see widgets for Search, Social Media Connections (via a custom HTML widget), and a widgetshowing a feed of recent posts. If you drag the widgets to a different order on the editor, they will automatically change how they are displayed on the live page. 32

33 APPEARANCE: MENUS Menus are how you group your posts and pages on the site so visitors can easilyfind content. On a menu, you can link to a page, a post, a feed of posts designated by a category, or a custom URL to another site. Select the menu items from the groups on the left and add them to the menu. Once in the menu, drag the object up, down, left, or right. Indenting it makes it a submenu item. Save the menu to make it live on your site. 33

34 FEEDS Use categories to group posts into feeds. Pro Tip: Create menu items that are feeds instead of pages, so you do not need to maintain those pages. For example, create a menu for events, and make it a feed showing only your posts with the category events. Your home page can be a series of all your posts, so it is always the latest news, much like a true blog. Sticky posts are locked at the top of a feed. Pro Tip: Use a sticky post to create static text on your homepage, with a feed of posts appearing below it. Use categories to group posts into feeds. Pro Tip: Create menu items that are feeds instead of pages, so you do not need to maintain those pages. For example, create a menu for events, and make it a feed showing only your posts with the category events. Your home page can be a series of all your posts, so it is always the latest news, much like a true blog. Sticky posts are locked at the top of a feed. Pro Tip: Use a sticky post to create static text on your homepage, with a feed of posts appearing below it. 34

35 PLUGINS Plugins are little pieces of code you can install into WordPress to make it do special things. Some of the sample ones here include: One that creates a button letting you duplicate an existing post. An image optimizer. A cache to speed up your website. A security plugin that alerts you about updates and possible attacks on your site. You can disable plugins here, and updatethem as well. Be careful with the plugins you select. If you find you are not using a plugin, remove it. Keep your plugins updated to help prevent security breaches. 35

36 USERS Administrator somebody who has access to all the administration features within a single site. Editor somebody who can publish and manage posts including the posts of other users. Author somebody who can publish and manage their own posts. Contributor somebody who can write and manage their own posts but cannot publish them. Subscriber somebody who can only manage their profile. Administrator somebody who has access to all the administration features within a single site. Editor somebody who can publish and manage posts including the posts of other users. Author somebody who can publish and manage their own posts. Contributor somebody who can write and manage their own posts but cannot publish them. Subscriber somebody who can only manage their profile. Users are whocan access the control panel section of your website. Communities handle users differently. Some grant their members access to certain sections of the website which are reserved for paying members. Others have only their admin council as users. You should have at least two administrators (the president and webmaster). STC will have an Admin account so the STC webmaster can always access your site. Everyone else you can set as a lower level as needed. PMC is starting a program where new volunteers start as Contributors and have designated Editors review and publish their content, for example. 36

37 USERS When defining a user, you must create an unchangeable user name. For the Administrator, do not choose Admin as that will be subject to hack attempts. Create a Nickname for yourself, and use it to control how your posts are displayed on the site. It can be your real name or a whatever you like. In this example, I made all my posts come from STC-PMC so my personal name isn t all over the chapter website. Also, do not make your Nickname the same as your Username, as that also gives hackers an advantage. 37

38 SETTINGS Settings containlow-level configurations. Most do not need to be set and you can accept the defaults. The General settings should be reviewed. I recommend the Media settings be reviewed so your media is NOT stored in folders based on the year/month you uploaded them. 38

39 QUESTIONS 39

40 CPANEL cpanel lets you manage thebehind-the-scenes aspects of your website. From here you can install software, change your PHP version, create forwarders, manage spam filtering, work with the files on your server, and backup your website. Note: cpanelis for Chapters and not SIGs. All cpanelchanges required by SIGs must be handled by contacting 40

41 CPANEL LOGGING ON Go to cpanelandsign in with the logon information provided by the STC Webmaster. 41

42 FORWARDING A popular feature is to create an forwarder. A forwarder lets you create a fake using your domain s address, such Whenever a message is sent to that address, it is forwarded to a real account that is monitored. That way you can put these accounts as links on your website, and when one volunteer resigns, you just change the forwarder to point to the new volunteer s address. To the public, there is no change in address. Additionally, you can assign multiple addresses by duplicating the forwarders. This is handy if a president wants to be copied on all incoming correspondence to one of his chapter volunteers, or to a post that is vacant. 42

43 BACKUP You should have a regular backup schedule established for your webmaster,such as the first of every month. You can do a Full Backup, which is designed for moving you site to another server. I recommend downloading backups of your home directory, your MySQL Database, and your Forwarders. Those offer easy to restore options in case something fails on your site. 43

44 SUPPORT WEBMASTERS/SIGNUP I wanted a forum to discuss webmaster issues, so I created a Slack community. Join it by going to 44

45 QUICK LIST OF TASKS FOR A WEBMASTER Pick a theme that works for your site. Update the theme regularly. Make sure WordPress is updated regularly. Update and groom plugins regularly. Backup the website at least monthly. Manage user access. Maintain forwarders in cpanel. Update the copyright date for your page. Maintain domain registration (coordinate payment with treasurer). Groom your media library so duplicate files are removed. Ensure post categories are clearly used, so feeds work. Pick a theme that works for your site. Update the theme regularly. Make sure WordPress is updated regularly. Update and groom plugins regularly. Backup the website at least monthly. Manage user access. Maintain forwarders in cpanel. Update the copyright date for your page. Maintain domain registration (coordinate payment with treasurer). Groom your media library so duplicate files are removed. Ensure post categories are clearly used, so feeds work. 45

46 MASTERING YOUR COMMUNITY WEBSITE 201 More details on customizing your site. Connecting your site with social media. Plugin Management Implementing security plugins on your site. Getting HTTPS integrated on your site. cpanel Antivirus File Manager FTP SEO (Search Engine Optimization) Event Calendar Integration Subscribe to mail list widgets Google Analytics More details on customizing your site. Connecting your site with social media. Plugin Management Implementing security plugins on your site. Getting HTTPS integrated on your site. cpanel Antivirus File Manager FTP SEO (Search Engine Optimization) Event Calendar Integration Subscribe to mail list widgets Google Analytics 46

47 REFERENCES WordPress for Dummies WordPress: The Missing Manual WordPress for Dummies WordPress: The Missing Manual

48 QUESTIONS 48

49 THANKS Roger Renteria Paul Mueller Ben Woelk and his headshot Danielle Villegas Adam Evans Jamye Sagan Jeff Strong Phoebe Forio Steven Jong These helpfulresources gave me ideas on what they wanted to see in a webinar on websites. 49

50 CONTACT INFO esposito/ Connect with me at anyof these sites