How to make your Wild Apricot design work with WordPress


For those of you that use Wild Apricot as your association software, you’ve got a great platform in place for running your association operations. Wild Apricot is very good for managing members and events, collecting donations, running financials, email workflow, and for communicating news about your association. But there is one thing that needs attention – the Wild Apricot design.

Because Wild Apricot is built as an all-in-one website and association management platform, most organizations purchase the monthly subscription and use all of the features that Wild Apricot has to offer, including the pre-built website designs. However, if your association is relying on the out of the box wild apricot designs available, then you are limited to your options. Although there are a number of generic skins you can chose from, some associations are looking for the ability to give their public website a look and feel that is more in line with their desires.

One thing that usually goes unnoticed is that Wild Apricot provides code snippets that can be placed inside other websites, transferring some of the features from Wild Apricot into CMS platforms like WordPress or Drupal. However, it’s not as simple as it appears. Dropping a piece of code into a page of another website only transfers the feature (events, memberships, etc.), leaving the rest of the website in need of design assistance. This is where WordPress or other mainstream content management systems can bring life to your website.

If you are using a Wild Apricot design, but want a slick new public facing design, here are a few steps to get you started.

  1. Build your website map, considering the options for events, membership and login functionality.
  2. Build your desired design into WordPress, either custom or using a theme.
  3. Import your navigation, site map and content into the WordPress backend.
  4. Plan for placing the Wild Apricot functionality into the website, based on your site map and visitor navigation (sidebars, footer, widgets).
  5. Grab the widget code in the Wild Apricot settings and place the respective code into the desired page HTML.
  6. Test the pages where the code transfers functionality. Expand the iframe height to avoid scroll bars.
  7. Launch the site, using WordPress and Wild Apricot. You may need to change the domain pointers within Wild Apricot depending on what you have as your home page.

There are a few gotchas that need attention, specifically in the domain section and the iFrame code, but if you are able to test it a few times, you should be able to make it work fairly easily. We recently maneuvered Wild Apricot and were able to skin the Illinois Search and Staffing Association with a new website, which uses Wild Apricot. We’re pretty excited about how this turned out. You can check it out here: Illinois Search & Staffing Association.

If your association is looking for a new website design and want to continue using Wild Apricot, give us a call at 630-855-6900 or shoot us an email to make this happen.