How to Customize Colors Settings in WP Travel Engine
Change the colors on your trip pages so they match your brand. No coding needed - pick from a color palette in your WordPress settings.
Customize your trip page colors
You can make your trip pages look like they belong on your website. Starting with WP Travel Engine version 6.6.1, you can choose your own colors for trip pages, trip listing pages, and other WP Travel Engine elements. You don't need to touch any code. Everything is done through a color picker inside your WordPress settings.
A trip listing page is the page on your site that shows all your trips in a grid or list. A color picker is a small tool that lets you choose a color from a palette or type in a color code.
Why this matters
A plugin is a piece of software you add to WordPress to give it extra features. WP Travel Engine is a plugin. A theme is the overall design template for your WordPress site.
Before this feature existed, WP Travel Engine tried to pick up your theme's main color automatically. It did this using something called a CSS variable. CSS is the code that controls how things look on a website, and a CSS variable is a small piece of that code that stores a color value.
Not all themes used that variable, though. So WP Travel Engine would fall back to its default blue color. That's why your trip pages sometimes looked different from the rest of your site.
Now you can set the colors yourself. They'll work no matter which theme you use, so you won't run into that mismatch anymore.
You'll need WP Travel Engine version 6.6.1 or newer. If you're not sure which version you have, check your plugins page in WordPress for an update prompt.
Finding the color settings
The color settings live inside your WP Travel Engine settings panel. Here's how to get there.
Open your WordPress dashboard
Your dashboard is the control panel you see when you log in to WordPress. It's usually at a web address like yoursite.com/wp-admin. Log in and you'll see it.
Go to WP Travel Engine settings
This gets you into the plugin settings where the color options live. On the left side of your dashboard, look for WP Travel Engine in the menu. Click it, then click Settings.
Open the Display section
This takes you closer to the design-related settings. At the top of the settings page, you'll see several tabs. Click on Display.
Open the Appearance tab
This is where the color controls are stored. Inside the Display section, you'll see more tabs. Click on Appearance. This is where you'll find the Color Settings panel.
You're now looking at the color settings. Let's go through each one.
Colors you can change
There are four colors you can set. Each one controls a specific part of how your trips look on your website.
Primary Color
This is the main color for WP Travel Engine elements. It affects buttons, links, and other key parts of your trip pages.
Say your logo is forest green and you want your trip pages to use that same green for buttons and highlights. This is where you'd set it.
Discount Ribbon Color
This sets the color of the discount ribbon on your trips. A ribbon is the small label that appears on the corner of a trip card.
Say you're offering 20% off for early bookings on a 5-day Annapurna trek. The little ribbon that says "20% OFF" on the trip card will use this color.
Featured Ribbon Color
This sets the color of the "Featured" ribbon on your trips.
If you mark a trip as "Featured" to highlight your best-selling tour, the ribbon that appears on that trip card will be in this color.
Icon Color
This controls the color of icons used in WP Travel Engine. These are the small symbols next to things like trip duration or difficulty level on your trip pages.
If you want those little icons to match your brand color instead of the default, set it here.
You can change any of these at any time. There's no right or wrong - pick what looks good with your brand.
Warning Message
This sets the color of warning messages shown on your trip pages. A warning message is used to highlight important information, such as capacity alerts or booking cutoffs.
For example, if a trip has limited spaces left, a warning message can let visitors know that availability is running low. This is where you'd set the color for that message.
Info Notice
This sets the color of information notices shown on your trip pages. An info notice is used to share helpful information, such as booking tips or important notes.
For example, you might use an info notice to remind visitors about something they should know before booking a trip. This is where you'd set the color for that message.
Saving your colors
Once you've picked the colors you want, you need to save them for the changes to take effect.
Save your settings
This applies your changes to your trip pages. Scroll to the bottom or top of the settings page. Look for the Save Settings button and click it.
When you save, WP Travel Engine applies your chosen colors across all the relevant parts of your trip pages. This overrides the default blue color. Your trip pages will now blend with your site's look and feel, even if your theme doesn't use that CSS variable mentioned earlier.
You can check how things look by opening one of your trip pages on your website. If a color doesn't look right, come back to these settings and adjust it. You can change your colors as many times as you like.
If you're still stuck or have a question we didn't cover, our support team is happy to help. Reach out at our support page and we'll get you sorted.