In this tutorial we will:
- Install WordPress as our Content Management System
- Install the Pugpig Connector so that we can deliver WordPress content to our app
- Configure the Connector
- Create our first edition
- Populate it with content
- Preview it with the web preview tool
- Publish the edition
- View on a device (or simulator)
Step 1: Install WordPress
If you don't already have a WordPress instance, the first thing you need to do is install it. If you do already have an instance (either a clean instance or something running your website), skip to the next step.
If you don't have a local machine or server you can use, you could use a free Amazon EC2 Micro instance. We recommend using the Bitnami Amazon Machine Instance (AMI) which comes with everything preinstalled. You can find more information on this at Bitnami Cloud Images.
Ensure you can log in to your WordPress instance as an administrator.
You can optionally setup a WordPress Multisite. For steps on how to do that, check out our Setup WordPress Multisite guide.
Step 2: Configure Your WordPress Instance
Great - you have WordPress up and running. The next step is to install the Pugpig Connector for WordPress.
- Download the Pugpig Connector - you can find the latest version on the Pugpig Resources page (
Server stuff » Worpress » Download)
- You can either copy the connector in to you WordPress plugins folder (
Worpress » wp-content » plugins)or on your WordPress site go to
Dashboard » Plugins » Add Newand select the "Upload Plugin" option.
- Pugpig requires friendly URLs that do not contain a '?'. Edit the structure of your URLs by going to the Permalink section of Wordpress (
Dashboard » Settings » Permalinks) and selecting an alternative URL structure. You can use any of the options excluding the Default.
- Please note that if you are using Internet Information Services (IIS) to host your site, there is an additional steps you must undertake. You can find a comprehensive guide here.
Step 3: Enable the Pugpig Module
Once the Plugin is installed, you need to enable it and verify it is working correctly.
- Go to
Dashboard » Plugins, and activate the
Pugpig For WordPressPlugin.
- Installing Pugpig plugins may result in a warning about “PHPSecLib is not in the PHP include path” - see http://phpseclib.sourceforge.net/ - you can download the whole zip and unzip to the PHP libs directory. Or you can do this using PEAR More info on PHP can be found here.This will output information about how PHP is configured so you can find where to unzip PHPSecLib to if you are unsure.
- Verify that it has created two new Content Type that are displayed on the side menu bar
Dashboard » Editionsand
Dashboard » Ad Bundles
- There are other Pugpig plugins for third party services (e.g. subscriptions) which may be required and these can be downloaded, installed and activated in the same way.
Step 4: Create Your First Edition
The content of our editions will take the shape of posts. The way in which new posts become available to an edition is through the specification of categories and tags. We will only use one of the two in each project, so the first step is to decide which one.
Go to Settings » Pugpig and scroll down. We will set the value of the field Taxonomy to allow on editions to either category or post_tag, depending on our decision.
We can now create our first edition. This will serve as a container for the standard WordPress pages that will make up the edition.
- Navigate to the new
Dashboard » Editionssection
- Click Add New to open the new edition form
- Supply the required values for the edition. You can leave the rest blank:
- Title - the public facing name for the edition, which end users will see
- Key - must match iTunes for the issue
- Edition Date - the date of the edition, which is also used to order the editions in the app
- Free Edition? - tick this box if you want to make the edition free
- Featured Image - the cover image for the edition
- Category/Tag - Categorise or tag your edition. You can give an edition moer than one category or tag but not one of each
Save your edition.
Step 5: Add some content
Create a post
- Go to Posts and click Add New
- Enter a title and content
- Specify the suitable categories/tags
Add posts to an edition
- Edit our edition
- Scroll down to the Flatplan. It will show two squares containing the posts already associated to the edition and the rest of posts which share the same categories/tags with the edition./ This will have information such as post type, headline, section, summary (optional), author and updated date
- We can drag posts from one square to the other. When done with the changes, click Save as draft
Step 6: Preview with the Web Viewer
The module provides a way to preview your edition before downloading it onto the target devices. Note that because of the way different browsers and devices render HTML, you should always test it on a device before publishing.
Because you are probably still using the default WordPress theme, your edition isn't going to look great. You can, of course, use any existing WordPress theme or create your own, but more on that later.
In order to preview your edition in the Pugpig Preview, click the Web Preview link next to the edition in the main Editions list - (
Dashboard » Editions). Use the Previous and Next arrows to move between the pages in the edition. You can also resize your browser window to see how the pages will look in Portrait and Landscape.
Step 7: Publish Your Edition
You can preview your app on a device if you are requesting it from an internal IP address. The internal IP ranges are configured in the Pugpig settings in WordPress.
If you are happy with your edition, it is time to publish it to the world. You publish an edition in the same way you publish any WordPress content:
- Edit the edition
- Change the status to published
- Save the edition
Step 8: View your app on a device
Now it is time to view your edition on a device. For now, use the Pugpig Reader App, which is a generic application that you can use to view Pugpig content.
In reality, you would create your own branded app using Pugpig for Magazines or the SDK. If you don't have access to a device at the moment, but are developing with xCode or Android Studio you can download the Pugpig Products and find links to the relevant iOS and Android Getting Started docs from the Downloads Page.
- Download Pugpig Reader App onto your device
- Ensure that your device can access your web server.
- Determine the entry point for your content. On the WordPress Dashboard, look at the Draft [ OPDS Atom Feed ] link - this should have all editions, even those not yet published
- Follow this link - you should see an Atom XML feed which represents all the published editions in your system
- The URL should look something like:
- If you wish to use the packager to download ZIP files instead of many individual files, it should look something like
- Start the Pugpig Reader App on your device, and click the 'Cog' to access settings
- Type the URL into the URL field and save.
- You should see a single edition in the edition carousel
- Click 'Download' to download the edition
And we're done. You now have an app that shows content from WordPress. You should be able to view the edition offline and use other Pugpig features.