Foundation Zurb and the WordPress Comment Summit Button

For the last couple of weeks, I have been working on a theme using WordPress, Genesis and Foundation Zurb. Foundation is a front-end framework for rapid prototyping. Meaning? It is a large array of tools that make most of look that much cooler and way faster to code. However, mixing these 3 awesome tools into one single project didn’t come without its headaches. One of the major problems I have encountered so far is to be able to match preexisting CSS styles in Foundation with WordPress. I could go about it in in two different ways. First, by using WordPress filters which will get cumbersome really quickly, as you would need to write functions to modify class names for each and every HTML element I target in my project. However, if you decide to go this route despite to be time consuming, I would need to also be aware that for some HTML elements there are no filters available. Meaning? you won’t be able to edit those elements, directly as of WordPress core developers didn’t see the need for users to be able to customize those elements to that extend. Take for example the comment submit button:

<input name="submit" type="submit" id="submit" class="submit" value="Post Comment">

At the time of this writing, there is no available filter to modify the class attribute for the comment submit button. There are ways around it, though. For example, adding a custom submit button and hiding the original WordPress button using CSS. However, this enters in the realm of hacking WordPress more than anything else, so I won’t be covering it in this post. While doing research on this topic, I found a ticket for WordPress core developers working on the comment button issue. This ticket was finally closed 3 months ago and it only took them 3 years, to come to a solution YAY!. However, the concept behind the issue was somehow lost during the entire process. The WordPress core developers added a class named “submit” to the button and no way for users to customize the class name; so the problem still remains.

OOCSS and the Comment Submit Button

Styling the comment button using its class name as opposed to its ID allows front-end developers to separate content from its container which is one of basic principles of OOCSS. This is kind of the way front-end developers are going right now. However, this is an Issue that WordPress don’t seem too concerned about. Take for example that submit button inside the comment section. According with WordPress core developers if we choose to style that specific button, well, we will need to use its ID:

#submit{
  display:inline-block;
  zoom:1;
  vertical-align:bottom;
  text-align:center;
  margin:10px 5px;
  border-radius:3px;
  text-decoration:none;
  font-weight:900;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-shadow:0 1px 1px rgba(0,0,0,0.5);
  box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
  color:#FFF;
  border:1px solid #0082BE;
  background:#00A4EF;
  background-image:linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-o-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-moz-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-webkit-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-ms-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  font-size:13px;
  padding:5px 20px; 
}

But, what happens if we need another identical looking button somewhere else in the page? Well, according to WordPress you just need to target that button by its ID, as well:

#button-footer {
  display:inline-block;
  zoom:1;
  vertical-align:bottom;
  text-align:center;
  margin:10px 5px;
  border-radius:3px;
  text-decoration:none;
  font-weight:900;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-shadow:0 1px 1px rgba(0,0,0,0.5);
  box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
  color:#FFF;
  border:1px solid #0082BE;
  background:#00A4EF;
  background-image:linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-o-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-moz-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-webkit-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-ms-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  font-size:13px;
  padding:5px 20px;
}

Here, we have redundant code that will contribute to having a final “bloated” CSS file. How could fix this? The first step would be to replace the ID selectors for class names, which will allow us to create reusable code throughout our project. Secondly, separating structure, skin and content.

Structure

.custom-button{
  display:inline-block;
  zoom:1;
  vertical-align:bottom;
  text-align:center;
  margin:10px 5px;
  border-radius:3px;
  text-decoration:none;
  font-weight:900;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-shadow:0 1px 1px rgba(0,0,0,0.5);
  box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.3),inset 0 1px 0 rgba(250,250,250,0.4);
}

Skin

.custom-button-blue {
  color:#FFF;
  border:1px solid #0082BE;
  background:#00A4EF;
  background-image:linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-o-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-moz-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-webkit-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
  background-image:-ms-linear-gradient(bottom, rgb(0,163,239) 1%, rgb(0,177,241) 51%);
}

Content

.custom-button-small {
  font-size:13px;
  padding:5px 20px;
}

and this is how we will apply these class selectors if we would have had access to customize the class name for the comment submit button in our WordPress project:

<input name="submit" type="submit" id="submit" class="button button-blue button-small" value="Post Comment">

Now, Foundation comes with several classes that deal with buttons. The most basic of these selectors is the “button” class. All you need to do is match the style selector to the CSS class of the button. However, like we have already discussed, there is no way to accomplished this using WordPress’ existing filters. WordPress developers chose to call the class name for the submit button, “submit.” If we want to match the selector class “.button” from Foundation with WordPress’ “submit” button, we will need the help from SASS. Yes, SASS is awesome and if you are not familiar with SASS I would suggest to read about it and incorporate it in your future projects. For our present problem, it is actually very simple since Foundation comes prepackaged with SASS.

The Solution for the Comment Summit Button

SASS @extend directive works amazingly well in this case. Let’s say for example, we want to style our “submit” button with the default look and feel from Foundation, then all we need to to is “extend” the button class in our SCSS file:

#submit{
  @extend .button;
}

After the file is compiled, the final CSS file should look something like this.

#submit,.button{
   ...
}

SASS’ @extend directive will automatically apply that ID “#submit” anywhere the class “.button” is. Meaning? “#submit” and “.button” are now one and the same, as “#submit” is an extension of the button class. If you choose to use the custom button we created previously. We need to extend three different classes in this case.

#submit{
  @extend .custom-button;
  @extend .custom-button-blue;
  @extend .custom-button-small;
}

If you want to apply the custom style we created previously to other buttons such as the “#button-footer:”

#button-footer{
  @extend .custom-button;
  @extend .custom-button-blue;
  @extend .custom-button-small;
}

or even better:

#submit, #button-footer{
  @extend .custom-button;
  @extend .custom-button-blue;
  @extend .custom-button-small;
}

What if the footer-button needs a red button instead of a blue one, or an larger size? In that case, we will need to create the style rules for just the attributes that we are looking to change.

.custom-button-medium{
  font-size:16px;
  padding:10px 30px;
}

.custom-button-red{
  color:#FFF;
  border:1px solid #0082BE;
  background:#EF001D;
  background-image:linear-gradient(bottom, rgb(211, 24, 59) 1%, rgb(229, 3, 37) 51%);
  background-image:-o-linear-gradient(bottom, rgb(211, 24, 59) 1%, rgb(229, 3, 37) 51%);
  background-image:-moz-linear-gradient(bottom, rgb(211, 24, 59) 1%, rgb(229, 3, 37) 51%);
  background-image:-webkit-linear-gradient(bottom, rgb(211, 24, 59) 1%, rgb(229, 3, 37) 51%);
  background-image:-ms-linear-gradient(bottom, rgb(211, 24, 59) 1%, rgb(229, 3, 37) 51%);
}

#button-footer{
  @extend .custom-button;
  @extend .custom-button-red;
  @extend .custom-button-medium;
}