CategoryCE Haynes Blog

WordPress Basics | CSS & Code Tips

WordPress Code Tips

Just a few CSS & Code hacks to improve your WordPress website.

In my time building and developing WordPress websites, I have found myself utilizing some tips / tricks of the trade. Tips that will help you improve the reliability, speed, or even the design quality of your website. 

Show / Hide CSS Classes for Mobile / Desktop

Problem : I set up some images within a WordPress site utilizing the text-reflow. The images and texts looked great on desktop and even on my iPhone 7, but when I tested for older mobile phones, where the screen size dropped closer to 300 px the text-reflow was giving me some awkward results.

Solution : I created to css div classes, one to hide when displayed on mobile, and one to display only on mobile. 

.mobileHide { display: inline; }

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}

.mobileShow {display: none;}

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileShow {display: inline;}

Finally on the post/page for WordPress I inserted two images, one set-up for mobile only devices and one for desktop or tablet devices. 


WordPress Basics | Security

Hockey Goalie

Have you ever wondered how to set up security for your WordPress website? 

If you have you are ahead of most people, who never think of security.

In this article, I am going to lay out the steps I use as a professional web designer to create a secure WordPress site. It is not a matter of “if” your site is attacked, but when. The good news, there are some simple steps you can take to improve security on your WordPress website.

Step 1 : Choose a solid username and password when you install WordPress. 
Don’t use “admin” your first name, your email or your business name.
For a password, do not use “password” “abc123” or any part of your name, address or phone number. 

Step 2 : Install Wordfence or Sucuri plug-ins.
I prefer Wordfence over Sucuri, but I have used both and would recommend both plug-ins in their free or premium versions.
These plug-ins are the equivalent of a monitoring system, they watch for suspicious activity and then they take action. Either to lock-down or warn you of potential danger. One of the primary settings I am looking for in a security plug-in is the ability to limit the number of failed log-in attempts in a set amount of time. I generally set this to be five failed attempts in less than five minutes.


Wordfence has over 2 million active installations, and maintain a 5-star rating.
They are active in the upkeep and responding to customer questions.
Wordfence is free, but it does offer a premium service for less than $9 a month.



Sucuri LogoSucuri has over 300,000 active installations and a 4.5-star rating.
Very pro-active in support and keeping the plug-in updated.
Sucuri offers a free plug-in as well as a premium service that starts out around $17.00 per month.


Why do I like Wordfence over Sucuri? 
Simple, at the Free set-up, I can manually block IP addresses.
So if I get hit by some spam mail through one of my forms, I can block the emailer’s IP address.

Step 3 : Create a new User, with no or limited privileges.
Creating a new User profile is a very quick and easy process. Find “Users” in your WordPress sidebar and add a new user. I usually give this user the same name as the business for my site the username is “CE Haynes”. The user role, set to Contributor or something low-level. And now every time you create a post, or page or even upload an image in WordPress set the author to your new username. This prevents the basic hacker from seeing your admin username. 

Step 4 : Add a secondary password or pin to your WordPress log-in.
I accomplish this with a very simple plug-in Stealth Login Page. This plug-in allows you to create a secondary password or pin for your WordPress log-in page. To me, it’s like adding a deadbolt to your front door. 

Step 5 : Change the address of your WordPress log-in page.
Everyone knows that the standard log-in page for most WordPress sites is With this handy plug-in WPS Hide Login, you can change that to any address you want. Again, a free plug-in that is very simple to install and set-up. Once installed and activated you can change your log-in address in the Settings > General page of your WordPress admin panel. 

One note, last year while working with a customer we noticed a vulnerability with WPS Hide Login. We kept getting seeing failed login attempts on our custom login pages. Even after we changed the page address multiple times. With a little research, I found a secondary plug-in that helped conceal the custom login pages. So I would recommend installing Disable XML-RPC as well.

BONUS : Check your site, at least once a week for updates. 
This is the easiest of all security advice I can give. Most updates are cosmetic, maybe they offer some improved functionality. But, when they are about security issues, it’s because someone has already found the vulnerability and you need to remove that chink in the armor. 

If you would like some help setting up a new WordPress website, or even a review of your current site, let me know. You can reach me via the contact page.

© 2018 CE Haynes LLC

Theme by Anders NorénUp ↑