Creating the Perfect Custom Travel Blog with WordPress

If you’re a frequent traveler, chances are you chronicle your adventures. This could manifest as some images on Twitter, a private notebook or even a full-blown blog detailing your experiences.

But if you don’t already have a travel blog and are thinking about starting one, today I’m going to show you how you can create the perfect diary for yourself, no matter what content you want to share.

Finding a Place to Host Your Travel Blog

If you already have the perfect site to use feel free to skip down. If you’re wondering how to get things set up, this section is for you! There are essentially three ways to go:

• Use WordPress.com
• Self-host your own WordPress installation
• Use a local environment

Let’s take a look at the pros and cons of each, and when you would want to use which.

WordPress.com

WordPress.com gives you a website instantly, but it will be a subdomain of wordpress.com. This means that your website’s URL will be something like mytravels.wordpress.com. Since WordPress.com has millions of websites, chances are you won’t find anything generic that isn’t taken already.

The downside is that you may not be able to use the subdomain you want and your URL will have wordpress.com in it. If you’re a developer or you like to keep your data within reach you’ll miss out a bit since there are no databases or admin panels you can access, you have fewer server-level options.

If you’re willing to pay some money ($13/year) you can map your own domain to the system which will get rid of the subdomain issues.

All in all, use WordPress.com if you don’t need to access databases and your fine with not fine tuning servers and other such – more involved – matters.

Self Hosting

Self hosting is actually not much different from using WordPress.com once you set things up. Many hosts have one-click installations which will work properly our of the box. That said, the process of buying a server and then installing WordPress is still more complex than using WordPress.com.

The downside of self-hosting is that you are at more risk. You could potentially install a faulty plugin that would disable your site, in which case you may need to contact your host to resolve it, which could be difficult if you’re abroad. Using a huge infrastructure like WordPress.com’s means that you may be less exposed to specific attacks.

In a nutshell: If you like to remain in complete control of all your data and/or you need customizations which aren’t possible on a managed environment like WordPress.com you should go for a self-hosted site.

Local Environment

A local environment is great because it doesn’t require an internet connection. This can help reduce your costs, or it may be the only viable option if you really are in the wilderness. Your local environment will act just like the online one you’re used to, but all the data – images and all – are stored on your hard drive.

It’s super easy, but if anything doesn’t work you’ll have difficulty fixing it on the road if you have no experience with this sort of thing.

The other downside is that you can’t store things in the cloud. If privacy is a concern than this is a moot point, but if it isn’t I prefer to store images on Amazon or other servers, it makes my site much more mobile if I want to put it online at some point.

I would advise a local environment if you’re a developer or if you’re going into places without an internet connection and you still want to document your progress. Take a look at our article on setting up a local development environment for more information.

Getting Started

Once you have WordPress installed it’s time to add some basic plugins for travel purposes.

The whole premise of the article is to create a flexible system where you can add whatever you need, so to follow along you’ll need to install at least the first one, Advanced Custom Fields.

• Advanced Custom Fields to add custom data in a user-friendly way
• Akismet should come pre-installed, you can use this to prevent comment spam
• Jetpack to add all sorts of great features, from better galleries to social sharing
• My Private Site allows you to restrict your site to only be viewable by logged in users
• Amazon Web Services and WP Offload S3 for storing images on Amazon servers

With the exception of Amazon S3, setting up these plugins is pretty easy, and we’ll be looking at ACF extensively. I like to store my images on Amazon servers because it makes it easy to migrate my site anywhere since my images and other media content don’t have to be moved.

If you’d like to do this (it’s completely optional) take a look at our moving WordPress media to Amazon S3 article.

Using WordPress Out Of The Box

Without adding anything too special, we can already create a pretty good travel diary with a free theme and a couple of default features.

Let’s take a look:

1. Post Formats

Post formats allow you to specify the type of content you are entering, much like you can on Tumblr. On the front-end this may make a difference visually, and it allows you to separate your content by type as well.

2. A Nice Theme

I’ll be using a new free theme called Yuuta, which I learned about at WPTavern.

I find this theme to be beautifully minimal. This is great because it is visually appealing and it allows us to make modifications more easily, we’ll get by with minimal styling.

3. Featured Images

Featured images give visual distinction to your posts and make your website look nice. Almost all themes make extensive use of them. Yuuta uses them in headers, and in case of posts using the image format, all text is superimposed on the image itself.

4. Galleries

You can add a gallery very easily in WordPress. Simply upload a bunch of images in the add media section, select the ones you want and click on the create gallery button. You’ll be able to change the order, label your images and more with the handy interface.

5. Jetpack

The three features I specifically wanted for this project were tiled galleries, carousels and social sharing options. Tiled galleries will create the masonry effect you see in the screenshot above, instead of the somewhat ugly blocks of images. The carousel feature allows users to open a gallery in a lightbox, cycling through the pictures easily, even adding comments and seeing exif data in the process.

Finally, social sharing allows you to post to Twitter/Facebook automatically and to display like/tweet buttons next to posts.

Creating a Travel Blog: The Problem

We’ve already created something nice, but there is one flaw which we can’t solve easily. Any specific field of writing contains a bunch of additional information which we want to display somehow.

Recipe blogs may want to share cooking time, page length for book review sites, movie-related sites may would display directors, actors, running time and more. In a travel diary you might want to show locations, perhaps review local restaurants, document interesting people you meet, and so on.

There are two pieces to this puzzle: adding the data and displaying it. You can already add custom data to WordPress, but all you get is a facility to add key value pairs – not optimal when adding complex stuff like location.

This is why we’ll be using ACF. We’ll be able to add location data, date pickers, select boxes, number inputs and all sorts of other fields to serve us while entering data.

I believe that getting the data into the system in a standardized way is far more important than displaying it. Once the data is in and it is possible to add to it consistently, displaying it is easy-peasy. Even if you aren’t code-oriented, you can get a coder to add a feature so much more easily.

The Plan

Let’s do some planning before we create some fields for ourselves. I’ll try and come up with a use case that incorporates a bunch of fields and is realistic as well.

First of all, I want to be able to display a location for any of my posts, so I’ll be adding a Google Map field to all posts.

I also thought it would be fun to document some trails. Write a post about one, share the length, the map, recommended bottles of water, and so on. This would require a file upload field for the PDF map and some number fields.

Writing profiles about interesting people is also fun, we could share age, job, date met, and so on. A date field, number field, text field and others would be needed here.

Finally, we could review some restaurants and cafés. We can use a radio button field to rate them, use text fields to indicate their Twitter feed and so on.

To declutter our interface we’ll use advanced location rules for our fields. We’ll use categories to separate our regular posts, trail descriptions, people profiles and restaurant reviews and then use the rules to restrict fields based on the post’s category. Due to this, go ahead and create the categories we’ll need: Trails, People, Food.

At the of it all we’ll use some basic code to actually display our data using a child theme to complete the travel diary.

Creating Custom Field Groups

In the Custom Fields section I have created four field groups. The first one – Location Options will contain a single map field. This will be assigned to all posts.

Next, I created a Trail Options group. This will contain all the settings we want to add for writing about trails. This group will only be shown for posts in the Trails category.

The third field group will be named People Options, we’ll use it to add the details of the people we meet.

Lastly, let’s add a Food Options group which will contain all our fields for writing about restaurants and cafes.

Once you’ve created each field group, go into each one and set the location. The location settings should be shown everywhere so no need to modify anything there, but for all the others you’ll need to specify a second rule: each should only go into their respective categories. Here’s how that is set up:

Finally, one recommendation I have left is to scroll down to the options box and set the style option to “Standard”. It will add a box around your options, they will look a lot more like built-in WordPress boxes.

Adding Fields

Head into the location options and click on the blue add field button. The first thing I do is go to the third option – field type – and select the field I want. In this case it should be a Google Map, which is toward the bottom of the list.

Then, I fill out all the little details. The most important bit is the field label and field name. The label is what users see, the name is how you refer to the field when retrieving it in code.

By default the name is generated from the label – and that’s fine – but in some cases you may want to manually enter it. If you make the label “Your Age”, the name will be “your_age”. It may make sense to just make it “age” instead. Either way, this is a personal preference, you can leave the name as is.

Note that I’ve set the map height to 200. The default is 400, but I thought it would be a good idea to keep things as small as possible since I’m more likely to work from a small laptop on the road.

All fields are easy to set up so I won’t walk you through all of them, just select a different field type and fill out the options.

Here is a list of all the options I’ve set up on my end:

• Location Options
  • Location – Google Map field
• Trail Options
  • Length – Number field
  • Duration – Text field
  • Trail Map – File field
  • Difficulty – Select field
• People Options
  • Age – Number field
  • Favorite Color – Color picker field
  • Profession – Text field
  • Website – Text field
  • Twitter – Text field
• Food Options
  • Location Type (restaurant, cafe, etc) – Select field
  • Rating – Radio Button field
  • What I Had – WYSIWYG field
  • The Location – WYSIWYG field
  • The Service – WYSIWYG field
  • The Menu – WYSIWYG field
  • Open Since – Date picker field

Once you’ve got that all set up, it’s time to get to work and write some posts. Make sure to add a couple in each category so you have enough content to work with. When creating a system like this, I like to create complete content first. This will make my work look awesome when I first test it, imbuing me with more enthusiasm.

Once I make sure everything works I stress test the environment, usually using WPTest.io, with posts that don’t have images, don’t have titles, don’t have content, have 20 categories assigned, and so on.

At the end of the day you should have a bunch of posts with different categories assigned. If you’re wondering how that post thumbnail is showing up there, I used a plugin I made called Easy Featured Images. You can even learn how to make the plugin yourself, right here on WPMU DEV!

When adding your posts, make sure to fill in all the fields to get a complete data set. I also recommend having one or two posts where you deliberately leave out some, or all information. This will allow you to test cases where you don’t want to add data, or you simply forget.

Displaying Our Data

To display the data I created a child theme. If you don’t know how to create one, we have a child theme guide, but here’s the TL;DR version.

Create a folder in your themes directory named traveldiary. Add two files in there, style.css and functions.php. In the stylesheet add the following code, replacing my name with yours and editing any other details you would like.

The only important bit of information in there is the theme name (which can be anything) and the template which must be the name of the directory of the parent theme. Next, in the functions file we’ll make WordPress load the stylesheet of the parent theme.

Switch to your new child theme and if you did everything correctly you should notice no difference on the front-end.

For this example, let’s create a post about a trail and display the location and all the other data associated with it. Here’s how the options look when editing the post.

Without any modification we should see the featured image on top, some text then some post meta on the bottom, something like the image below.

To get started we’ll need to find the file responsible for displaying the single post content in the parent theme and copy it into our theme. The file is called content-single.php and we’ll be adding all the code shown below just under the ending div of entry-content, it should be on line 45.

Let’s add the non-location data first, that will be easier. A simple table will do, so using the the_field() function from ACF we pull our data into an HTML table.

Whenever a field is single-value based, like a number, text, select field or similar you can use the the_field() function to grab the value. If you are in a loop all you need is the field name for the first parameter. Outside of the loop you can use the post ID, or an object name and an ID for objects which aren’t posts. See the ACF documentation for more info.

For more complex data, like location or images you have two options. Some fields allow you to set the return data. The file field which I’ve used can return the file object, the URL to the file or the file ID. The latter two are simple values so will be returned as expected by the_field().

To grab the data from more complex data like a file object you should use get_field() to get it in array form. In most cases you can still use the_field() but the array will simply be printed on screen, which isn’t very useful.

In this case, I chose to return the file URL so I can use the_field() to link to it easily.

So far so good, time for the location. If you print out the location field you’ll see that it contains the address, the latitude and the longitude. We could display these in a table, but wouldn’t it be awesome to have an actual map? We can use the Google Maps API to do just that!

There are three steps to doing that. First of all, go to Google Developer Console and register an application. You should be able to follow on-screen instructions and then obtain an API key. Next, you’ll need to enqueue the Javascript API with the API key in the request. Finally, we’ll add some code to display the map.

To enqueue the script, add the following code into the td_theme_styles() function which you should already have.

Finally, above the table we’ve created, add the following code, explanation ensues!

First of all, I grab the location field. Next I added a heading with the latitude and longitude displayed. Next is an element which will hold the map.

The Javascript below uses the Google Maps Javascript API to show a simple map. The result of our work should be something like the screenshot below.

It could look better, but considering how little work we did, it looks great! If you’d like you can start adding some styles in your child theme’s stylesheet to make it look nicer.

Adding Front-End Filtering

We now have all this power to show our data, but what about letting users cruise through our posts in different ways? How about allowing them to look at only trails that have an easy difficulty?

Let’s enable this in two steps: First, we’ll modify the home page query to allow us to do this, effectively creating a link that we can share to a page that will show these posts. Secondly, we’ll add some links to the navigation and enable our data table to link to this page.

To get the first part done we’ll use the pre_get_posts hook which is a bit dangerous to use. It affects all queries on the site, so you may see it affect the admin as well.

For instance: if I use it to exclude a certain category on the home page and I don’t use the correct conditional statements, it may end up excluding them in the admin post list. That said, if you see any issues, just disable the function and things will pop back to normal. Here’s what I did:

The additional query arguments I’ve set will only kick in if we’re on the home page, the query is the main one (not a secondary loop query) and if the meta_key and meta_value query parameters are present.

If these conditions are met we add these as parameters to the query which will result in only those posts showing which have the particular meta value set. Note that this will work for our difficulty custom data as well as any other key-value based information. We could use it to link to all 20 minute long trails.

Once this is in place, we can link to http://mywebsite.com/?meta_key=difficulty&meta_value=easy to list all trails that have an easy difficulty. From here on our we can add this as a link to our navigation menu, and we can modify the difficulty display in our table above like this:

Adding Admin Columns

If you’re hell-bent on optimizing your experience you can even modify the admin to suite you better. Let’s assume you write one post about each place you visit. In addition to the location field – which is in place for all posts – we can add a “Days Spent” field which will document the number of days you stayed at the location.

You can add this field to the admin screen as a column in the post list. Not only that, but you can filter and order based on the value as well, let’s take a look how.

Adding columns requires a few steps, depending on how deep you want to go down the rabbit hole. First you’ll need to add the columns themselves, then fill them up with data using a second function. Lastly, you can add advanced actions like filtering and sorting with some more code. To get started, let’s add and remove some columns.

This can be done using the manage_[post_type]_posts_columns hook which is a variable hook, you need to use the actual post type you are targeting. The hooked function receives the current columns as an array in the first parameter. We can unset parts of this array to remove columns and create new members to add them.

At the end of this function we need to return a list of columns, the array key should be the name and the value should be the title displayed. The reason I have some extra code in there is to place our new field right after the checkbox, instead of at the end of the table.

I’ve removed the tags and author columns completely since they aren’t needed at all for my purposes and I’ve added the days spend column. The next step is to add some content in there which can be done with the manage_[post_type]_posts_custom_column variable hook.

We can allow ordering based on this column in two steps. We need to hook a function to manage_edit-[post_type]_sortable_columns which returns all columns that allow sorting.

We also need a function that hooks into request to modify the query run on the admin page, based on the new order. This function should return WP_Query vars, here’s how.

One more final modification I’ll make is add a tiny bit of CSS. Right now the width of the days spent column is huge and pushes the title way right. I’ll fix this by enqueueing a stylesheet which adds one simple rule: th.column-days { width:80px }.

At the end of the process we should see a new column in the admin which displays the days spent at the location. You should be able to click in the header to order ascending or descending.

Wrapping Up

I think that with WordPress and a great system like ACF it’s really easy to create something customized to your needs, even if you’re not a developer at heart. Once you’ve wrapped your head around how to create and display basic fields it’s essentially repetition from there.

Have you created a travel diary with WordPress? Or have you created something tailored to your own needs using the same methodology here? Let us know in the comments below and share your links.

Tags:

• diary
• travel