PSA: WPMU DEV will NOT support the Salutation Theme

PSA: WPMU DEV will NOT support the Salutation Theme

Update: To clarify for future generations, this post is in regard to Salutation Theme versions up to 1.5.  We’ll update again when/if this issue is resolved by the theme developers.

Update #2: As of Salutation 2.0 this theme is remarkably more compatible with custom post types and WPMU DEV plugins.  We’re stoked to see the developers respond for the betterment of all customers.  The article and instructions below are no longer relevant and we’re seeing folks have positive results with this theme.  Thanks.

Seriously.  I’ve been thinking about this post for over a month now and it’s clearly gone on long enough.  Consider this an official statement on our support policy in regards to the Salutation theme on ThemeForest and an open letter to its developers.

First off, never in the history of WPMU DEV have we had to make a public statement about our support of a 3rd party product.  Obviously, we can’t guarantee support with everything that’s ever been written but our entire staff works hard to make sure we play as nice as possible with products such as GravityForms, companies like WooThemes, and services such as WP Engine.  We do this because it’s what’s best for our customers and at the end of the day that’s who we’re here to serve.

What serves our customers best today is to publicly state that the current version of  the Salutation theme has serious issues and we will no longer support it.  As I’m writing this the stats for this theme are 3534 downloads with a 5 star rating.  It’s popular and it’s loved. So what’s the big deal and why are we making this move?  Well, read on and I’ll tell you exactly why  we won’t support it, what you’ll have to do if you’re stuck with it, and what the developers could do instead of blaming us.

My first interaction with this theme was working with Joe, a member of our support staff. We couldn’t figure out why the theme wasn’t working well with our Q&A plugin which has several compatibility checks to work with as many themes as possible.  Joe purchased the theme with his own money so we could take a look at the code. When I looked at the download file my heart sunk.  The theme code by itself – no PSDs – clocks in at 15MB.  For those of you counting that’s about 28 times the size of the default BuddyPress theme and nearly 400% larger than robust theme frameworks such as PageLines!  I’m surprised folks are able to upload this thing to their site.  I’m sure more than a few have tried to upload it via the WordPress admin and hit their PHP memory limit.

Ok, fair enough, it’s a beast.  But code is poetry. Maybe what we have here is the “Lord of the Rings” of the theme world. Oh if only… the old phrase about beauty and skin deep comes to mind.

Instead, what we found is a theme that lacks in structure, conventional file naming practice, and strays completely from default WordPress themeing practices.  This causes a ton of issues – especially when using custom post types.  That’s bad news as custom post types are kind of a big deal and not likely to be going anywhere.  Most of our popular plugins use post types including: Events+, Q&A, Wiki, Directory, and our upcoming appointments+ plugin.

A theme template for a custom post type should follow the format single-POST_TYPE.php. Check the codex if that’s not clear.  That’s not good enough for Salutation apparently.  It has its own naming structure.  Our plugins provide “theme template” files within the plugin which are used for displaying the post-types. When the default display doesn’t work perfectly with a theme, most of the time you can copy the files from the plugin to your theme and then edit to get the exact thing you’re looking for.

Not so with Salutation. And when we call the page.php template with a “the_content” filter to insert our content, nobody can see it because part of their CSS puts a visibility hidden on most of the page.  I’m sure that has some cute effect, but it breaks a pretty simple filter.  It also completely fails to load the footer.

If you must use the Salutations theme with a custom post type plugin you’re in for a lot of painful work through trial and error.  And it appears that the theme developers don’t care too much.  After all, their theme works fine in a vacuum and to the average user it can appear that because things break when a plugin is activated, that plugin is to blame.

I’m going to outline the (rather ridiculous) steps you’d need to take to get this theme to start working correctly with our Q&A plugin here.  The process should be extendable to other custom post type plugins, but your mileage may vary.

To the Salutation developers: The codex and standards are there for a reason.  You’re hurting your customers and the larger WordPress community when you ignore it.

BTW, the following code solution was developed by one of our hard-working members, tom.eagles. I’ve actually had the privilege to speak to him personally and he’s a guy of real integrity. If you’re reading this and want someone to assist you, you should totally beg for the privilege of paying him to fix it up. Anyway, on to the guide…

The way to gain control over these features is by integrating it into the theme’s native structure. For example, for each file you add to the theme folder which has the get_header( 'question' ); and get_footer( 'question' ); code:

1. Create a new file named “template-[your-plugin-file-name].php” and copy the content of the plugin file into the new template file.

So if you had a plugin file called “single-question.php” your template file would be “template-single-question.php

2. Delete the references to get_header( 'question' ); and get_footer( 'question' ); in the new template file (won’t be needing them for this theme).

3. Open the plugin file you copied the code from, for example “single-question.php” and delete all the content. Add the following code to the file:

create_page_layout('single-question', 'qa-layout');  // context = single-question

That is the only code that should be on the page. This tells the theme to load the “template-single-question.php” file and also to look for a custom layout with the key “qa-layout“. Now you can to to the Layout Manager for the theme (Appearance > Layouts) and make a new layout with the key “qa-layout” and it will be used for this page. The layout key is the second filed after the layout name when adding/editing a layout.

4. Repeat this process for the rest of the plugin files that include the same header/footer references. You can optionally assign the same layout key to each file, or give them different keys if you want to have the ability to set different layouts for different areas of the plugin.

This is what I did:

template-archive-question.php
template-ask-question.php
template-edit-answer.php
template-edit-question.php
template-single-question.php
template-user-question.php

These files were created in the Salutation theme folder.

I copied over the code from the original files with same name minus the “template-” part. The content in the original files ( that where already since before copied over to the Salutation Theme folder) were then erased and this line was added in each and every one of them, where the name of the template of course were changed to fit the file names like ‘single-question’, ‘ask-question’ and so forth,

<?php create_page_layout('archive-question', 'qa-layout'); // context = archive-question ?>

I then created a new layout that I am calling Q&A with the key being your suggestion: ‘qa-layout’.

I am using same layout for all files. I fixed only in that layout a minimal header, default footer and a container with Default content in it.

Here comes the CSS changes that are done ( all in the plugins general.css that you find inside the plugin directory:

Added following lines to the css:

width: 620px!important;

to

#qa-page-wrapper {
  float: left;
  overflow: hidden;
  padding-bottom: 2em;
        background-color:white;         width: 620px!important;         }
width:470px!important;

to

.question-summary {
  padding: 0 5px 0 0;
  float: right;
        width:470px!important;
}
width: 600px!important;

to

#question-form textarea,
#answer-form textarea,
.cleditorMain {
  margin: 20px 0;
        width: 600px!important;
}

This changes fix the whole plugin to keep itself nicely to max 620px and the titles of the questions to show up properly.

Following changes are done for the title and tags input areas in the questions editor and the editor itself:

width: 600px!important;

to

#question-form textarea,
#answer-form textarea,
.cleditorMain {
  margin: 20px 0;
        width: 600px!important;
}
width:380px!important;
to
#question-title,
#question-tags {
  border: 1px solid #999;
  background-color: #fff;
        width:380px!important;
}

And finally to make the plugin look nicely in your members area where you can see the questions you have posted and or answered.

background-color:white;

to

#qa-user-answers {
  margin-top: 0px;
        padding-top:10px;
        background-color:white; }
margin-top: 20px;

is changed to

margin-top: 0px;

and

padding-top:10px;

is added.

And last part added is

background-color:white;

to

.question {
  border-bottom: 1px dotted #999999;
  overflow: hidden;
  padding: 10px 0;
        background-color: white;
}

And a fix for the user information box that hangs around with ones user name and avatar on the right side next to the questions one has posted or answered:

padding-right:5px;

add to

.qa-user-details {
  float: left;
  line-height: 17px;
        padding-right:5px;
}

Whew, if you’re still reading this congratulate yourself and hopefully you’ve got a fully working display.