An Introduction to WordPress.com ICA40311 Certificate IV in Web-Based Technologies Southbank Institute of Technology Acknowledgement: This document was compiled from notes available via the WordPress.com Support Centre, www.webhoots.com, and the author s experience.
Contents What is WordPress.com?... 3 Learn more about WordPress.com... 3 Create an account... 4 Manage your account... 9 Login to an existing WordPress account... 9 Logout of your WordPress account...11 WordPress interface...12 Public website...12 Administration dashboard...14 Choose a theme...16 Customise your theme...18 Add a Favicon...21 Add pages...26 Add an image to a page...28 Order your navigation...31 Remove comments...33 Remove Social Media...36 Add a Widget...38 Add a Photo Gallery...40 Add a Contact Form...48 Add a static Home page...53 Add content to your blog...56 Version 002 Page 2
What is WordPress.com? WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL which runs on a web hosting service. WordPress is currently the most popular blogging system in use on the World Wide Web, powering over 60 million websites worldwide WordPress has two options: WordPress.com and WordPress.org. WordPress.com offers a free account-based CMS and hosting service in one. Your WordPress.com website will be hosted on the WordPress server. You can use a free.wordpress.com domain, or purchase your own.com domain. WordPress.org is a free and open source CMS that you can develop on your local machine and upload to any web hosting server. You will need to purchase your own domain name to host your site live. Learn more about WordPress.com This booklet is a basic introduction to Wordpress.com. If you would like to learn more about the features available for a WordPress.com website please visit the WordPress.com Support Centre at http://en.support.wordpress.com/. Version 002 Page 3
Create an account Before you can begin creating your WordPress.com website you will need to create a WordPress.com account. Your WordPress.com account will allow you to manage all your WordPress.com websites. 1. Visit http://wordpress.com/ 2. Click the Get Started' button 3. Enter your email address, username and password 4. Enter a blog address e.g., southbankcupcakes 5. Select the free.wordpress.com domain 6. Click Create Blog at the bottom of the screen 7. Visit your email to complete the registration *For further details about creating a WordPress.com account, refer to the separate information sheet available on Blackboard titled Create a WordPress.com account. Version 002 Page 4
Version 002 Page 5
Version 002 Page 6
Version 002 Page 7
Version 002 Page 8
Manage your account Login to an existing WordPress account 1. Open a web browser 2. Type your website address into a browser address bar plus /wp-admin e.g., http://southbankcupcakes.wordpress.com/wp-admin/ 3. Enter your username and password 4. Click the Log In button *Keep your username and password safe as you will need these details to login to your WordPress.com account. Version 002 Page 9
Version 002 Page 10
Logout of your WordPress account When you have finished editing your website you will need to logout. 1. In the top right corner, hover over your username 2. From the drop-down menu select Sign Out Version 002 Page 11
WordPress interface It s important to understand that your WordPress.com website has two interfaces the public website and the administration dashboard. Public website The public website is the site users can see when they visit your website. The public website is accessed by typing your website address into a browser address bar e.g., http://southbankcupcakes.wordpress.com/. Version 002 Page 12
Version 002 Page 13
Administration dashboard The administration dashboard is where you, as the website administrator, update and maintain your WordPress.com website. The administration dashboard is accessed by typing your website address into a browser address bar plus /wp-admin e.g., http://southbankcupcakes.wordpress.com/wp-admin/. You will need to know your login details to enter the administration dashboard. *Keep your username and password safe as you will need these details to login to your WordPress.com account. Version 002 Page 14
Version 002 Page 15
Choose a theme Your website theme controls how your website 'looks'. The first thing you should do is change your theme to complement the type of website you are creating. 1. Login to the administration dashboard of your WordPress.com site 2. Select Appearance > Themes from the left vertical menu 3. Choose a free theme from the available options 4. Click Activate under your selected theme Version 002 Page 16
Version 002 Page 17
Customise your theme The amount of customisation available for themes varies from theme to theme. The free version of Wordpress.com limits the amount of customisation available. You would need to purchase the upgrade to fully customise your theme (this is not required for your assignment). There are two main ways to customise your theme: 1. You can customise some components by clicking the Customize button beside your selected theme under Appearance > Themes. 2. Alternatively, you can select Theme Options, Header, or Background under Appearance in the left vertical menu. Version 002 Page 18
Version 002 Page 19
Version 002 Page 20
Add a Favicon A favicon (short for favorites icon) is an icon associated with a website or webpage intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. In WordPress.com, the favicon is referred to as a blavatar. This is a combination of blog and avatar. Blavatars are used in a number of ways. It will be displayed as the favicon for your blog, which shows up in a browser s address bar and on browser tabs. It will also be used as the Home Screen icon on many mobile devices if you add the website Home page to your Home Screen. To add a blavatar to your WordPress.com website: 1. Login to the administration dashboard of your WordPress.com site 2. Select Settings from the left vertical menu 3. In the General Settings screen, go to Blog Picture/Icon in the top right corner 4. Click on Browse 5. Find a suitable image to use for your blavatar (at least 128 x 128px) 6. Click Open 7. Click Upload Image 8. Crop the uploaded image as desired by adjusting the cropping border 9. Click Crop Image 10. If you return to the General Settings; screen you will be able to see your blavatar *It can take a few hours before you see your blavatar in the browser tab. You can try deleting the cache of your browser to see if it will appear sooner. Version 002 Page 21
Version 002 Page 22
Version 002 Page 23
Version 002 Page 24
Version 002 Page 25
Add pages The next step is to add the pages to hold your website content. Always use short 1 to 2 word titles for website pages to aid in website usability. For example, use 'Contact' rather than 'Our Phone and Address'. 11. Login to the administration dashboard of your WordPress.com site 12. Select Pages from the left vertical menu 13. Click on Add New button at the top on the screen 14. Enter a page title 15. Enter the page content in the content editing area 16. Click on the Publish button to make the page live (i.e., visible on your website) Version 002 Page 26
Version 002 Page 27
Add an image to a page Adding an image to a page helps to enhance the visual appeal. WordPress.com makes it easy to add images. Follow the step-by-step instructions below to add an image to a page. 1. Login to the administration dashboard of your WordPress.com site 2. Select Pages from the left vertical menu 3. Click Edit under the selected page 4. Position your cursor in the content area where you wish to place the image 5. Click the Add Media button under the page title 6. Upload your image to media library 7. Select the appropriate image by clicking it 8. A square appears in the corner of the image to indicate that the image is selected 9. Enter Alt Text for the image 10. Change the Attachment Display Settings as required 11. Click the Insert into page button in the lower right screen 12. Click the Update button to publish your changes Version 002 Page 28
Version 002 Page 29
Version 002 Page 30
Order your navigation 1. Login to the administration dashboard of your WordPress.com site 2. Select Pages from the left vertical menu 3. Click Edit under the selected page 4. Enter a number in the Order field (higher numbers are displayed first left to right) 5. Click the Update button to publish your changes Version 002 Page 31
Version 002 Page 32
Remove comments By default WordPress.com pages are created with a comments section at the bottom of each page. This may not be appropriate for all pages. To remove the comments from a page follow the step-by-step instructions below. 1. Login to the administration dashboard of your WordPress.com site 2. Select Pages from the left vertical menu 3. Click Edit under the page you wish to remove comments 4. Click the Screen Options drop down in the top right corner 5. Place a check in the Discussion checkbox 6. Uncheck Allow comments and Allow trackbacks at the bottom of the screen 7. Click the Update button to publish your changes Version 002 Page 33
Version 002 Page 34
Version 002 Page 35
Remove Social Media By default WordPress.com pages are created with a social media section at the bottom of each page. This may not be appropriate for all pages. To remove the social media from a page follow the step-by-step instructions below. 1. Login to the administration dashboard of your WordPress.com site 2. Select Pages from the left vertical menu 3. Click Edit under the page you wish to remove comments 4. Uncheck Show Likes and Show sharing buttons at the bottom of the screen 5. Click the Update button to publish your changes Version 002 Page 36
Version 002 Page 37
Add a Widget WordPress widgets add content and features to the sidebar and footer of your website. The options for positioning widgets on your pages will depend on the theme that you select. Some themes will offer multiple areas to insert widgets in the page layout. Other themes will be more restricted when positioning widgets. 1. Login to the administration dashboard of your WordPress.com site 2. Select Appearance > Widgets from the left vertical menu 3. Choose a widget and drag it to an available sidebar or footer area 4. Enter details into the widget, as required 5. Click the Save button Version 002 Page 38
Version 002 Page 39
Add a Photo Gallery A photo gallery provides a page for visitors to view a collection of images related to your website. It could be products, events, or staff. An image gallery helps to add a personal feel to your site. 1. Login to the administration dashboard of your WordPress.com site 2. Select Pages from the left vertical menu 3. Click Edit under the Gallery page 4. Click the Add Media button under the page title 5. Upload your images to media library 6. Click the Create Gallery option in the left vertical menu 7. Select the images for your gallery by clicking each image 8. A tick appears in the corner of the image to indicate that the image is selected 9. Click the Create a new gallery button in the lower right screen 10. Click the Insert gallery button in the lower right screen 11. Click the Update button to publish your changes Version 002 Page 40
Version 002 Page 41
Version 002 Page 42
Version 002 Page 43
Version 002 Page 44
Version 002 Page 45
Version 002 Page 46
Version 002 Page 47
Add a Contact Form A contact form provides visitors to your site an easy way to reach out to you. 1. Login to the administration dashboard of your WordPress.com site 2. Select Pages from the left vertical menu 3. Click Edit under the Contact page 4. Click the Add Contact Form button under the page title 5. Click the Add this form to my post button 6. Click the Update button to publish your changes *You can edit the form before you insert it into your page, by hovering over the form field and clicking the edit option. This will allow you to change the label of the form field, the field type, and to make a field required or not. You can add extra form fields by clicking the Add a new field option and selecting the appropriate label and field type. Version 002 Page 48
Version 002 Page 49
Version 002 Page 50
Version 002 Page 51
Version 002 Page 52
Add a static Home page By default, WordPress.com makes the Home page an interactive blog page. However, WordPress.com also offers the option of removing the blog from the Home page. The Home page then becomes a static page. If you create a static Home page, you will be able to add a blog page to another page of your site. 1. Login to the administration dashboard of your WordPress.com site 2. Select Pages from the left vertical menu 3. Add a new Home page and Blog page 4. Select Settings > Reading from the left vertical menu 5. Select the Static page option 6. For Front page select the new Home page 7. For Posts page select the new Blog page 8. Click the Save Changes button at the bottom of the page Version 002 Page 53
Version 002 Page 54
Version 002 Page 55
Add content to your blog Adding content to your blog is different from adding content to your other pages. Blog content is added via the Posts option in the left vertical menu. 1. Login to the administration dashboard of your WordPress.com site 2. Select Posts from the left vertical menu 3. Click on Add New button at the top on the screen 4. Enter a post title 5. Enter the post content in the content editing area 6. Click on the Publish button to make the post live (i.e., visible on your website) Version 002 Page 56
Version 002 Page 57
Version 002 Page 58
Version 002 Page 59