L O A D I N G
Using CSS to Fix WordPress Template PHP Problems: A Case Study

Using CSS to Fix WordPress Template PHP Problems: A Case Study

Using CSS to Fix WordPress Template PHP Problems

With anything in life, nothing can be perfect. The same goes for WordPress.org. When we are building websites using WordPress we often feel the glaring lack of customization options. Not to say WordPress is not highly customizable; it is. It is when we get into the aspects of a WordPress site that are deep, deep in the PHP of the theme or plugin where we can get into trouble.

The first rule of WordPress develop is, “Don’t touch the PHP”. Of course, many of us break these rules with tiny edits here and there. But spending hours sorting through the many files of complex PHP that creates our favorite themes is often out of the question. Yes, we can go into the theme editor but often that can be very time consuming. PHP is not an intuitive coding language like HTML & CSS. This is especially true is you are using a child theme and not all the PHP is readily available.

My rule when it comes to WordPress: If we can fix it with CSS, we should. If you put the CSS directly into the theme it is more stable than PHP. It is also a quicker way to get things done. Can you do more direct customization with PHP? Yeah, sometimes. But not always. I have yet to develop a WordPress site where little detail of template problems cannot be fixed with some clever CSS work. I wanted to share this case with you to prove my point and show you an example of creatively using CSS to solve a WordPress Template PHP problem.

While I was recently doing work for a client, we came across the problem of some buttons that said, “previous project” and “next project”. My client and I had used the portfolio on a visual composer to integrate their company’s part library. They were not quite ready for WooCommerce yet, so they did not have all the information needed to set up WooCommerce. That is why we chose to use the portfolio option. It was a clean way for us to display their many parts. However, the button saying “next project” and “previous project” was a problem. These are not projects; they are a part catalog.

I was digging through the PHP of the child theme for a while when I realized I would have to edit the original theme in order to change the phrase on the buttons. If you are a WordPress developer you know there are many reasons this would not work in the long run. The main issues being the next time my client updated the theme, all of my changes to that button would have been gone. This is when I moved into plan B. I knew I could edit the buttons with CSS to hide the type, but I wasn’t sure exactly how I would do that.

Here is how it played out.

The Case Study

Before I got into the website, here is what the buttons looked like. Real janky, huh? Sometimes WordPress is a finicky friend. As you can see, we have a whole world of problems here. First off, there is a ::before and ::after on both buttons with arrows pointing in all kinds of directions. These are being pulled from a setting within the theme that would be easily editable through theme settings, however the client wanted those arrows on other parts of the website so getting rid of them inside the theme settings was not an option. This means I would have to target not just this specific page, but all the buttons across the portfolio
Broken Buttons in WordPress Template

Step One: Target only the portfolio pages

One of the best features of CSS3 is being able to target elements nearly down to the line. WordPress breaks things up so well for us, usually we just have to find the proper class in which the elements we need to change. That is where targeting the specific portfolio page comes in. The image below is a screenshot of my inspector on the client’s page. You can see at the top of the page there is a number of classes I can use to target specific pages or sections. I grabbed the class, “portfolio-template-default” to target only the portfolio pages.
The inspector view in Google Chrome looking at my WordPress code

Step Two: Target the buttons

Now that I knew how to target just the portfolio page, I moved down to find the classes of the buttons I needed to edit. The buttons in the portfolio section were made up of two classes: tt_button and port_prev/prot_next. The tt_button class controls all of the similar buttons across the website. Classes port_prev/port_next control only the previous and next buttons on the portfolio page.

Let me remind you of my task here: the buttons cannot say “project”. So I need to style these buttons in a way that they are still directional but do not say project. To hide the copy, I simply made the font size 0. Now it was not taking up any pixel space I needed. I also had to hide that arrow that was pointing the wrong way. I targeted that using the ::after on the .tt_button only in the portfolio section. Here is the code:

.portfolio-template-default a.tt_button::after{
background-image:none;}

Now that the wild arrow is gone, I had target the phrase in the button as well as the general settings. Here is my CSS for editing the copy, color and other attributes of the button:

.portfolio-template-default .port-prev{
color: #fff;
background-color: #bc0029;
overflow: hidden;
font-size: 0;
text-align:center;
padding: 10px 0px}

.portfolio-template-default .port-next{
color: #fff;
background-color: #bc0029;
overflow: hidden;
font-size: 0;
text-align:center;}

.portfolio-template-default a.tt_button::after{
background-image:none;}

.portfolio-template-default .port-prev:hover{
background-color: #000;}

.portfolio-template-default .port-next:hover{
background-color: #000;}

Finally, I had a button with no words just the tiny arrow that CSS had as a ::before (or ::after if it was the next button). To make this look like a real button, I targeted the specific ::before and ::after element depending on the button. Here is the code for that:

.portfolio-navigation-links .port-prev:before {
font-size: 37px;}

.portfolio-navigation-links .port-next:after {
font-size: 37px;
float: none;}

Finale

After all of the coding, here is what the button looks like now:
Fixed WordPress Template Button

As you can see, there are a lot of things you can do with CSS to fix WordPress template problems. If this article convinced you you’d like to hire a professional to deal with your WordPress website, you can check out my services here or contact me! Thanks for reading. May your WordPress never update before it is backed up.

Leave a Reply

Your email address will not be published. Required fields are marked *