introduction what you'll learn

Transcription

1

2 introduction Jetpack is a plugin made by the same people that made Wordpress. By installing Jetpack you add a variety of useful modules to your Wordpress website. To use Jetpack on your website you need a free wordpress.com account. There s also a slimmed down version of the plugin, called Slim Jetpack, which doesn t require a wordpress.com account. Our themes support both Jetpack and Slim Jetpack. In this tutorial you ll learn how to install Jetpack/Slim Jetpack on your website and how to use it. what you'll learn how to install the Jetpack / Slim Jetpack plugin how to use the modules of the plugin

3 Installing (slim) Jetpack In your Wordpress backend, go to Plugins > Add New and search for Jetpack. From the results screen choose to install either Jetpack or Slim Jetpack. You install a plugin by clicking the Install Now link. Follow the on-screen instructions to install and when the installation is finished, choose to activate the plugin.

4 connecting to wordpress.com (jetpack only) If you ve chosen to install Jetpack, you ll need to connect it to the Wordpress.com servers. You do so by clicking the Connect to Wordpress.com button at the top of your screen. Follow the on-screen instructions to connect your account. working with (slim) jetpack If you re using Jetpack, you ll see a new menu entry called Jetpack near the top of your Wordpress admin menu, from where you can manage the plugin s settings. If you re using Slim Jetpack, you ll find the plugin s settings under Settings > Slim Jetpack. Activating and deactivating modules With a fresh installation of the plugin, all modules are inactive. You can find out what a module does by clicking the learn more button and activate a module by clicking the Activate button. Once a module is active, for some modules, a configure button appears next to the learn more button.

5 If you decide you no longer need a particular module you can deactivate it. De-activating a module is a bit counterintuitive. It works by clicking learn more, which causes the configure button to change into a deactivate button (which you then click to deactivate the module). Useful modules explained There s a number of Jetpack modules, some of which are very useful, while others less so. We ll briefly go through all of them and specifically look at those that will enhance your theme (we re assuming here that you re using one of our themes :)). carousel With Carousel active, any standard Wordpress galleries you have embedded in posts or pages become clickable. When someone clicks any image in a gallery, it launches a full-screen photo browsing experience. The website disappears behind a semitransparent layer and a single photo from that gallery displays at the centre of your screen. You can now browse through the other photos in that gallery by using the arrows. Whenever you have the Carousel module active, all your existing and future galleries automatically get this new functionality.

6 You can configure two things about the Carousel module: 1. The background colour of the screen overlay; you can set this to black (default) or white. 2. Whether to show exif data of your images. Exif data show things like shutter-speed, aperture, geo-location, etc. Note that these only show up if they are available with the image. You reach these settings by clicking the configure button once Carousel is active. This takes you to your media settings where you ll see a couple of additional fields relating to Carousel. For more information about the Carousel Module, also see our tutorial Working with galleries in Wordpress. sharing In our themes sharing buttons are already integrated, so there s no need to activate this module. spelling and grammar It s good to check your spelling before you publish anything on your website. If you like writing your posts in a word-processor (like Microsoft Word) you can use the spell-check there. But if you prefer to write directly in Wordpress, you may find the spelling and grammar module useful to activate. Once activated, you need to tell this module when to proofread your documents, otherwise it won t do anything. To do so, click

7 the configure button. This will take you to Users > Your Profile, and here under proofreading tick the boxes for automatic proofreading. Also, if you write in English, have a look through the rest of the options that this module can check for you. Note: the spelling and grammar module currently works for a limited number of languages: English, French, German, Portuguese, and Spanish. gravatar hovercards You may want to consider switching on this module if you get a lot of comments on your posts. Hovercards enhance Gravatar images (the small images next to commenter's posts) with information about a person: name, bio, pictures, their contact info, etc. They pop up when you hover over a commenter s images (provided they have a hovercard associated with their gravatar). omnisearch The omnisearch module adds search functionality to the backend of your blog. When you activate this module, you ll get a new item in your menu, under Dashboard. When you go to omnisearch, you can type in a search phrase at the top of the page, and you ll get to see where that phrase appears on your site.

8 Useful if you want to find a specific piece of content but can t remember exactly where it is. Contact form With the contact form module active, it becomes very simple to add a contact form to any post or page. A contact form is a great way to offer your readers the ability to get in touch with you. When the module is on, you ll see an extra button above your post-editing area called Add Contact Form. Clicking this will open a form builder, which lets you add a contact form to where you re currently typing. In the form-builder you can set which fields to populate your contact form with. You can drag and drop fields to different positions. Clicking the minus sign right of a field removes it from the form. And you can add new fields at the bottom of the formbuilder. At the top of the form-builder there s a second tab called notifications, which lets you set the address to end the form to. If you leave this blank it will send to the site administrator s (which is probably you anyway, so it s usually fine to leave this field blank. When a user submits your contact form, the feedback will be filtered through Akismet (if it is active on your site) to make sure it s not spam. Any legitimate feedback will then be ed to you, and added to your feedback management area (a new admin menu item added by this module).

9 tiled galleries With the Tiled Galleries module you can create elegant magazinestyle mosaic layouts for your images, consisting of squares, circles or rectangles. With this module active, you can also still use the standard Wordpress thumbnail grid gallery. Galleries are explained in detail in our tutorial Working with galleries in Wordpress. widget visibility With this module you can control on which pages your widgets are visible. This can be useful when you want an item to appear in your sidebar on some pages, but not on others. When active, each widget gets an extra button called visibility next to its save button. When you click this, you can choose a set of visibility options. You can either show or hide a widget on certain pages. So for example, if you wanted to show a particular widget only on your About us page, then you d select show and set the page to about us. If you wanted to show that widget everywhere, except on the About us page, then you would change show to hide. It s possible to add multiple rules by clicking the Add link. So if you wanted to show a widget only on the homepage and the blog page, you could do so by adding two Show if rules.

10 shortcode embeds With the Shortcode Embeds module a number of extra shortcodes become available. These new shortcodes are designed for embedding media from other places in your site. But because you can now also easily embed things from other sites by simply pasting the URL of whatever you want to embed, this module isn t very useful anymore except in a few cases. This module also allows you to insert slideshows in your posts and pages. So if you want to use slideshows, you should activate it, otherwise you can ignore it. Slideshows are explained further in our tutorial Working with galleries in Wordpress. extra sidebar widgets Activating this module, you get a number of extra widgets: With the RSS Links Widget you can add links to your RSS feeds to your sidebar. Every Wordpress website automatically generates RSS feeds, which people can subscribe to and automatically receive updates from your site. You can read more about RSS feeds here: With this widget you can choose to display links to your RSS feeds as text-links, image-links or combined image and text-links. And for the RSS feed image icon, you can choose from several sizes and colours. It s not possible to set your own sizes or colour though (sorry, you can t set your theme colour with this one), so it s probably safest to stay with the default orange, which is most widely recognised

11 The Twitter Widget shows your latest tweets within a sidebar on your site. On the left you can see what it looks like. It works with any public Twitter feed, so you can include your own latest tweets or someone else s. It s also possible to include tweets based on a search term, a list, or tweets you ve favourited. A Twitter timeline you embed on you site is interactive, so readers can reply, retweet and favorite tweets straight from your website. Embedding a twitter timeline is a two-step process, for which you ll need a Twitter account. First, go to Twitter and create your Twitter Widget. Choose to include tweets from your own or someone else s timeline, or your favorites, a list, or a search. You can set some more options here, but that s not really necessary, because you ll be doing further customisations in Wordpress later. Save your widget in by pressing the Create Widget button. This generates a code in a box beneath the preview of your timeline. From this code copy the data-widget-id, switch to your Wordpress site and in the Twitter Timeline widget configuration, paste this ID in the box that says Widget ID. Now you can set a number of further options to style your Twitter timeline such as width, height, title, color, etc. By playing around with it a little, you can make it match your theme very nicely.

12 The Facebook Like Box Widget shows your Facebook Like Box within a sidebar on your theme. This only works with facebook pages and to set it you enter the address of your facebook page (copy/paste works best). You can adjust the height and width to match your site and choose from a light or dark color scheme. The Image Widget lets you easily add images to a sidebar on your theme. Before you add an image, you ll need to get the file URL for the image you want to show. If you want to use a photo that s not yet in your site s Media Library, you ll need to upload it first. You can do so by going to Media > Add New. Next, go to your Media Library and click on the Edit link under the photo you want insert. On the right of the next screen you ll see a box with the file URL in it. This is what you need. Select and copy it (by pressing CTRL+C). Next, go to your Widgtes screen and place an image widget where you d like it to appear. You can now paste the File URL you just copied into the Image URL box. There are a few more settings for the Image Widget: Widget title: The title to be displayed above the image. Image URL: The URL of the image you wish to display (as explained above). If you re using an image from another website, check the URL in the browser before adding it to the widget to confirm that it ends with an extension specific to an image file (such as.jpg,.gif,.png, etc.).

13 Alternate text: Text to be used as a replacement whenever the image cannot be viewed. (Optional) Image title: Text to be displayed as a tooltip (when a mouse pointer is hovered over the image). (Optional) Caption: Text to be displayed as a caption under the image. (Optional) Image Alignment: How to align the image. Choices: left, right, center, none. Width: The display width (in px) of the image. This should be a value equal to or less than your theme s sidebar. If you leave this empty, the widget will attempt to determine the original width of the image and use that. Height: The display height (in px) of the image. If you leave this empty, the widget will attempt to determine the original height of the image and use that. Link URL: The URL to link the image to. When someone clicks on the image they ll be taken to the page you specify here. (Optional) Remember to click save when you re done and you ll have the image displaying on your site.

14 infinite scroll Our themes don t support this module. It changes your posts page to automatically load new posts when you reach the end of the page, instead of having to click a link to load more posts. In practise this does mean that as the number of posts on your site grows, you never get to see your site s footer anymore. That s it! Now you'll be able to use and configure the useful modules of the (Slim) Jetpack plugin. Subscribe to our newsletter for more Wordpress website tutorials, updates and tips. You'll also get all our tutorials in e- book format for easy reference. Illustration of Great Tit, in a Dutch bird book Onze vogels in huis en Tuin by John Gerard Keulemans, published around 1870 and made available by the Biodiversity Heritage Library.