Making a Website with WordPress

Transcription

1 Making a Website with WordPress Dorcas Réamonn Last Updated: November 2016 Note: The updated version of this document along with other notes and additional resources are at: (N.B. this link will only work for the duration of this course) This is a work in progress, please please PLEASE let me know how I can make this better for you. Chapter 1: Additional Resources Recommended Themes Standard Brochure; Virtue Spacious Make Enlightenment Ample Pinnacle Vantage Radiate Attitude Auberge Ward E-Commerce; estore Storefront Magazine; Colormag Blogging; Olsen Light 1

2 Portfolio; Pictorio GK Portfolio Portfolio Press One-Pagers; One Press Onetone Virtue Support forum: Vantage Support forum: Questions on WORDPRESS? You are very welcome to join the Facebook group; WordPress; This Facebook groups is for people who have done WordPress with me before as things change the idea is that this group is a resource to ask questions (and answer!) and to share any information you come across. The group is hidden from public view only people who are members of the group will see your questions. Images for your Site Option 1: Find Free Images using Google Search 2

3 N.B. That images you find through Google are not necessarily free to use you could be stealing. You can search for free images on Google. Instructions are here to help you: Option 2: Free Stock Photography Websites: and are brilliant. I keep a list of the best that I find here: Option 3: Pay for Stock Photography I keep a list of the best that I find here: HTML HTML is like the building block of the web. When you make a WordPress site, WordPress automatically translates whatever you do into HTML. Want to learn more about HTML? Check out CSS CSS is for styling. CSS decides that the background is a certain colour, your font is a certain type.... There are certain things pre-decided in your theme. You can edit certain things yourself (e.g. the fonts) in the Appearance section. For full control, the CSS files need to be edited. Find these within Appearance > Editor. N.B. Never edit these files without a full back-up. You can do serious damage here! Want to learn CSS? Chapter 2: Setting Up Hosting If you are hosted with Blacknight, you can contact them here: (or Blacknight.com > Contact) 3

4 Otherwise you can or call them directly on For Vmotion: their live-chat is also very good, and for support s Once you have a domain name and hosting you can get s like info@yourwebsite.ie or joe@yourwebsite.ie anything you like. Each hosting company has different systems. For example, with Blacknight, check your s from any computer at altmail.blacknight.com Set up a new address by logging into Blacknight (cp.blacknight.com or Blacknight > Account) and then going to > Add New Address To set up with your phone/outlook/tablet etc. you need these details; POP3 server : pop33r.cp.blacknight.com IMAP server : imap5r.cp.blacknight.com SMTP server : smtp1r.cp.blacknight.com The username is your address, the password is as you set it. You need the same username and password for both incoming and outgoing mails. Make sure you check the mail before you send them out. If you are using hosting with another company, then you need to ask them for their details for the incoming server and outgoing server details for your mails. ask Installing WordPress Once you have WordPress installed on your domain, If you decide to get a new domain, you may be able to put it on the same hosting package as your first website. For Blacknight, buy it on the same Blacknight account that you are already have. 4

5 Then go to: Websites > Click on the domain name > Applications > WordPress > Install: Choose Your Dom WordPress gets updated periodically. e.g. here I can see when I login to my dashboard, that there is an update for WordPress; N.B. Never update WordPress without doing a full backup of your site. decide to update every six months twice a year. Remember that every WordPress website has its own theme. So, to change a setting on your WordPress website, may not be done in the same way on another WordPress website. Chapter 3: Making Your WordPress Site Pages For static pages on your website, you want use Pages. To add a new This field is the h1 heading on your webpage: 5

6 Therefore, think about getting your search terms in there. We have no excuse for not getting our search terms into that section. Saving a Page WordPress Page Links The permalink of the page is the link of that individual page. Get your search terms into tha If your page is already doing okay/well in search engine results, then do not change this link. You want to pick your link in the beginning, and do not change it in the future. 6

7 The default in WordPress is that the link of the page will be something like yourwebsite.com/pageid=12 heading. To do this, go to Settings > Permalinks Add a picture To add a picture to the content, put the cursor in the text box where you want the image to go: picture to your website for the first time. corner of your screen. or To edit the Caption, Alternative Text, and Title for that image, click on the image. You will then see, which will look like this - or this 7

8 If you want a caption, fill in the caption field: The title, which is what people see if they hover over the image, goes here (note that you may Remember that the Alternative and Title are important for SEO. Click update when you are finished editing. You can come back and change these at any time. Adding a link within a page Where appropriate link. If that was the text on our website, it would make sense to link that text to the contact page. To do so, select the text, and then click this icon: Then, click on the little cog icon that appears: To link to a page within your website: Under to link to; find the page you want 8

9 To link to an external page (i.e. a page that is not on your website, e.g. - then you have to make sure you include the Alwa sure you have put in before the check the link, and make Page Layout The theme determines the layout, however the typical layout is that every page (apart from the homepage) will have a sidebar typically on the right hand side of the page. To change the content of the sidebar, go to Appearance > Widgets, however to actually remove the whole sidebar from your page, go to the page, and on the right hand side, look for the section called 9

10 page types, for example, in Virtue you c if you are not sure how the new layout will look save it and view it. Posts have a blog section on your website. So... of course... if you plan on blogging, then you will use this Posts section. Categories Use categories so that eventually people can click to read all blogs about a certain topic. You Posts part of your WordPress site. Create a Category To create a new category, go to Posts > Categories 10

11 the category page will have). Category Name to can call the slug seo-terms-blog - -category: Click out getting categories right at the start. You can add new ones at any Add a Post to a Category To add a post to a category, go to this section, and select the relevant category/categories: 11

12 Menu To edit the menu in WordPress, go to Appearance > Menus default setting is that this menu adds the pages in the order that you created them. Depending on your theme, you might have to add or edit the existing menu. If you do some 12

13 For example, in Virtue, we want this ticked, for the menu to appear at the top of the page. After changes to the menu, make sure you click bottom right hand corner and top right hand corner of the screen: Adding a Page link to the Menu To add pages to the menu, note that you already need to have created those pages. Once they are created, go to Pages > View All. 13

14 Now you will see a list of all the pages you have created. When you add a new page, it will automatically appear at the bottom of your menu. You can drag always be last. Editing Existing Links in the Menu To edit existing links in the menu, click on of each item already in the menu. Then you will see something like this; 14

15 Note that the name of the link that appears in the navigation menu does not necessarily need to match the title of the page (which is the HTML h1 heading). Generally, you would edit that field. Try to keep text in the Navigation links to one or two words the heading on the top of each page can have more words. Removing a Page from the Menu the navigation menu. - this removes the link to that page in if you want to delte the page itself, you need to 15

16 Submenus/Drop down menus Check your theme, and, depending on the theme see the dropdown/submenu appear. You can create sub-submenus in the same way; -submenu, which the user reaches after hovering over Your theme may display a little down arrow, which Note: The appearance of your menu/submenu/sub-submenu etc. is predetermined in the theme. Chapter 4: Embedding Stuff Embedding Google Maps Full instructions here: 16

17 Summary: 1. Get your business on Google maps by registering through 2. Click the menu icon In the top left hand corner of your screen. 3. Click 4. and copy and paste the code (corresponding to the blue code highlighted below): 5. Copy the code and then paste it into your site, making sure to cli To centre your map, you need some HTML code. Remember that when you are putting code in, 1. Put this above your map code: <div align="center"> 2. Put this at the end of your map code: </div> 17

18 So the end result looks something like this: Embedding YouTube Videos 6. Go the video you want to embed on YouTube 7. Click the Share icon: Copy the code like this; 10. Embedding a Twitter Feed To embed a Twitter feed, go to your Twitter account, go to Settings > Widgets > Create New Change the following settings as you want; 18

19 - For good branding, set the link colour as a hex colour from your logo. Remember that hex colours are the standard way of describing colours on the web, and have the format # - - Copy the code, then go to your WordPress site. It would probably make the most sense to have the feed appear in a sidebar, or footer this would be in Appearance > Widgets. Find copied from Twitter. More details instructions are here: Embedding a Facebook feed To embed a Facebook feed; 1. Go to 2. Put in the link to your click on the full address in the address bar of your Facebook page. For example; 19

20 3. put them into your sit Ideally if However width of 240px is generally good width for the widget area in the sidebars. 4. To get the feed to appear: under the header section 7. Finally, click 8. Unlike Twitter, YouTube or Google maps, where you just had to copy one piece of code, area that you want (as you would do with Twitter). Copy the second piece of code and then put that underneath the first part in your widget area. Chapter 5: Virtue Note plugin(s) in Appearance > Install Plugins Logo To upload your logo, go to Appearances > Theme Options > Main Settings > Logo Options 20

21 Retina Logo - - This means, upload your logo at twice the size as your standard logo. E.g. if you uploaded a logo at 100px x 100px, make one that is 200px x 200px to upload here. This is for high-resolution screens such as the new iphones. 21

22 Home Page in Virtue First, you need to decide what elements appear on your homepage. Set this in Appearance > Theme Options > Home Layout > Homepage Layout Manager. The order is relevant also. e.g. in the above example, the Page Title will appear, then Content, and then the Portfolio Carousel. Slideshow To upload your logo, go to Appearances > Theme Options > Home Slider Settings Recommended slideshow dimensions for Virtue are 1170pixels x 450pixels BUT if you want to use something different, you can change this: Make sure you have one of the options in this dropdown selected for your slideshow to appear: 22

23 To add a new slide; The Title, Description, Description and Slide Link are all optional. I suggest use the Title for your text the description text can get very small for mobiles. Make sure you check this on a mobile phone. Link to relevant pages, where appropriate. Slider for mobiles If you want, you can have a separate slider for mobile phones; this might be where you might have a slideshow that has less pictures, or maybe pictures that you have specially selected for smaller screens. Remember to actually view your website on your mobile. 23

24 On the Homepage, not To get the portfolio carousel to appear, go to: Appearances > Theme Options > Home Layout: Home Portfolio Carousel Settings -> this is where you change the general settings. The actual portfolio previews can only appear when you have created Portfolio pages: 24

25 preview part on the homepage: Featured Images on Blog The image dimensions for the featured images on your blog are 335px x 335px in the Virtue theme. 25

26 Chapter 6: Vantage Note recommended plugin(s) in Appearance > Install Plugins Logo To upload your logo, go to Appearance > Customise > Theme Settings > Logo There is no recommended size for your logo in the Vantage theme. However, for your reference, the logo size in the Vantage demo here: is 181px x 40px Retina Logo: - This means, upload your logo at twice the size as your standard logo. E.g. if you uploaded a logo at 100px x 100px, make one that is 200px x 200px to upload here. This is for high-resolution screens such as the new iphones. 26

27 Home Page in Virtue First, you need to decide what elements appear on your homepage. Set this in Appearance > Home Page Here, you can add in different elements onto your homepage this page will help you with the layout of your homepage. Slideshow The slideshow that Virtue uses is called Meta Slider you may need to install this as a plugin if To set the slideshow you will use (should be set at Meta Slider ), go to Appearance > Customise > Theme Settings > Home: To upload your logo, go to Appearances > Theme Options > Home Slider Settings Vantage: Recommended slideshow dimensions for Vantage: 1080pixels x 420pixels. Meta Slider 27

28 This is a plugin that complements your theme, Vantage. To make a slideshow, go to in your Dashboard. Documentation on Meta Slider is here: Make sure you check this on a mobile phone. Link to relevant pages, where appropriate. Chapter 7: Pinnacle Note: Stuff in Appearance > Theme Options overrides stuff in Appearance > Customize Change background colours (e.g. footer colour): Appearance > Theme Options > Advanced Styling Change background image on homepage: Appearance > Theme Options > Home Slider > Upload favicon in Appearance > Theme Options > Misc Settings Change Main Menu text colour in: Appearance > Theme Options > Site Header Change Menu font types in: Appearance > Theme Options > Menu Settings Change header background on all pages (apart from home): Appearance > Theme Options > Page Title > Page Header Default Background 28

29 Change h1 (heading 1) colour: Appearance > Theme Options > Page Title > Page Title Colour Change h1 alignment: Appearance > Theme Options > Page Title > Page Title Align Chapter 8: Plugins Plugins are little pieces of pre-written code that can extend the functionality of your WordPress site. Plugins need to be Installed and Activated. How do I know which are the best Plugins? You are not the first person to make a site like this.... This is the benefit of Wordpress learn Check the downloads. Check the star-rating Literally: Google to see what other people are using! Also: ASK people what they are using Updating Plugins available. You can check by going to: Plugins > Update Available To update, simply hit the button. y Sometimes Plugins always need to be Installed and Activated before you can get them to work on your site. single time big update 29

30 and you should update. However you might decide to update twice a year. N.B. Back up your whole WordPress website before you do an update. After an update, check whatever that plugin did (e.g. if it was a Social Media Share button, check that they still work). Multilingual stuff You need to add a plugin called WPML. Luckily, Virtue theme is already an approved WordPress theme that will integrate well with this plugin. See here: Social Sharing; These two plugins are great; Floating Social Bar Simple Share Button Adder Google Analytics To get Google Analytics to work on your site, you first need to sign up with Google Analytics and something like UA Google Analytics by Monster Insights -code like this; visitors to your website. ottom of the page when done. Now Google Analytics can track the See towards the end of this document for instructions on how to sign up with Google Analytics. Social Media link buttons - these are links to your site Floating Social Media Icon by Acurax 30

31 Then, fill in whatever link that you want to appear on the site; e.g. if I only fill in this field; - Then Twitter is the only icon that will appear Contact Form Contact Form 7 by Takayuki Miyoshi Once you make the Contact fo want the form to appear; 31

32 s and people will think you are ignoring their mails! Comment forms for blogs - I like Disqus. You need to sign up with disqus.com as well as install the Disqus plugin. ecommerce Plugin The best has to be WooCommerce by WooThemes Looking for something more simple? Try the Simple WordPress Paypal Shopping Cart Plugin Fix broken links by redirecting Limit Login Attempts WordPress is probably the most popular CMS system in the world. Unfortunately, it's popularity makes it extremely attractive to hackers. The default in WordPress is that login attempts aren't limited, which means that your site is vunerable to brute-force attacks. This is when a hacker can run a programme that can keep trying to login to your WordPress account, until it gets the right username-password combination. Get Limit Login Attempts by Johanee/Johan Eenfeldt, a super simple plugin, which allows you to limit the login attempts. So, if the password is put in (for example) three times in a row incorrectly, no login attempts will be accepted for a certain amount of time that you specify. nu; 32

33 Backing Up Your Site A great plugin, that is easy to use, to back-up both the files AND the database is: this is a plugin. Install it and activate it, and then follow the instructions on Some more great plugins These are all free plugins via WordPress.org Google XML Sitemaps by Arnee Wordpress SEO by Joost de Valk (Yoast) Google Analytics by Monster Insights Contact Form 7 by Takayuki Miyoshi Disqus Comment Form by Disqus BackWPup Free by Inspyde GmbH ithemes Security by ithemes MailPoet Newsletters by MailPoet Staff (for an example of a site using this, sign up to the newsletter on WooCommerce Mailchimp by Adam Anderly Login LockDown by Mvandemar Limit Login Attempts by Johanee Floating Social Bar Shareaholic by Shareaholic Tablepress by TobiasBg Subtle Background Patterns by Club Design Simple Share Button Adder by David Neal Ultimate Tables by Extendyourweb.com Helios Solutions Social Media Buttons 33

34 Ultimate TinyMCE by Josh Lobe TinyMCE Spellcheck by Matthew Muro - for spellcheck Event Calendar WD by WebDorado Pixproof by Pixelgrade Simple Page Sidebars for different sidebars on different pages One-Click Child Theme by tychay. Widgets Generally speaking, a widget is a plugin that appears on your website. To check the Widgets that are already installed, go to Appearance > Widgets. On the le installed. Some come preinstalled with WordPress, some come preinstalled with your theme. Then you can install others yourself. On the right hand side of your page, you can see where you drag the Widgets to appear on your and then update a Widget: 34

35 This is also where we can add in HTML. So, for example, you can put in your Google maps code here, embed a YouTube video, or even the Twitter feed widget code that you get from Twitter. someone has already made what you want as a plugin. When you install and activate a plugin Chapter 9: SEO WordPress SEO by Yoast Click into any page. a section that looks like this towards the bottom of the page; The SEO title is the blue text that appears in search listings. The Meta description is the black/dark grey text that appears in search listings. Control how your page listing looks in the search engines at the bottom of each page, you can edit the title and description. These control how your blog listing may appear in Google/Bing: 35

36 Note that it takes Google a few days to recognise these changes. Further Questions? L 36