A few weeks ago, in my monthly Patron-only question time event, I received a question about creating and maintaining a photography website. I pulled together my thoughts, and the talk went well, but a few things have changed since then, as going through my website and taking stock of some of the plugins I was using got me thinking about a few areas in which I may be able to improve the site even further.
Before we start, I should let you know that my site is built on WordPress on a dedicated server. I have used and recommended working with WordPress for many years, as it enables me to extend the platform almost endlessly. Although we’ll talk about the danger of having too many plugins, if managed well, it’s a very liberating and useful platform to build pretty much any kind of website on.
One of the questions during our discussion was about my theme and how I integrated it with the Elementor Pro plugin. The theme I was using until just a few days ago was called Bridge, and I have used it for many years without thinking of changing it, until now. The thing is because I have bolted on so many things, like the main menu and all of the sliders and other page elements, I realized that the theme itself had become quite easily replaceable.
On a copy of my website, I change temporarily to the standard WordPress theme, and there were only a few areas that looked really out of whack. I had also become somewhat dissatisfied with the Elementor Pro plugin because there was a critical error that occurred after every update when updating the database. Despite many people complaining about this for several years, it was never fixed, so I revisited a plugin that I used briefly a few years ago and liked, which was a different page builder called Divi.
I had forgotten a large part of the Divi proposition, though, probably because I was so happy with the Bridge theme that I simply ruled this out. Still, Divi can be installed as a page builder inside another theme or as a full-blown theme with a page builder built into it. I grabbed and tried the full-blown Divi Theme and was impressed with how far they’d come over the last few years since I previously tried this product from Elegant Themes.
I figured I’d give it a try and found that my reliance on the Elementor page builder on some pages made the migration to Divi very difficult, as backing out of the Elementor page builder back to regular WordPress pages rendered many pages in various states of disarray, ranging from a mess to a total disaster. Turning on the Divi page builder is less destructive. Most pages can be converted to Divi with a few clicks, but once using the Divi Visual Builder, the amount of control you have over the page elements is astounding.
I’m treading cautiously because I imagine backing out of the Divi Visual Builder will be as destructive as backing out of Elementor pages. So, where possible, I’m trying to stick with vanilla WordPress. Still, some pages are made a lot easier by the Divi Visual Builder, and I’m feeling pretty comfortable that I’ll stick with Divi, so when necessary, I’m flicking the switch. Besides, I also paid for the lifetime license, so unless Elegant Themes pull a swift one on their users, I should be set now for the foreseeable future.
It’s taken me the best side of a week to check all of my pages, though, mainly because of the clean-up and rebuilding that I had to do, so I haven’t yet made anything cool with Divi that I can show you, but as you visit posts if you are maintaining your site, especially if it has a blog, take a moment to check out the blog page, and the way the individual blog posts now look, including this one.
The featured image at the top of each post, the metadata, as well as the navigation is all coming from the Divi Visual Builder. I’m not sure if it will stay, but as you scroll down to the bottom of the post, you might also see a snazzy little animated divider between the post and the comments. That is created with the Divi Visual Builder and added as part of the blog post template created in the Divi Theme Builder, which is the place to create and assign templates to various posts and page types. You just create the template, and Divi ensures that all pages that match the criteria you select, such as all blog posts, are served using that template.
Anyway, a large part of the question I answered in the August Question Time was about the dos and don’ts of running a photography website, and as I came up with a chunk of advice, I figured I’d share some of that with you today. Please note, though, that first-hand discussion on these topics is a privilege of our kind supporting patrons, so if you want to get involved first-hand, please consider becoming a patron too at https://mbp.ac/patreon.
Photography Website Dos
Share Your Work
These aren’t necessarily in any particular order, but one thing you have to do if you are hanging your hat as a photographer is share your work. I can name numerous photographers that have built a pretty respectable name for themselves as photographers without really sharing any of their work. I’ve spoken to people about this, when people have said something like, “Oh yeah, I know said respected photographer, he’s great!” and I’d gone on to ask which of the photographer’s photographs are their favorite, only to be presented with a blank face. They don’t have one because they’ve never seen any of the photographer’s work. Can you call yourself a photographer if people can’t even recall any of your photographs?
Later I’ll share details of the Meow Gallery and Lightbox, which are the plugins I use to create my galleries, including all of the Portfolio galleries that you will find under the menu at the top of each page. If you decide to share various portfolios in multiple genres, as I’ve done, you can also create a tiled gallery of portfolios using the Divi Visual Builder. Click on the Portfolios link to see what I mean. Note that behind the scenes, these are defined as Projects to Divi, not Portfolios.
Show Large Images
Also, when setting up a photo gallery to share your work, try to share your images as large as you can be comfortable with. I’ve seen amazing photographers share their work in 500 pixel-wide images because they are scared of people stealing them. This, for me, is an immediate put-off. If I’m going to give someone my time to look at their work, I at least want to be able to see their work at a decent size. Sure, some people will steal your work, so go and get a lawyer and claim your fees and damages. The majority of the visitors to your website, though, just want to enjoy your work, so try not to hamper that process by sharing tiny images.
Another piece of advice is to stay focused. If you are running a business or just a hobby website, it’s important to share relevant work. If you are a wedding photographer and we are talking about your business website, then you should only be sharing wedding photography. In the case of wedding photography, of course, you will need model releases from your subjects, but staying on topic will help to keep your audience engaged.
Create an About Page
Ensure that you create an About page that tells your audience and potential clients all about you. Include some of the achievements that help to give you credibility. People sometimes need a little help understanding why they should be interested in what you have to say or your ability as a photographer if they are thinking of hiring you.
Many of the plugins I have used and those that I’ll recommend shortly come with example pages, sometimes multiple pages that help you to build nice looking About pages, and sometimes entire sites that look nice, so explore the templates and install a few to see what you can create.
If you sell anything online, I strongly recommend working with a plugin called WooCommerce, which is free, but you will probably need to pay for a plugin or two to make it work how you need it to. This is how they monetize their business, so don’t be afraid to pay for some of it. Note that if you are selling digital products, though, I highly recommend Paddle and have a section on this towards the end of the post.
Another selling tip I learned early on is if you are going to talk about a product or service that you are about to launch, ensure that you have your commerce pages up and running before talking. If you ask for the mail addresses of people interested in buying whatever you are about to launch, 80% of them will not buy anything. If, however, you have a buy or pre-order button, you will make many more sales because people will put down their money while they are excited. It’s human nature.
Build a Mailing List
On a related note, you must build a mailing list of people that want to hear from you. Whether you live in Europe or not, ensure that you abide by the GDPR because a proportion of your audience will almost certainly be in Europe, but start to build a mailing list as soon as you can.
It may come as a surprise, but the audiences you have spent years building on social networks will no longer see your posts simply because they follow you. You now have to pay to reach more than a few hundred of your most loyal fans, so unless you are prepared to pay to reach people you have already gotten interested in your antics, a mailing list is a direct link to their mailboxes and for at least a proportion of them, that will get their attention.
There’s often more than one way to enable people to subscribe to your mailing list. If you hit the Contact Us link under the Connect menu above, you’ll see a checkbox to subscribe to newsletters. If you turn that checkbox on, you’ll see the interest groups you can select so that you only receive newsletters on the subjects you are interested in.
Also, because I send my newsletters out via a service that uses a specific domain and email address, I used the same domain to host a sign-up and maintenance form for newsletter subscribers, which you can see at https://mbp.news. You must have checkboxes unchecked by default to be GDPR compliant and allow people to choose what they want to receive, not deselect what they don’t want to receive.
Include Images in Social Posts
Unless I have you running off to delete your Facebook page, when you do post to Facebook or any other social network, ensure that you have a featured image assigned to your posts, and even if you are just posting about something random, find an image that illustrates or compliments what you have to say. Simple text these days is not likely to grab anyone’s attention, even if they have been chosen from your wider audience to be presented with your post.
Photography Website Don’ts
Don’t Expect Any Visitors Without Doing Any Work
If you build it, they will not necessarily come. Just because you made a great-looking website doesn’t mean people can find it or even be interested in looking for it without a little push. You have to work in some way to build an audience and you have to work to keep that audience engaged.
As you know, I built my audience by starting a Photography Podcast in September 2005. The Podcast is 17 years old this month! At first, I didn’t expect my entire life to be changed by what I started, but I’m pleased with how things have progressed. I can’t say that it has been easy, though. A lot of work goes into creating a releasing a Podcast, including creating the blog post and also an eBook for each post for my kind Patreon supporters.
I have reduced my commitment from a weekly podcast to release at least three episodes per month, and that is still tough at times, but that’s mainly because I’m busy doing other things to forward my business. The decision to release the blog post for all episodes, including the backlog, was another part of my success. Having 17 years of blog posts helps with Search Engine Optimization or SEO.
Don’t Dilute Your Message
In general, I recommend that you stick to a consistent message rather than diluting it with various topics. Still, as you’ll have seen, I talk about many different photographic genres via the guests I’ve had on the Podcast over the years. My Photography work is mostly nature and wildlife interspersed with my travelogue-style episodes when I travel, so there is a general theme. The idea has always been to talk about photography through my own experiences in the hope that it helps you with your photography too. I’m super humbled and honored to have received messages of thanks over the years from people that I’ve been able to inspire, so I know I’m doing some things right.
Avoid Too Many Plugins
As I mentioned earlier I do recommend working with WordPress as your base platform because it gives you the freedom to add plugins to make it do different things, but I do recommend trying to keep the number of plugins you use to a minimum. This is ripe coming from me because there was a time when I was running over 100 active plugins. At the time of this episode, I still have 64 active plugins, which is a lot, but a lot less than 100. I am constantly evaluating whether or not I need each plugin. If I can remove anything and maintain all the required functionality for the site, I don’t hesitate to deactivate and remove plugins.
When you run lots of plugins, the risk of them conflicting increases, and conflicting plugins can cause all sorts of annoying problems. One of the most annoying things is that when you do get a problem, the first thing plugin developers ask you to do is to deactivate all other plugins and see if the issue persists. This is generally not possible on a live site, so you must clone your site to a staging environment to check.
If you allow people to create accounts on your website, especially if you run something like WooCommerce and save customer details, you have to be especially careful about security. Many companies ask for access to your website when they need to troubleshoot an issue with a plugin. Although you can probably trust most of these people, I choose not to trust any of them because that’s the only way I can be sure that no one will steal my customer or user information and sell it to a third party.
Create a Staging Site
If you must provide access to your site to a third party, I highly recommend using a plugin like WP Staging Pro to make a copy of your website that will be accessible under a subdomain, and before you create an account to let the third party in, you have to delete all user accounts and all order information from your e-commerce solution. The only way to protect your users’ and customers’ personal information is for it to simply not be there.
I also change my admin password on the staging site so that the third party has no way to sniff my password and use it to access the production site. The important thing is to use your imagination, think of ways that could be potential security holes, and plug them up on your staging site.
Another good plugin is Shield Security which helps to fortify WordPress in various ways to help keep out the bad guys, and there are audit trails as well, so if something goes wrong, you have a good chance of seeing who got in and what they did.
HollerBox is a great plugin to show email subscription forms or popups to alert site visitors to things you might be promoting. Keep in mind that people generally don’t like popups, but when you consider the amount of work that you put into your site, it’s fine to impose on your visitors to a degree. In many cases, if you promote things that you feel might benefit your visitors, you may find that people simply needed to be made aware of what you are selling or promoting.
The menu at the top of the MBP website is created with a plugin called Max Mega Menu, which enhances the standard WordPress menu system. It can be integrated into any theme, although some will take more work than others.
Meow Gallery and Meow Lightbox are responsible for creating most of the image galleries you see on our website and also for displaying the cool Lightbox that you see when you click on the images embedded into posts and the images in my portfolios etc. The Meow Gallery works with standard WordPress galleries, so you don’t end up with lots of proprietary galleries that leave you dead in the water if you decide to change plugins. There are many different styles of galleries to choose from and they all look great.
Meow Lightbox looks great and above all, I love the fact that it displays the EXIF shooting data for images that you upload to WordPress. You can also define a class that tells Meow Lightbox not to display when an image is clicked, say for when you have an image that you need the visitor to click to jump to another page or website. Just add the class you defined to the image in the WordPress interface, and Lightbox will ignore it.
As customizable as WordPress is, there may be times when you have to add some code to make additional features available. For this, I use Post Snippets Premium. This enables me to check the inventory of my tour booking products and display text either telling a visitor that there are still some places left or that the tour has sold out and offering a link to contact us to be added to the cancellation waitlist.
Slider Revolution is another plugin I would not like to be without. Although some of the sliders that you see on my website were made with Smart Slider Pro, for many years now I have preferred Slider Revolution and use it for most of the animation that you see on this website.
YOURLs Link Creator
Although there is a WordPress plugin to link the two sites, I also strongly recommend using a product called YOURLs Link Creator to create a server that creates short links for your WordPress posts and pages so that you can avoid sharing long and cumbersome links in your Social Media or verbally, as I often do in the Podcast audio. You’ll have heard me give a short link such as https://mbp.ac/789 to jump to this episode of the Podcast. To create that link I have set up a YOURLs server and I simply enter the keyword 789, which is the episode number for this week’s podcast, into a field in the WordPress post editor. Then when I publish the post, the YOURLs site automatically creates the link for me.
It’s important to get a very short domain for use with your YOURLs server. I was pleased when I was able to get mbp.ac for this purpose. I also recommend getting an SSL certificate for your server, and your main server for that matter. Running a site on plain HTTP now displays warnings to potential visitors, and search engines will lower your score considerably if you don’t run your site on HTTPS with a trusted SSL certificate. Ironically, the YOURLs team do not have an SSL certificate, which is pretty strange in 2022.
One other service I’d like to recommend you take a look at is Zapier. Zapier is used to automate tasks and link online services that would otherwise not be able to talk to each other. It can be costly, but if you automate several tasks that would generally take up your time to complete, you will make your money back over the year. I have Zapier announce new MBP blog posts on my social media networks, and it also grabs user details for people that sign up for newsletters via my contact form, which otherwise has no newsletter integration. It can take a little time to put together complicated Zaps, but once they are in place, they start to save you time and money immediately.
Paddle for Digital Products
One last recommendation is Paddle if you intend to sell digital products online. International taxes on digital products such as software and ebooks are now so complicated that you need to sell through a third party that takes care of taxes for you. Some countries have put unrealistic requirements in place as well that just cannot be met by small businesses. I’m not sure if this is still the case, but a few years ago, India required that you hired an accountant in India to process your tax payments. When you sell just a handful of products in India a year, it’s not realistic.
Another reason that I chose Paddle, after several other companies that fell flat, is because Paddle correctly includes the Japanese Tax Registration number for companies selling in Japan into the invoice they generate. I asked FastSpring to do this more times than I can remember, and it was never done. Also, note that although FastSpring may contact you to show your WordPress website working flawlessly with their WordPress plugin, their plugin is a piece of crap, and they don’t support it. If you get stuck, you’ll be told you are on your own.
If you sell digital goods via WordPress, Paddle is the way to go. Note, though, that Paddle also do not have a WordPress plugin, but they have resources to make coding what you need to sell products a breeze. I created several code snippets in Post Snippets Premium that I embedded into my product posts, and then each product is created with a WordPress Custom HTML widget.
OK, so that’s about all the advice I have on creating and maintaining a photography website for now. Note that none of the products or links provided in this post are sponsored in any way. These products and services are what I use daily and are recommended purely because they are great, and I hope you find this useful.
I am often asked about the tools behind the Martin Bailey Photography website, and my knee-jerk reaction is usually to think, “you don’t wanna know” because to achieve what I’ve created there are almost 100 plugins all working together to provide the experience you see. But, the fact that I’m asked about this tells me that at least some of you actually do want to know, so today I’m going to walk you through the main elements that form the backbone of your weekly photography inspiration while providing me with a solid platform to build my business around.
NOTE: Since September 2022 I have stopped using Elementor in favor of the Divi Theme and Theme Builder from Elegant Themes. Elementor is in many ways more powerful, but I grew tired of having to work around a critical error that was thrown after every Elementor plugin update when the database update was performed. Elementor left this issue unfixed for years, so I moved on.
Beneath everything, we have a WordPress installation. WordPress alone is enough to get started creating a website, but the real power of WordPress comes from the plugins that an army of developers around the world create, and the one that I am going to center today’s post around is an amazing plugin called Elementor. Elementor enabled me to transform a number of key areas of my site, and it plays very nicely with all of the other plugins I run, which is amazing when you consider the depth at which this plugin runs and what it can achieve with relatively few steps.
Because Elementor is design-centric, I’ve found it to be the perfect tool for creating a photography business website. I’m still only utilizing a limited number of features, as we’ll see, but I’ll also show you some of the templates so that you can appreciate just how powerful Elementor is. There is a free version that you can use to get a feel for how it works, but if you are going to build a site with Elementor I recommend getting a Pro license, which starts from $49 per year for one site, up to $999 per year for a 1000 sites. I have a license that enables me to use Elementor on up to 3 sites for $99 per year.
It’s probably important to tell you a little more history as well so that you understand my decision-making to get to the point we are currently at. Until around 10 years ago, I created the MBP website with a mixture of non-related tools, some of which, like the gallery software, gradually became a huge time-suck, as I had to deeply customize the code to keep everything integrated. That means that not only did I spend time on the customization, but every time any of the components was updated, I had to painstakingly go through and migrate all of my changes to the new versions and test everything to make sure it was still working as expected.
Well, after doing that for around seven or eight years, I decided that enough was enough, and so, I moved to WordPress, and I promised myself that I would not get into customizing things at a code level. I wanted everything to be customizable via the interface in the browser because this would allow me to update the components without manually migrating my changes. I did have to spend some time migrating the code that I built to manage and maintain my Podcast feed so that I could access them via a WordPress page, but once that was completed, I had pretty much achieved my goal and with very little code-based maintenance required.
For the small amount of code that I did need to add I created a WordPress plugin, and I use what’s known as a Child Theme for the Qode Bridge theme that I use. This means that when the regular theme updates are released, I can update with a few mouse clicks. Of course, because I run a web server, not just a website, I have other maintenance tasks that sometimes take way more time than I’d like them to, but in general, the main website is relatively low maintenance most of the time.
Max Mega Menu
Anyway, let’s start from the top, literally, and talk about how I created the navigation menu, using a separate plugin called Max Mega Menu. I use the Pro version for the added customization options, but Max Mega Menu enables me to completely replace the WordPress menu with the rich experience that you see at the top of every page. This was actually the first thing that I checked when I added Elementor to the site. It was essential that Elementor worked properly alongside Max Mega Menu and needless to say, it did just that. How I added the menu changed slightly as Elementor added their new Theme Builder, but to show you how easy it is, here is a screenshot of the Theme Builder with the template for the site header loaded.
All you need to do is hit that red button with a plus symbol inside and add a section at the top of the page. I have displayed the Navigator so that you can see that this template has just one section, and inside that section is a column, and inside that, is the Max Mega Menu. To add the menu, I simply select the section and then typed the word “max” in the search field, and low and behold, there is a WordPress widget to add the Max Mega Menu, so I dragged that to the section. As I was already using Max Mega Menu and had my menu created, I simply needed to select my menu by name from a dropdown list, and my menu appeared at the top of my new Header Template. I can even click on the menu items to check that everything is in place right there in the Elementor editor.
Whenever you create a new Theme element with Elementor, you are asked where you would like to display it. As you can see in the next screenshot, for my menu, which is in the Header, I want that to be displayed on every page, so I selected Entire Site, and after pressing Save & Close, my menu was added to every page on the MBP website. I cleared my cache to ensure that everyone was seeing the new menu, and that was all I needed to do. I’m not going to go into detail on how to create the menu, as we have a lot to cover, and it is well documented.
Changes on the Fly
Any of you that maintain a website have probably already clicked on this, but there is a hugely valuable aspect of what I just relayed to you, which is, I made these changes on the fly. I didn’t have to create a staging site and check that I could get this working before repeating my changes on the production site. I probably should, but that’s time-consuming, and in my opinion, most of the time when working with Elementor, it is not necessary. People using the site could continue with what they were consuming, and when they reloaded a page or navigated to another area, the menu would have been replaced within the new Header and they wouldn’t have even noticed.
Now, of course, there are times when I actually change the design, and they would be noticeable, but not disruptive. For example, another thing that I did that I was really happy with, was changing what you see at the top of each blog post. Visually the differences were minor, and I, unfortunately, don’t have a screenshot of what it looked like before the change, but I started to use Elementor to dynamically add everything that you see in this next screenshot whenever I release a new blog post. I’ve scrolled up a little as the Featured Image for last week’s post was a little taller than usual, but as you can see from the Navigator, everything at the top of each post I create is included in this template.
When I release a new post, the Featured Image is automatically added to the top of the page, and the title, date and time of publication, the number of comments, and the post’s tags are added as links, so visitors can click on the tags and see a list of related posts. Elementor also enabled me to reduce the number of plugins that I use, by enabling the inclusion of that link that you see to go to the previous post. Of course, if this was an older post, on the right, you’d also see a Next Post link. What’s more, I created that Post Navigation as a template, which I embedded into this template, and I also included it after the post content, so I’m reusing my new elements multiple times in multiple templates, making working with Elementor very efficient. And for the display conditions, I simply selected to use this Post Header for all posts that I have, and this is not only for new posts, but all posts I’ve ever published, so I was able to update the header and navigation for more than 700 posts with a few mouse clicks.
Fusebox Podcast Player
We’ll continue to work down a post page until the footer, as that feels like a natural progression, so the next thing you’ll see if my social links, which are added via a plugin called Social Warfare, and the Podcast player that you see on all posts is called Fusebox. This player is actually now not WordPress dependant, so you can use it on pretty much any website, and it’s highly customizable, including sticky players and full archive players, so I highly recommend it.
The social links are added automatically through their settings and my Elementor templates, and I add the Podcast player each week by pasting a snippet of code into a Custom HTML widget in the post body and just change the number of the podcast to match the post I’m releasing. The rest is done automatically. My code snippet also contains the link to the MBP Pro Member’s eBook Library, which you can see here for the last few months of eBooks, which all open in a rich PDF viewer and have a download button if you’d like to download the eBooks to read offline. If you are not a subscriber, you will see links to the subscription page instead of the library when you click on the library link.
At the bottom of every page on the MBP website, you’ll see a footer, which is also created with Elementor, similar to the Header, and this leads us to another very valuable aspect of Elementor, which is its rich library of templates that are ready to import and edit to your liking. I just selected one of the templates that I thought would suit the site and changed all the links as necessary.
If you’ve browsed for posts by selecting the Blog & Podcast option under the Posts menu in the navigation, you will also have seen the Archives that I built with Elementor, to display posts, starting from the latest, and dating right back to September 1, 2005, when I released my first post. If you are wondering how I have content in WordPress Dating back to 2005, it is possible to set the date of posts when you publish them, including backdating them, so when I moved to WordPress I posted some of my archives myself and paid a friend to post the rest to get the site up to date, so everything I have released is included in my archives.
I won’t go into detail on how to create the archives pages, but starting with a Template, it’s really easy to specify which elements you want to include and how many rows and columns you include as well. And when you are ready to publish it, just add it to a page, which in this case was the site’s regular archive page. It even includes pagination to move back through the archives, which is great!
The Kit Library
Elementor also includes a Kit Library that contains bundles of themes that help you to build a website with similar design elements. I haven’t used these myself, but here is a screenshot to show you the sort of things included. Note the drill-down list on the left side to narrow down what you see when you are looking to build a new site or update your existing one. You can also just search for keywords, like Photography, to get a list of Kits that work well as a Photography website, although there are currently only three listed at this point in time.
Elementor has a certain amount of useful carousel features, but I already have most of the content that I wanted to display to present ideas made with a plugin called Slider Revolution, and here you can see, once again, how easy it is to integrate Elementor with other plugins. Pretty much everything I have tried to do as I’ve gradually redesigned areas of my site has integration built right into Elementor. You just create your slider and add it to the Elementor page, as I have in the header of my Tours & Workshops page.
And, of course, I am using my site to sell these tours and workshops, as well as a number of other products, so the ability of Elementor to work with WooCommerce was another very important condition for me starting to use Elementor. The Tours page is slightly deceiving, because I’m using graphics to point to each individual tour page, and I also create some PHP code snippets that keep track of inventory so that I don’t oversell any of my tours and workshops. I use a plugin called Post Snippets to create shortcodes of the code snippets that I can embed anywhere on the site. This is another way in which I have prevented the need to customize the actual code of WordPress or my themes and works very well when a little bit more control is necessary.
Back to WooCommerce though! Elementor integrated very smoothly with WooCommerce. As you can see in this screenshot, Elementor comes with a slew of widgets to help you to place WooCommerce products and content onto the pages of your site, and these can be any pages, not just WooCommerce pages.
To add my Tour products to the Tour pages I used the Products widget to add a two-column list of products, and as you can see in this next screenshot, I manually selected the two products that I wanted to display. When you have a lot of products defined in WooCommerce, you’ll quickly find how useful it is that to have a contextual search show you available product candidates as you type out the product name.
You can pretty much sell anything via WooCommerce, so this level of integration is very useful. I have in the past sold prints via WooCommerce, and eBooks, but I now sell my eBooks via FastSpring, as FastSpring looks after the international digital goods taxes, which have become a bit of a nightmare to stay legal with over the last few years, so I now pay a slightly higher transaction fee to have FastSpring just handle all of this for me, and it’s so much easier. There is currently no Elementor integration with FastSpring, so I have to rely on the FastSpring native WordPress plugin which I can say with complete confidence, is absolute crap. If I’d have known how crap their plugin is I’d have chosen a different digital goods reseller, so please don’t take this as a recommendation of FastSpring. They have a lot of work to do before I’ll ever recommend them to anyone.
Another great feature is the availability of Maintenance Mode and a Coming Soon mode right in Elementor, and it comes with some great templates for pages that are displayed when you activate these modes. I took one of the templates and changed the colors to the palette that I use for the site, and removed the email subscription field because I didn’t need it on this page, but otherwise, this screenshot shows you mostly what you get in one of the templates. I added an extra sentence saying that we expected the site to be back when the timer expires.
It took me a little bit of time to figure out the details to be able to actually select the maintenance page, but when you create your maintenance page template by selecting Add New under the Templates menu that is added to the WordPress admin console, the important thing is that you select Page, and not Single Page or anything else. It has to be a page to be able to use it as the Maintenance Page. Also, when you come to save your new Maintenance page, don’t publish it, rather select the up arrow on the green Publish button and select Save Template. The name isn’t so important, although I called my page Maintenance Mode, and I was then able to see and select the new template under the dropdown menu that you see in this screenshot, showing where you enable Maintenance Mode under the Elementor Tools menu.
I didn’t need to do any maintenance when I created this page, but if I had hit the save button the Maintenance Mode message would have been displayed instead of any of the regular pages of the website until I turned it back off again. I like that the templates include a timer so that people know approximately how long the site will be down for maintenance.
On a related note, Elementor also has some very nice templates to replace the 404 Page that is displayed to people that hit a page that doesn’t exist. In the past, these pages were just boring white screens, but many people now use the 404 Page as a way to be creative, and Elementor is here to help us with that. Here is my current 404 Page, on which I used one of my photos of the Snow Monkeys, with the mother looking up into the hills, and the baby looking back at the camera.
It’s important to still let the user know that this page is not what they were looking for while providing a means to search for what they were looking for or lead them to the menu to navigate away from that page. On the subject of Search, I use the Ajax Search Pro plugin to provide a rich set of highly customizable search results, but I’ve found it to be very sluggish, and I’ve not really been able to find any settings that help to speed it up without seriously reducing the number of posts displayed, so I’m a little cautious to recommend this plugin unless you are prepared to make people wait for search results, and that really isn’t a great idea.
Note: Although I like Ajax Search Pro, I decided to remove this plugin when cutting the overall costs associated with running this website.
With only limited time to tweak the website, there are still lots of areas of Elementor that I want to attempt to integrate. Here is a screenshot of the photography-related page templates. Granted, they are all so similar that I wonder if they needed so many variations, but they are very cool designs, and great to give you ideas if you are trying to put a page together.
I have actually found that I’ve used mostly templates that aren’t specifically for photography, and I’ve been very happy with how I’ve been able to pull together the design elements of my site, including my Portfolio pages, which you can see under the Portfolios link in the top navigation.
Other Integrations and Benefits
Elementor also includes an Integrations tab that helps to seamlessly work with some other common tools, like Google ReCaptcha and the Facebook SDK, as well as MailChimp if you use them. They don’t have a native integration with SendinBlue, the newsletter management service that I use, but I’m getting by with their native plugin so that’s fine. At the bottom of the Integrations tab, you can also add your Font Awesome Pro Kit ID if you use Font Awesome as I do. I haven’t even mentioned that I now use the contact form included in Elementor the multiple contact forms on the site. I also created a very detailed form for my tour guests which has multiple pages of information to gather, and it all works great. I also created the newsletter signup popup that you’ll probably see at some point with Elementor.
I don’t recall the exact count, but by choosing to work with Elementor on my website, I was able to remove around 15 other plugins. I said at the beginning of this post that I run almost a hundred plugins. I actually used to run around 105 plugins, but by working with Elementor, with the many features that it includes, I was able to get the number of plugins I use down to 92, and two of them are for Elementor and Elementor Pro, so that was a nice improvement under the hood too.
Meow Gallery and Lightbox
I’ve mentioned this before, but we can’t really wrap up a post about the core plugins behind the MBP Website without giving another mention to the guys that create the Meow Gallery and Meow Lightbox. Whenever you see a gallery either embedded in posts or in my portfolios, it is added using the Meow Gallery software, which is fully backward compatible with WordPress galleries. And whenever you click on an image the Lightbox that it opens in, showing EXIF data, etc. is the Meow Lightbox. Both are great plugins with top-class support.
I won’t go into detail on the rest of what I use for now, as I think we’ve probably covered enough for this post. If you have any specific questions about Elementor or any other aspects of the MBP website, leave a comment and I’ll answer as best I can.
In the spirit of full disclosure, you should know that Elementor sponsored this post, which helps with the upkeep of the website, so I’d like to thank them for their support and for the amazing work that they do with Elementor. As you know, I don’t accept sponsorship often, and always only when the product is something that I already know and love, and use regardless of any sponsorship agreements. I hope you found this useful and if you would like to try Elementor, please head over to their website here.
This post is unlocked for non-Patrons as it is a sponsored post or advertising Martin Bailey Photography products. If you found it useful and would like to unlock all other posts please click the button below. Thank you for your support!
Over the last few months, I’ve made a number of changes to my WordPress Portfolios and the plugins used to serve up images in posts. I’ve been asked about what I use a number of times, and because I reported on my use of the NextGen Gallery plugin two years ago in Episode 583, I figured it is also important to let you know that I am no longer using it. We’ll get into why I’ve moved on from NextGen later, as I don’t want to start the podcast with a somewhat negative section, and chronologically, all of this started on a positive note anyway, so let’s start with that.
My recent changes came about a few months ago when I looked for an alternative to including my shooting information on the blog and verbally in the Podcasts. I was requested to do this many years ago, and have continued to do so, but it wasn’t ideal, and so I had a search around for a WordPress plugin that would enable me to show this information in the Lightbox, which is the larger view of the images when you click them in posts. I quickly found what I still believe to be the best solution for this, which is the Meow Lightbox from Meow Apps.
You will have hopefully have noticed that when you click on images in posts now, you see a nice line of EXIF data, showing the shooting information for the image in the Lightbox. The Lightbox also intelligently places portrait aspect images over on the left side of the screen, and displays the shooting information and caption to the right, so that we can view portrait orientation images as large as possible. We’ll open the lightbox and click through a few images shortly so that you can see this in action.
There are a couple of things about the settings for the Meow Lightbox that I’d like to touch on. The first one may well be related to my theme, but I had to add .wp-block-image to the Selector field in the Advanced settings, as you can see in this screenshot, to make the Meow Lightbox actually display the images from my blog. Without that, the images are not linked to anything.
I also had to use a tool to run a regular expression search and replace on all posts on my blog up until I started using the Gutenberg editor, and added a class to all of my images called .mbp-photo. With that also in the Meow Lightbox Select field, all images since I started blogging in 2005 are now picked up and displayed correctly.
Finally, I added .no-show to the Anti Selector field, and this enables me to add that class to the Additional CSS Class field in the Advanced section for images in the WordPress Gutenberg editor, and then they will not be displayed in the Meow Lightbox. This is useful for example, for things like graphics for my tours which I sometimes embed in posts. These need to link to my tour pages, but without the Anti Selector, they will open in the Lightbox like all other images, even if I specifically link them to my tour pages.
With these few additional settings, the Meow Lightbox works exactly as I’d like it to, with the exception of one feature, and that is a slideshow button. I would really like to have a play button that cycles the images through a simple slideshow. Nothing fancy, just a fade between each image. I’ve contacted the developer twice about this and he is ignoring my email. He was pretty responsive over an issue I had with his other plugin that we’re going to look at next, but on the prospect of adding a slideshow, he’s completely unresponsive.
The other plugin that I have just started using, is the Meow Gallery. I actually bought this a few months ago almost straight after buying the Lightbox plugin, but I initially could not get it working. It turns out that there is a compatibility between this plugin and the Essential Grid plugin that I use to build some of the thumbnail grids that you’ll see on the site, such as the ones you can see under the Portfolios menu.
Despite all the effort the Meow Apps developer puts into explaining how busy he is, like he’s the only person in the world that’s busy, and also why you have to only contact him when you are really stuck, he was actually pretty good at helping me to find a solution for this when I contacted him. It seems that he lives just down the road from me here in Tokyo, so we had a nice conversation over email about that. The Essential Grid support team sat on the issue for 10 days before I finally got them to acknowledge the compatibility issue, and they are now attempting to put a wrapper around the option that causes it, but at the time of writing, if you simply install both of these plugins on a WordPress website, Meow Gallery is dead in the water. The developer is also ignoring my request to add a compatibility mode checkbox to the settings, so at this point, I’m having to manually edit the plugin code to make these two plugins play nicely together. Hopefully I’ll get some kind of resolution on this soon.
WordPress Gallery Considerations
Let me back up a few steps though, and explain something that led me to want to implement the Meow Gallery in the first place, and that is that the NextGEN Gallery from Imagely uses a proprietary gallery format, so if you stop using NextGEN, you basically lose all of your galleries. Because of this, I had held back a little with regards to putting galleries in posts, as I didn’t want to end up having to go back and edit hundreds of posts when I moved away from NextGEN.
The promise of the Meow Gallery was that it worked with the standard WordPress Galleries. Because of the compatibility issues I’m having, I actually am having to convert my WordPress Galleries to Meow Galleries to get this to work, but they are essentially the same thing. I can literally flick between them with a single click, which is a huge step forward.
Beautiful Meow Galleries
The other reason that I really wanted to get the Meow Gallery plugin working though, was because it has some of the most beautiful thumbnail layouts that I’ve seen. Here, for example, is a small gallery of images using the Tile layout. You can also click on these to see the shooting information etc. in the Meow Lightbox that I mentioned earlier.
Notice how the tiles are resized so that they all display in their native orientation, and form a perfect rectangle, rather than having a gap after the last image. This is a simple concept but there are not that many plugins that achieve this so well. It literally took just a few seconds to select these images and make a gallery. If the images need to be uploaded, you do that with the regular WordPress Media Library, rather than a proprietary interface, which again really helps to future proof the work you put into building a website or online portfolio.
Square Thumbnail Gallery
I’m not going to go through all of the gallery styles, but here is another small gallery of images using the Square thumbnails option. This is another favorite of mine, and as you can see, it’s not a problem to have multiple galleries on the same page with different styles.
To see some larger galleries, I’ve replaced all of my NextGEN Portfolio galleries with Meow Gallery using the Meow Lightbox to display the images, so you can view any or all of them from the Portfolios menu above or via the grid on the Portfolios page.
As I mentioned earlier, I’m also using Essential Grid to create and present some of my thumbnails, such as those you’ll find under the tours and portfolios menu above, and also on my main Portfolios page, as I just mentioned. Essential Grid is created by an incredibly talented team, who would be much better if their support was more responsive, although they are very professional and easy to work with once you get their attention. They also make Slider Revolution which is the plugin I’m using to make some pretty detailed sliders that you can see around the site and everything that you can currently see on the top page.
Getting back to Essential Grid though, although each grid has to be created in their plugin interface, the images are taken from either the Media Library or the featured images you have set on posts or pages so again, it future proofs your work. Even if you move to a different plugin for this purpose, you don’t lose the images that you already have in your posts or Media Library.
Goodbye NextGEN Gallery
OK, so that covers the three main elements that form what you now see on the site in terms of image display, gallery thumbnails, and thumbnail grids, etc. Let’s talk briefly before we finish about why I’ve moved away from the incredibly popular NextGEN Gallery from Imagely.
I had actually even from the word go always had problems with NextGEN Gallery. When I created my video to introduce you to NextGEN two years ago, I had actually already tried and failed to get NextGEN working a number of times, and even in that video, it was causing problems, which I proceeded to show you anyway, in my usual warts-and-all style. Well, although it got a little bit better, with regards to errors in the admin console, etc. I basically continued to have problems with the NextGEN gallery for the entire two years that I used it. There are also a number of fundamental flaws with NextGEN that I reached out to the team about, and was even told that some were fixed, but these things never worked on my system, despite multiple pleas for help.
EXIF Data Stripped
I’m not going to go into all of the details, but one thing was that NextGEN stripped the EXIF data from images that you upload, so whenever someone copied an image from my portfolio galleries, there was no EXIF data in the images to lead them back to me. Even the images that could be bought and used as stock photographs were missing the EXIF data, and that prevents clients from identifying who they bought the image from. This is a major flaw in the NextGEN gallery, and although claimed to be fixed, never worked for me, even after I uploaded images from scratch again, rebuilding entire galleries. Of course, I checked that the EXIF was in the originals, but it was stripped from my portfolio images.
The Last Straw
The last straw came a few weeks ago, when my WooCommerce payment gateways all stopped working. I lost half a nights sleep having stayed up until 3:30 am trying to fix it, and then lost the next morning, until I found that deactivating the NextGEN gallery and their Pro plugin brought my WooCommerce payment options back to life. I imagine the problem was caused by the relatively new Stripe payment gateway that had been added to NextGEN, even though I had not activated it. I eventually would deactivate every plugin on a test staging site except WooCommerce and NextGEN, and the problem still occurred. It may have also been related to a setting on my server, but there was not enough time to keep looking. My only option was to keep NextGEN deactivated. I emailed their support team and told them that they had one day to help, but they chose to throw the issue back into my court with a pointless question that I’d already answered.
At that point, I realized that I had to figure out what the problem with the Meow Gallery was, because that’s what I’d wanted to implement anyway, and that took an extra couple of days to figure out with the help of the Meow Apps developer.
In the meantime, I deleted all of my NextGEN galleries, and recreated them with WordPress Galleries, which don’t look great, but it was better than seeing a broken short code on each of my portfolio pages in the absence of the NextGEN plugins. Then a few days later when we fixed the compatibility issue between Meow Gallery and Essential Grid, I edited each of my Portfolios and flicked the switch to make the WordPress galleries display as Meow galleries, and my Portfolios started looking beautiful again.
I won’t miss the eCommerce features of NextGEN either, because it was really weak, and did not interface with the full payment system provided by WooCommerce, and I have now created a whole new sister site, Martin Bailey Art, to sell fine art prints and wall art from, so I’m covered on that front as well. I am actually really pleased that this happened because I needed a push to finally move away from NextGEN, but I am so happy that I have done so. I have learned now that it can be very limiting to use a plugin that creates a completely proprietary gallery, as NextGEN does, and I am going to try really hard moving forward to avoid getting into that situation again.
So, if you are looking for some plugins to create great-looking WordPress Galleries and include shooting information in your Lightbox, I can recommend the Meow Apps, and Essential Grid, and based on my own experience, I no longer recommend NextGEN Gallery. They are a good team most of the time, and good people, but I personally have had my fill of NextGEN related problems and felt it was time to move on. Whatever you decide, I hope you found this useful.
This week I’ve created a video to review and walk you through the NextGEN PRO gallery that I have recently implemented on my web site. As you’ll see, it isn’t perfect, but it’s a very feature rich gallery and lightbox solution. With e-commerce built right in, it will save a lot of time as we can configure pricing and the types of products available on a high level and just assign them to the entire gallery. It’s also possible to apply different settings to individual images, as we’ll see in the video.
The podcast audio for this week is a short introduction to let you know about the video, but I also have a message from a gentleman named Curtis Cunningham about his new “Wonderful World of White” Kickstarter project, which I’ve inserted into the audio too. So please do listen to that with the above audio player. You can see details on Curtis’ web site and on Kickstarter.
NextGEN Pro Gallery Video
Please do check out my video below though, as I get into NextGEN in all its glory, and as you’ll see, it’s although I’m happy with it, it’s not without its faults, which granted may be caused by my server, but everything else is running fine. You can check out the resulting galleries as I’m now using NextGEN to serve up my still photography portfolios here.
OK, so just a quick episode this week, because things have gone a bit pear-shaped with my Web site and I don’t have the time to do a full episode. I am in the middle of switching WordPress themes, and despite some initial testing, there are some gaping issues and I’m torn between going back to my old theme and staying with the new one.
So, here’s what happened. A few days ago I was in a position where I had to send someone a link to my portfolio, and I had to do something that I hate doing, which was make an excuse, because I have been having problems with a plugin that I was using to create my Web galleries. The problem may well be a problem with my site, and not the plugin itself, so it will remain nameless, but having spent way too much time trying to fix this issue, I decided to look around for a better solution.
Well, I found what I thought was a better solution, but this is what’s left me in a bit of a mess. If you ever visited my old Portfolios web site you’ll have probably seen a beautiful theme with full screen images and very nicely formatted galleries. This was a theme called Atlas, and I bought it hoping to use it on my main web site, only to find that it didn’t support blog posts. I was flabbergasted. A WordPress theme that did not work as a blog!
Well, that set bells ringing when I did a search for a nice looking new WordPress Theme that would give me some great ways to show off my images, support my WooCommerce shop, and actually work as a blog. The bells were because the theme that I found was made by the same person made Atlas. The theme is called Titan, and it really is incredible, or will be, if I can remove a few major issues that are still in place as I type and record this Podcast today.
With a few restrictions, Titan does work as a blog, so the Podcast episode posts are currently being served via this theme, but one of the issues is that the blog cannot exist on the top page. If you visit the blog soon, the pages that I currently have set up may still be in place, but you’ll see a few full screen images displaying on the top page, and you would have to access everything via the menu at the top of the screen.
Luckily, as a workaround, I found that you can embed links into the image captions, and use the title of the image as a text label, so if you visit the site while this is still in place, you’ll see something like the screenshot below. This isn’t ideal, but it does actually give me a relatively lightweight top page, and the call-out links are functional, so I have to think about how I’ll proceed here if we stay with this theme. Either way, note too that at least for the time being, there is a Blog/Podcast link in the menu, to take you to the Podcast posts as usual.
Conversely, build your Web sites with WordPress and want something to show off your images, this is a great way to do it, but honestly, this is one of those times when I wished I just used Squarespace, and all of the technical issues were taken care of for me. The only reason I don’t use Squarespace by the way, is because they didn’t have a smooth migration path from my hundreds of blog posts with Audio players embedded. There are just a few too many customizations that I have to do to enable the Podcast to work and these can’t be recreated. If I was only building a photography Web site, I’d be with Squarespace in a flash, or perhaps another service that I’ve been working with that we’ll also look at soon, but not today.
Anyway, problem one, is that I can’t put the blog posts on the top page. Well, I can, and I tested this far before switching themes, but the pagination doesn’t work. You know how you have that series of links below a set of posts, that take you to the next page of five posts, then the next page etc.? That always brings you back to the top page, so I decided to go with this full-screen front page for now.
The next problem I ran into, although I’ve fixed this now, is that all of the images embedded in blog posts were left aligned. Even one’s that had been right aligned, so that messed things up. I had to put some standard WordPress CSS back into my custom CCS field to put this back. How someone can design a theme that breaks something as fundamental as that escapes me, really.
The next issue, and this is now the main reason that I have ran out of time for this week’s Podcast, is that the theme as it stands has a conflict with the Fancybox for WordPress plugin. Fancybox is basically that cool way that images open up inside the browser window, and you can then navigate between all of the images in a blog post with your mouse or keyboard arrow keys. This is what I always ask you to do when you come to the blog to view images.
Well, probably because the new theme also uses FancyBox, it causes problems with the plugin. Not only does the plugin stop working, but it stops the theme from overlaying a dark transparent image over the page backgrounds, so as you see in this image (below) from my test site, and that results in the page background image being so bright that you can’t read the text.
Messed Up Test Site
If the Fancybox plugin worked otherwise, I’d turn off the page backgrounds for now, but it doesn’t work anyway. The result is, for the time being, when you click on an image on the blog, it will open in a separate page, which I absolutely hate to see. Hopefully before many of you listen to this episode, or read the blog post, I’ll already have this fixed, but it’s probably going to take a few more days as I wait for help from the theme developer, or more likely get frustrated as they fob me off with excuses that they can’t guarantee the operation of third party plugins, which always really annoys me, especially when they break standard functionality with their own coding.
Update: A few hours after I released this Podcast, I was able to find a new Fancybox style image viewer (Responsive Lightbox) that does not conflict with the Fancybox code in the new theme, so it’s all working again now.
Anyway, the final problem that I’m still trying to figure out, is how to stop the audio player on each Podcast blog post from auto-playing. Some people might actually like this feature, but the majority will probably find it annoying, especially those of you that visit to read, and don’t actually listen to me reading this out, so I really want to turn this off by default if at all possible.
What’s Good About Titan?
OK, so rant over. What’s good about this theme? Well, as I said, it really does have beautiful galleries. The developer of the Titan theme, as with Atlas before it, really knows how to get the most out of photographs. The images on the full screen galleries, which is basically what you see on the front page, are only 1440 pixels wide, and yet they still look great when expanded out to full screen. I don’t know any other developer that does this as well.
Also, if you go into the Portfolios menu, you can now see a number of different gallery styles used with my portfolios. There are 14 gallery styles available, and I’m only using a few variations, but some are automatic slideshows, and some are very nicely formatted thumbnail grids and masonry layouts.
This screenshot for example, shows the Iceland Portfolio, which I just used a square thumbnail grid for, but I find this really pleasing to look at, and when you resize the browser window, all of the thumbnails are resized and moved around accordingly.
Iceland Gallery Grid
Another gallery type that I like is the two column thumbnail gallery, which I currently have assigned to the Flowers Portfolio. Again, it’s really pleasing to look at, and all of these galleries are set with just a few clicks. Once you have your images loaded into a standard WordPress Gallery, all you have to do is select the type of gallery you want to use from the Page Template pull-down, and then select your gallery. To change gallery types, it’s just a case of changing the Page Template and saving the page. Ingenious and very effective.
So, it’s kind of a nice mess to be in, as I feel as though I’m making progress, but there is a take-away here. Despite me spending a full day testing this new theme on a test server, I was in too much of a rush to get this change done over the weekend, and so really didn’t do enough testing before making the switch. I knew there were a few issues, but didn’t find all of the big ones, and now I’m paying the price. I’m in one of those positions where I feel I’m close enough to not go back, but things are nowhere near acceptable yet.
Depending on how much help I can get from the developer, by the time many of you listen to this, the blog may actually be on a different theme again, or back to the old one. It’s hard to tell at the moment. if you do come along while things are still in a bit of a mess, believe me I feel your pain, and your patience is very much appreciated until I get this all sorted out.
Sorry that this wasn’t photography related today either, but this is all I can manage this week. Hopefully we’ll be in better shape next week.
I do have one bit of great photography news to finish with though, and that is that the Craft & Vision Digital Magazine PHOTOGRAPH No. 7 was released last week. This eMagazine just goes from strength to strength, so do check that out at https://mbp.ac/cvp7.