LearnWP 2-day Intensive WordPress Workshop. Dawn Comber, Digital Dialogues Ruth Maude, Dandelion Web Design

Transcription

1 LearnWP 2-day Intensive WordPress Workshop Dawn Comber, Digital Dialogues Ruth Maude, Dandelion Web Design

2 How do I login? Point your browser to your website URL adding wpadmin to the end of the address or Type the address directly into the address bar (not a search bar) Add /wp-admin (newer installs can now just simply use "/login") to the end of the URL

3 Backend & Frontend The backend is the where authorized users sign in to add, remove and modify content on the website. The backend may also be called the dashboard the content management area the admin area The frontend is what your visitors see and interact with when they come to your website.

4 The Top Admin Toolbar WordPress adds an administration Toolbar to the top of your site that is visible only to logged-in users. Regular site visitors won t see this toolbar. The Toolbar adds quick-links between the front and backend of your site.

5 The Left Admin Navigation The main navigation menu for each of the available administrative functions is on the left side of the screen. Move your mouse down the list and the submenus will "fly out." Once you choose a "parent" navigation section, it will open up to show the options within that section. Additional menu items may appear when you change your website theme or add a plugin.

6 Coming Soon Splash Page We will use a plugin to add a splash page to the site so that only logged-in users can view the site during development. Plugins Add New Search for Seed Prod Coming Soon Install Activate now go to Settings Coming Soon to turn it on & add your message.

7 General Settings In Settings General edit the title of your website from what was entered during the installation and change your tagline from the default Just another WordPress site. The address set on this screen will be used to alert you when a new user is added to your site, for your password recovery and as the default for your contact forms. Set the time zone to Toronto. Set your site language to English (Canada)

8 Settings Permalinks Change the permalink structure from the WordPress default (Plain which uses page ids) to Post name. Permalinks are the web addresses (URLs) associated with posts, pages, categories and other archive pages. Think of permalinks as permanent links changing a URL or your URL structure after a post or page is published may cause broken links.

9 Understanding Themes Theme files control how your site looks and functions. A Child Theme has been built off of another theme. The child inherits from the "parent". You can update a parent theme; your customizations are preserved in the child theme folder. A Premium Theme is a theme that you purchase

10 WordPress Geek Speak... The DATABASE holds our information... the site pages and posts, comments, etc. WordPress files are PHP... a scripting language that pulls the data from the database to display it in browser HTML is the standard markup language used on the web - the WordPress visual editor writes the HTML for you. TAKE AWAY: you can change your theme and your content stays in the database... you don't have to enter it again.

11 Theme Files style.css controls styles site-wide: fonts, colours, layout

12 What is CSS? CSS is an abbreviation that stands for Cascading Style Sheet. The style.css file of a WordPress theme tells the Web browser how to display the content being viewed. You can customize an entire theme by making changes to the CSS file. CSS allows you to make changes in one file to change a font or colour used site-wide.

13 Responsive for Mobile

14 Accessibility-Ready Theme The Accessibility for Ontarians with Disabilities Act (AODA) aims to make the Province of Ontario completely accessible by In January 2014 Web Accessibility came into effect. Website accessibility provides a positive web experience for people with limited mobility, learning disabilities, hearing disabilities, who are colour blind, have low vision and safety for those with seizure disorders. Themes in the WordPress Repository tagged "Accessibility-ready" have met the standards. The theme is "ready" for you to add content that is accessible.

15 Changing your theme If you change your theme after the workshop you may lose a Theme feature you are currently using. Some elements that may be different include widget areas, menu locations, page templates and styling associated with website elements. When you first change your theme, you may think that everything has broken. Don t worry, you probably just need to reset a few things POSTS: What you need to know about changing WordPress Themes How to Choose a WordPress Theme

16 Install & Activate a Theme 2 ways to install a WordPress theme 1. Search the WordPress Repository for a FREE theme, or 2. Upload a Zip File (Premium theme) We are providing you with a child theme for a free theme. When you upload this child theme, WordPress will check if the parent theme is already installed. If it isn't installed, WP will search the repository and attempt to install the parent theme for you.

17 CUSTOMIZE Click Customize from the top toolbar. Preview and change your theme Site Identity: Edit your site title & tagline (we did this already in Settings General) or upload a logo Here you can also add a Site Icon 512px square Colors: These are Theme Specific Options Header image Background image Create Menus & set theme's menu location (we ll do this next) Widgets & Homepage Settings (we'll look at these later) Additional CSS (is part of our HTML & CSS course) Click the x to return to the dashboard.

18 Website Navigation Creating and Customizing Menus In customize: click Menus Click Create New Menu Name the Menu so you know which menu is which Assign a Menu Location (Primary Menu) Click Next + Add items Click on the pages to add them Reorder or indent with arrows Menu Options Automatically add new top-level pages to this menu Publish

19 Plugins can add additional controls to Customize Typography added by Easy Google Fonts Change your fonts and style them without code! This brilliant plugin is compatible with any theme. Come back here and play after the workshop!

20 WordPress Pages You can create either Posts or Pages. Page and Post editing areas look the same in the backend. But there are some important differences. Pages: Contain your website s static content information that doesn t change very often. Static content might include a home page, about, contact or services pages. Usually have commenting disabled Use page templates and will we talk about that in a bit Can be organized in a hierarchy

21 Create & Publish These Pages Pages Add New Title "Home" Pages Add New Title Contact Pages Add New Title Blog Pages Add New Title About Move Sample Page to Trash & clear trash Open Customize set a Static Front Page to Home and set Post Page to Blog

22 The WordPress Visual Editor The WordPress Visual Editor is a WYSIWYG editor, like a browser it displays the output of the code but it also allows you to edit the code. The Visual Editor writes the HTML for you. The WordPress Text Editor allows you to just flip to the Text Editor tab to view & edit the raw HTML code.

23 WordPress Visual Editor Toggle Toolbar

24 WordPress Visual Editor Bold Italics Blockquote Align text Horizontal Line Numbered List Bulleted List

25 WordPress Visual Editor Change Paragraph text to Heading

26 WordPress Visual Editor Special Characters Paste as text Clear Formatting Keyboard Shortcuts

27 WordPress Visual Editor Create Link Remove Link

28 Link text Link text refers to words used in a hyperlink. X Here is the link X If you want to learn more click here Learn more about our Toronto WordPress Workshops You can link within your website and on other websites. Internal links = your site External links = other sites

29 How to Create Links Highlight the text you want to use for the link Click on the link icon in the visual editor Start typing the page name in the popup box Choose from published Pages in list Click blue arrow to apply Click the cog for additional options

30 Tick box to open link in a new tab External Links

31 Layout Layout lets you control the position of your sidebar. A Full Width layout has no sidebar Position the sidebar to right or left Adjust on per page basis Not all themes include layout options

32 Page Templates A WordPress theme may come with a variety of page templates. Set the page template in the drop-down menu under the page attributes tab. Page Templates are a way for theme developers to create unique displays or functionality for specific pages or groups of pages on your website. The Page Templates available to you in the Page screen depend on your theme. If you change your theme, you may lose a template that you are currently using.

33 WordPress Menus Create multiple menus for your site navigation Control which pages are in which menu Reorder menu items Indent to create drop down menus Include links to specific Posts or Categories Include custom links to external websites Edit the menu label Different themes have different menu locations. You can also add a custom menu to a sidebar in a widget.

34 Editing the Menu Titles & Menu Navigation Labels WordPress pulls menu labels from page titles until you set the navigation label. When you change your page title, your menu labels may change. To fix your label: Go to Appearance Menu or Customize Menus click the down arrow next to the item Now edit the label

35 External Links in a Menu Menus aren't just for the pages in your site. You can also add external links with Custom Links. Here s how: In a new tab, open the page you want to link to, copy the URL Paste into the URL field Add Link Text Click add to menu Update the menu You want external links to open in a new tab to do that we need to learn about screen options

36 Screen Options The Screen Options pull down tab is in the upper right corner of your Dashboard. You can turn on or off some dashboard modules. Uncheck a box to hide something and check it again to show it. You only need to do this once per user. WordPress saves your Screen Option configuration automatically (no save button). Different Screen Options are available for different WordPress admin screens. We can use Screen Options here to add the ability to open a menu item in a new tab.

37 Plugins Plugins are code packages that extend the capability of a WordPress site. Plugins can enhance features already available in your site or add new features to it. There are more than twenty thousand plugins in the WordPress plugin directory! So, no matter what you re trying to do, there s [likely] a plugin for that! Search the WordPress.org repository or search from the dashboard plugin interface

38 Tips for Choosing Plugins A Plugin s page on WordPress.org provides a lot of useful information. Review this page to see if the plugin does what you want it to do and if the plugin is working. How long since the Plugin was updated? Read the reviews How many active installs is it being used on? Are support tickets being answered?

39 When a Plugin Doesn t Work... It is wise to first test a plugin in a staging development site separate from your live website. Deactivate all other plugins test Activate the default WordPress theme test If it still does not work, then you can open a support thread Visit the plugin page on WordPress.org and click on the Support tab Scroll down till you find the support form and fill it out

40 Plugins to install & activate Plugins Add New Favourites learnwpca Get Favourites Black Studio TinyMCE Widget Custom Header Extended Dynamic Widgets Formidable Forms WP-SpamShield Soliloquy (upload from zip file provided)

41 Creating a Contact Form Go to Forms Add New Load Template Click Create Go to your contact page Click the Forms button (above the visual editor) Select the form This will insert the shortcode into the page

42 Shortcode A shortcode is a WordPress-specific code that lets you do powerful things with little effort. You can implement complicated code by wrapping a specified shortcode in square brackets. The shortcode is telling WordPress to execute the full code in this place. Shortcodes can come from plugins, themes or the WordPress core. Recognize a shortcode by the use of square brackets: [gallery]

43 Widgets Widgets in WordPress allow you to add content and features to the widget areas of your theme. Widget Areas are containers or placeholders usually located in the sidebar. However, these widget-ready areas can be in the header, footer as well as the sidebar. The number of widget areas and their location and names are dictated by your theme. Sometimes, when you add a plugin, a new available widget comes with it.

44 Settings Media WordPress automatically generates multiple image sizes: thumbnail version medium size version large version full size version (depends on the original image size) If you customize the dimensions of these in the Settings Media Screen, you will need the Regenerate Thumbnails plugin to modify images previously uploaded. By default, WordPress will organize media library uploads into month- and year-based folders.

45 Media Library The WordPress Media Library stores your images and other media files such as PDFs and audio files. The Media Library Screen is typically used to view and delete Media previously uploaded. In the Media Library Screen, there are two views: Grid View and List View. Adding Media: Media is not usually uploaded from the Media Library Screen. Upload and insert media into the content directly from a Page / Post. You don t need to migrate away from where you re working.

46 Uploading & inserting an image Place your cursor on the left margin of your text. The Alignment setting allows you to control whether the image appears on the right or the left side of the text and how text flows around the image. Click the Add Media button (located above the visual editor) to launch the Media Uploader interface. Upload or Select Your Image: Either browse your computer for new files to upload or select from files already upload to the WordPress Media Library. Review Attachment Details & Display Settings before inserting the image into the page

47 How to add a PDF 1. Click Add Media 2. Upload Files 3. Select Files 4. Browse for the pdf file 5. Open 6. On the right-hand side, set the Attachment Details "Title" to the text you want to use for your PDF link 7. Check the Attachment Options "Link to" should be set to Media File 8. Click insert into post: A link to the PDF file will be inserted into the page content. When a site visitor clicks on the link the file will open in Adobe Acrobat. See this post :

48 Add an image to a Widget Go to Appearance Widgets Add a Visual Editor Widget to a Widget area Click the Add Media button (located above the visual editor) to launch the Media Uploader interface. Upload or Select Your Image: Either browse your computer for new files to upload or select from files already upload to the WordPress Media Library. Review Attachment Details & Display Settings before inserting the image into the widget. You may wish to link to a page, post or PDF.

49 Embed a YouTube Video Click on the Share button under the YouTube video you want to add Copy the Share link Open your WordPress page/post and paste the share link into the post where you want it to appear The video will show directly in the Visual Editor The video is not part of your WordPress Media Library, the file has been uploaded to YouTube

50 Custom Header, Custom Header Extended & Soliloquy Slider in Header In Soliloquy, create a new slider called "Home" Slider dimensions for header images (2100 x 400) Use sample images provided or add your own from pexels.com Adjust slider settings to turn off arrows and adjust slider speed Edit home page and set slider - This is specific to Kuorinka theme. Other themes may use other slider plugins

51 WordPress Native Galleries Create 3 new pages: Portfolio, Photography, Paintings Open the Photography Page Click Add Media and Browse & Upload photos Click Create Gallery (top left corner) Tick all the images you want in the gallery Click create a new gallery button at bottom right You are now on the Edit Gallery Screen. Here you can drag and drop to reorder images Under Gallery Settings (on right) select Link to Media File Click "insert gallery" button at the bottom right.

52 Extending WordPress Native Galleries with Plugins LIGHTBOX: Plugins Add New Foobox Image Lightbox SLIDERS: we use the Soliloquy plugin (already installed) Add the license key to Soliloquy Settings Click Addons Tab: Install & Activate the Dynamic addon In Soliloquy Dynamic slider, click Configure

53 Suggestions to Configure Feel free to play with these on your own Slider dimensions = 960 x 500 you can make this what you want but any taller and viewers may need to scroll Slider Transition Duration = 3000 Speed = 400 Slider Position = center

54 Parent/Child Pages, Templates & Featured Images Page Attributes Parent Pages can be arranged in hierarchies. The dropdown contains a list of all the pages in your site. A child page will include the parent page in the URL. Page Attributes Template I have created a custom page template to use on the parent page "Parent Page (Show child with thumbnails)". If you change themes you will need to use a plugin such as Content Views Featured Images Set featured image on the child page to show on parent page.

55 Featured Images A featured image is an image that is chosen to represent a page/post on another page. A featured image on a page can serve as a link to another page or post. The display of this image is up to the theme. It may be used on an excerpt page, as a header image, or in a widget. The image may or may not show in the post/page itself but on a parent, excerpt, or archive page.

56 Putting it all together for a Portfolio Each child page needs: Parent set to "Portfolio" Add content or a gallery on the page Set featured image (an image that will show on the parent page "Portfolio" for navigation to the child page) Then... Fix the Menu - to remove the child pages or drag them to be drop-down items.

57 Blogging Posts are: Entries in your blog (weblog). NOT a page In reverse chronology: newest on top Typically organized into categories Can display date, author, tags and categories (called meta data) May invite comments Require a few extra steps before publishing

58 How to Publish a Post Go to Posts Add New Add the title of your post Edit the permalink: If a permalink has it s too long shorten it. Create your post right in the visual editor or paste in a pre- written post from Word Add images and a featured image Style your post content headings, lists and links Add a category & tags

59 Categories WordPress uses categories to structure your blog like chapters in a book. Categories are for broad topics start with 3-4 categories Before you create categories, ask 1. Who is your audience? 2. What kind of blog will it be? 3. What are your readers interested in? 4. What value will your blog provide to your readers? Use different names for categories and tags File each post under one category only

60 Tags Tags are another way for you to organize content. A tag is a reference to a segment of your post Readers can reach content in your archives that spans topics using tags. Tags help readers find specific content that isn t represented in your basic blog navigation. You can give readers access to your older material. If you are new to blogging, use tags sparingly. Each tag creates an archive page. Ask yourself: how many posts you can/will write using this tag? What value will it add to your readers?

61 Moderating Blog Comments When people comment on your posts, you ll be notified by . Once a visitor adds a comment, WordPress follows your settings either holding the comment for your approval or posting it immediately Don t worry about spam comments. We added the WP-SpamShield plugin to deal with them. In Settings Discussion, you ll find a list of options that change how your WordPress site deals with comments.

62 Custom Post Types Your WordPress website comes with two primary post types: Pages and Posts. A custom post type can be pretty much any type of content (i.e. Events, Testimonials, FAQs). Many plugins add custom post types, for example FAQ Concertina. ADVANCED TIP: If you can't find a plugin that does what you want, you (or a developer) can create your own custom post. This is a powerful way to customize WordPress for your own needs

63 Site Security - WordPress Users Don t give out your password. If you want to allow someone access to the WP-admin for your site make them a user and set a privilege level that is appropriate. Don't let multiple people login with the same username and password - you may overwrite each other's work Make sure all users have strong passwords Delete username "admin" Set user display names so usernames aren't revealed in post meta data

64 Site Security Updating WordPress WordPress has a built-in alert system to let users know when their installations are out-of-date. WordPress Core Files, WordPress Plugins and WordPress themes may all need updating at different times. Updates include security patches, new features and functionality, and bug fixes Don't ignore updates! We recommend WordPress managed hosting with a staging environment where you can test out updates first

65 In Closing: Checkout our Launchlist Delete any pages/posts you created during the workshop that were test pages, empty the trash Remove any installed plugins that you aren t using Clean up the Media Library - delete images and PDFs you don't need Disable the Coming Soon Plugin! Go to Settings Reading, check that you aren't blocking search engines Make a backup, ensure you have regularly scheduled backups

66 Please follow us on: THANK YOU! Facebook: facebook.com/learnwp Pinterest: pinterest.com/learnwp and Subscribe to our mailing list for updates of new workshops