Website Hosting & Engineering With A Passion For Quality

Bootstrap 4 Carousel With Fade Effect

Here’s a Bootstrap 4 Carousel with fade transition instead of a slide transition. I find carousels or sliders annoying due to the sudden and hurried transitions from slide/item to slide/item. Example shows the code for three items or slides. Excuse my echo() functions as this example is used in a WordPress theme where the Carousel renders on the front page or home page only. Edit to your specifications.

I have also included the additional CSS required to produce the fade transition effect. Also, my example includes Bootstrap captions. I do not care for captions on-top of carousel images, however, it’s demanded. So, in order to allow the text to be readable or not saturated by the background , I applied a background-color #000 to the container ID and opacity: 1; to .carousel img

It’s assumed bootstrap.css and bootstrap.jsis found in your assets directory. If not, add it of course and if you are using WordPress, add the required Bootstrap dependencies described above into your WordPress theme. How to do that is another topic. I’ll try to write about it.

Below is the HTML mixed with theme specific PHP:

        <!-- Carousel -->
        <div id="carouselBeadManRedding" class="carousel carousel-fade">
            <ol class="carousel-indicators">
                <li class="active"></li>
            <div class="carousel-inner">
                <div class="carousel-item active">
                &lt;img class=&quot;d-block w-100&quot; src=&quot;" alt=""&gt;
                    <div class="carousel-caption d-md-block">
                    <p class="lead"></p>
                <div class="carousel-item">
                &lt;img class=&quot;d-block w-100&quot; src=&quot;" alt=""&gt;
                    <div class="carousel-caption d-md-block">
                    <p class="lead"></p>
                <div class="carousel-item">
                &lt;img class=&quot;d-block w-100&quot; src=&quot;" alt=""&gt;
                    <div class="carousel-caption d-md-block">
                    <p class="lead"></p>

Below is the custom CSS

/* Carousel
----------------------------------- */
#carouselBeadManRedding {
    background-color: #000;
.carousel.carousel-fade .carousel-item {
    display: block;
    opacity: 0;
    transition: opacity ease-out 1.7s;
    left: 0;
    top: 0;
    position: absolute;
.carousel.carousel-fade {
    opacity: 1 !important;
.carousel.carousel-fade .carousel-item:first-child {
    top: auto;
    position: relative;
    transition: opacity ease-out 1.7s;
.carousel.carousel-fade .carousel-item:second-child {
    top: auto;
    position: relative;
    transition: opacity ease-out 1.7s;
.carousel-item .img-fluid {
    margin: 0 auto;
.carousel img {
    opacity: 0.5;
    filter: alpha(opacity=50);

I found this post on codeply to be very useful in helping me resolve some of the trouble I was having with transition CSS. Here’s a link Codeply Bootstrap 4 Carousel Fade Transition.

WordPress: Hacked

With over 25% of total websites online today being driven by WordPress, it’s no wonder this popular blogging platform that became a content management system and now an application with its own API has been the focus of “Hacking”. This article describes how to avoid a WordPress Hacked scenario.

What is a hacked WordPress site? Here are some examples:

Defaced/ Hackers replace your websites content with their own. In most instances, all your website content is erased and/or replaced with the hackers malicious content or web page. The image below is a screenshot of a website that is obviously rendered unrecognizable and impossible to navigate because the hackers code is “all wrong”.

hacked site example

Example of a site hacked and defaced. Photo found at

Malicious Redirect/ Essentially this method redirects traffic from the hacked website to the hackers malicious website. A good way to do this without being detected immediately is to redirect traffic to a specific page. In my early days with WordPress, my fly fishing website bethefly was infected with a phishing page (almost a pun) where the hackers created a page asking for financial information posing as a certain German Bank. The page wasn’t directly accessible through site navigation means. The hackers simply pointed a URL to my sites IP address and the page in question. I was made aware of this issue when German authorities contacted me.

SEO Spam/ This method is accomplished most commonly by a hacker inserting a web-page in your website directory. If you have a site that is performing well, a hacker may infiltrate your hosting environment and create a page used to benefit from your hard earned search prominence. SEO spam can go undetected until a site audit is performed.

Malware/ This is a big issue online today for websites running WordPress. The installation of plugins found in the WordPress repository exposes a WordPress site to malicious software that can install malware on your site and visitors computers without your or any visitors knowledge.  This is not to say all plugins are “bad”. No way. You can see ratings and updates to the plugin of interest and easily, confidently make a sound judgment call on whether to install “any” plugin. Where most end up in trouble is when the plugin sits on your website, going without updates, check-ups on credibility, maybe it has not been tested with the current version of WordPress. Sadly, overtime hackers figure out how to exploit a given plugin or WordPress core itself, and then it’s game over.

Ransomware/ This is an insidious attack where the hackers literally hold your website hostage in exchange for payment. Often, the website files are encrypted. In order to restore your site, payment is required in order to obtain a decryption tool. If this happens to your site, find an expert at helping you restore your site and pay them.

Ransom Example

A ransom page asking for Bitcoin as payment in order to access decryption software.

The list is much longer than I care to write about in this post of how your WordPress website can be exploited, how visitors to your site can be exploited.

How To Protect Yourself From a WordPress Hacked Scenario

Keep Backups! Lots Of Them!

The key here is to research every plugin you put on your site. Pay attention to the plugin ratings associated with its presence in the WordPress plugin repository. Keep those plugins up-to-date. Keep WordPress up-to-date. Keep a number of recent back-ups handy. Back-ups can be kept on your server, but a copy of a number of back-ups should be kept in an external location, like DropBox, Google Drive or your local storage. I keep a number of backups handy that date back 6 months. I run automatic backups with UpDraft about once a week or whenever I update my website or your website. Always keep an external copy as described so in the event your sites root directory gets hit, you have a reliable, clean back-up that literally saves you thousands of $$$.

Use A Security Plugin

I use WordFence on all the websites I create. I will also move the config.php file out of root in addition to the wp-content folder. How to do that in addition to a few other options I’ll describe below will protect your self-hosted WordPress site and minimize the chance you’ll get hacked.

One of the first tasks I accomplish in hardening a WordPress installation id hiding the version as I describe below:

Hide WordPress Version

Add the code below to your config.php file found in your WordPress file directory:

Remove_action('wp_head', 'wp_generator');

Never Use Admin User Name

Always delete this initial user. You can do this by simply creating a new user assigning an Administrator role to the new user (i.e. create a new username, password). Next, log-in as the new user and delete the Admin user from within the Dashboard -> Users.

Limit Login Attempts

WordFence is a great security plugin that offers this feature. Need help configuring this plugin? Contact me.

Block Access To config.php

I prefer, as most do, to run WordPress on a server running Apache. Most WordPress installations running on Apache will have a file named .htaccess in the WordPress directory. Using your ftp client, find this file and make a copy of it! Next, download and edit .htaccess by adding this code at the bottom of the existing code:

&lt;FilesMatch ^wp-config.php$&gt;deny from all&lt;/FilesMatch&gt;


.htacess - WordPress Hacked

Here’s an example of what you should see in your .htaccess file with the code that blocks access to config.php at the placed at the end/last line


Save .htaccess and upload. Test your site. If you get a 500 error or blank-white screen, rename the file you just uploaded as .htaccess-nfg and restore the copied version to .htaccess (You should be able to accomplish this within the remote or live view of your ftp client. If in doubt, contact me here or use my Zendesk option below-right labeled “Help”. I typically respond within minutes if I’m not sleeping.

An alternative method is to simply move the config.php file out of the WordPress directory. But this only works if you have your WordPress install in a sub-directory (I install WordPress in its own sub-directory 100% of the time). Simply move config.php into your hosting environment root directory, or up one folder from your existing WordPress directory. Don’t worry… WordPress knows to check out the parent directory if it can’t find config.php in its own directory.

Move wp-content Up One Directory

Again, this is a great option for WordPress installs residing in a sub-folder/sub-directory. This option isn’t available for versions of WordPress 2.6 or < . As of today, the current version of WordPress is 4.8.3. How to check your version of WordPress? Scroll down and look bottom right of your dashboard screen.

Anyway, if you do move your wp-content file into a parent directory you will need to add the following to your config.php file just before the end of the file but before where it says 

/* That's all, stop editing! Happy blogging. */
*Tells WP where to look for wp-content

Sometimes, plugins will not work dealing with this non-standard directory structure. As a precaution, add the following below the code you just entered:

* Tells WP where to find plugins
$_SERVER['DOCUMENT_ROOT']. '/your-wp-folder-name/wp-content/plugins');
define( 'WP_PLUGIN_URL',

(Make sure to update code with your URL and WordPress folder name where indicated)

Add Salt To Your WordPress config.php

Yep, add salt. Go here:

Copy the code. All of it. (you know highlight and press CMD+C or Ctrl+C if you’re on PC).

Go to your config.php file and look for a section called “Authentication Unique Keys and Salts”.

Highlight and replace (CMD+V or CtrL+V on PC) or delete the existing salts and replace with the Salts you copied a second ago. The section I’m referring to looks like this: (the code in question is every line that begins with the “define” statement.


WordPress Salts - WordPress Hacked

An example of the Salts found in config.php

Get An SSL Certificate

Not only is this a great way to show your site is trusted, it’s becoming a mandatory security practice. See this article. Get one and avoid having your site labeled as “insecure” by Chrome and no doubt browsers to come. You can get SSL certificates through your hosting provider. Need hosting? I offer it through GoDaddy here. Includes free SSL.
Once you have an SSL activated, enter the following code in your config.php file:

define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

This will force visitors and administrators to log-in to your site via a Secure-Socket-Layer encrypted page. That’s secure! Word to the wise: Do not set up your SSL as a self-signed certificate. Your hosting provider will help you with this.

Why Use WordPress If It Get’s Hacked?

With the web comprised of an ever-growing number of self-hosted versions of WordPress, the option to target the platform is obvious. But, consider this: Should you build a website on another platform? Does that mean your site won’t get hacked? No. Any site can be hacked. If your website is popular, it’s a matter of time before it’s hit with an attack. Understand that WordPress gets a bad wrap because it is popular. It is a proven and effective way to deliver web content. When we consider the 1/4 and growing share of website volume worldwide running WordPress, of course, there’s going to be WordPress sites being hacked. WordPress isn’t responsible for “Hacking” as much as hackers will target websites.

So, I guess one could argue that if they choose to use a CMS like Craft, or Joomla, Drupal, Jeckly and a host of others they will fly under the radar of the hackers and malicious bots that crawl the web. That’s like saying “There’s lightning and I went outside and didn’t get struck” okay. But if a million of you go outside, and you’re all holding lightning rods, and an exceptionally large percentage of you happen to be wearing red jackets… is it fair to say that most people struck by lightning were wearing red jackets, so don’t wear red jackets? I don’t doubt there are hackers that target WordPress. But if it isn’t WordPress, it will be some other dominant content management/delivery system that becomes a target.

In the “wild west” of the web, I would choose a platform that is widely supported. If one chooses to be different, I understand but be prepared to die by your own sword.

Should my site get hacked, I will need the help of others in the open source community to bail me out. This is one of the main reasons why I choose WordPress as my tool of choice when building dynamic websites. WordPress has an immense support culture providing answers and solutions. Should I have to contend with a hacked WordPress site, I can consult with many techs who have already experienced my dilemma and already have a solution.

Another reason why I choose WordPress is the community of developers contributing to its core are creating a better, more secure version of WordPress monthly, yearly. I know of no other framework where the knowledge of how to avoid an attack, a hacked site is spelled out so clearly: Keep Your Site Updated & Current.

Software that is up-to-date is unlikely to be exploited. WordPress is aggressive about updates thanks to the passionate community supporting the platform. All of the hacked websites that have come across my desk where running old versions of plugins and/or WordPress. There’s a reason why the software is updated and it isn’t always for feature reasons!

If I was running another framework and I was compromised, I’d be more worried for sure. In my experience with hacked WordPress sites, I can say that 100% of the time, I was able to recover the site and clean it of the malicious content. If not, we use a backup to rebuild and restore the site and database.

I’m always interested in your thoughts and experiences. Let me know what happens! Okay?


Self Hosted WordPress vs Hosted WordPress

Which kind of WordPress do you need? There’s two kinds as you have discovered and they are very different. One is called Hosted WordPress or “” and the second is called Self Hosted WordPress or “”.

Here’s the difference:

This version starts out as free except for the cost of a custom domain (i.e. you can upgrade this version as needed. This approach provides an economical web presence where you do have enough control to present a feature-rich blog / website to you visitors for 0$ out of the box.

Good For Hobbies, Students, Blogs, Sharing Content On Social Media

This option is a good one for you if you plan to promote your site via social media or you can easily target your market. Example: Great for hobbyists where the site isn’t so much a source of revenue and customers but more of a resource for your friends. Good for students producing a common presence for article/tech reference. does offer upgrades that are billed monthly or annually. Options include live chat support, Ad-free, advanced custom design and e-commerce. Fees can add up to over $25.00 per month for a managed WordPress experience offering live how-to courses. A really good option for a sort term, do-it-yourself venture. hosted sites restrict what plugins are available and it’s almost impossible to edit a theme so you can truly customize and brand your visitor experience. Integrating your site with Instagram and other social venues can be a bit buggy because won’t allow you/a developer to integrate an API.

Very Secure

The upside of is it’s very secure and really does give you the ability to create an elegant presentation of your service, hobby, ideas and new fledgling business. They are a solid option if you are considering Shopify. I’d recommend over Shopify because you can easily migrate to a self-hosted version when expansion demands it. Shopify can be tough and expensive. Your site is easy to maintain and set up. I think the hosted version is ideal for those who need to create a knowledge base where students can access information and search engine optimization isn’t a #1 priority.

It hasn’t been proven, but from an SEO perspective it is widely believed Google will favor a self hosted version of WordPress over a “free” site at It may be very difficult to achieve a respectable trust value with a “free” site .vs a WordPress website hosted at Godaddy or here at 

SEO Options offers SEO tools for it’s paid Business version in addition to third-party plugins, custom plugins, and themes. Hosted through Pressable, I believe this is a solid option for some, but expensive and maybe not in your budget. The business version is an awesome approach if you need WordPress support and are willing to pay the 25.00 per month for hosting. And that’s where it starts! Need e-commerce? Expect to pay more depending on product volume and delivery.

Full Service, Hosting For $25.00 A Month

If server management, full-service support, product delivery and you are never going to manage your website in-house is your option, then I’d consider going with a managed option.

Are you a do-it-yourself kinda person? Maybe you need to dominate the SEO vertical in your niche, but your budget won’t allow for high-end hosting. You want to control the types of plugins uploaded to your WordPress driven site in addition to on-site SEO content but are okay starting out in a shared hosting environment that will cost less than $80.00 a year. Maybe you don’t mind staying on top of your own website updates. Or maybe you will handle moving your WordPress driven site to another hosting environment once traffic, sales, and profits allow you to make that move.

100% Control For Free Plus Hosting & Domain

A self-hosted version of WordPress is hands down the way to go for the webmaster who demands control over budget, flexibility and can either hire out web development to a contractor on an as-needed basis or has developers and WordPress implementors working in-house. Or, you do it all because you are a WordPress wizard. is the best way to go because you have all the options to do whatever you want.

You can install it yourself or have your hosting company install it. I handle the installs for my clients and then they handle the installation of there own themes and plugins, hiring me to do some of the more complicated development work as needed.

As Little As $54.00 A Year

The upside is the self-hosted version of WordPress is free software. Costs include hosting which can be a little as $43.00 a year for a cPanel/Linux shared-hosting environment plus $11.00 a year for your domain. Domain emails can be free! So, for as little as $54.00 a year, you have a website where adding content is as easy as using the WordPress dashboard user interface, you can add as many email addresses as you wish and scale your website and associated resources as needed. Literally, go from a website that can handle a few visitors or transactions to one that handles thousands of visitors and transactions. All on one installation of WordPress.

Better SEO

A self-hosted version of WordPress offers the ultimate in SEO integration. We can control how your tracking software is integrated, what pages are tracked, goal conversion tracking and special scripts on a per page basis.

Need to run specific, automated tasks (Chron Jobs)? Self-hosted WordPress is the best option.

Need to control what version of PHP your WordPress site runs on? Self-hosted is the way to go.

Access The WordPress REST API

My #1 reason for going self-hosted. For scalability, the option to pull content from WordPress into your external application could be the biggest advantage of going self-hosted.

In closing, per comments below, it is for complete control of the data that one selects a self hosted version of WordPress.

Happy Thanks Giving 2016

We’re celebrating Thanksgiving here at home in Redding, California on this last Thursday of November 2016. Just want to wish all of you a very Happy Thanksgiving! I hope you are in good health and near the ones you love. All the same for those that are beyond Thanks Giving, the world is a big place. On this day I extend my own thanks to you, recognizing you for all you have contributed to my world. Thank you!

It’s been a wild year. So much has changed. An amazing amount of good stuff happening and I can’t wait to see what 2017 brings. Anyway, I just want to say:

“I’m thankful for the friendships I’ve made over the past year through SteelBridge Media and the WordPress community. I’m also thankful for all the friends I’ve made via Twitter and other social venues. I have had the honor of meeting some of you and others I’m hoping to meet soon. I can’t tell you how appreciative I am of all the positive, productive and enlightening experiences we have fostered. Incredible! Let’s keep the love going!”

Thank you Keri Perla for being my cornerstone. You add the most to my life. I love you!

To all of you, no matter what you are doing today, I am thankful for you in my life!

Warning: Fatal Error

Plugin Trouble: WordPress

A fairly common occurrence users of WordPress experience is known as the “white screen of death”. Well, it’s not death and really it’s not the end of the world either. Although some of you panic when your website decides to stop working.

Typically the white screen is accompanied by a couple paragraphs of text signaling you with “Warning” and “Fatal Error”. This is happening because WordPress can’t load the contents of your website. If you look at the statements maybe you can see the word ‘plugins’ located in the file directory string. I have included a photo below where I have circled the file folder in question.

fatal error plugins

Most fatal errors are associated with a plugin issue.

So, if you see something like whats pictured above, I’ll share with you the solution to getting your site back.. alive and functioning.

Step 1.

Use your code editor, IDE ( Integrated Development Environment) to FTP (File Transfer Protocol) into your sites root directory. Not sure about this? Call your hosting company. I know of one hosting company that offers great support for customers like you. Find them here SteelBridge Media. I use Coda and Dreamweaver. Atom is another one that I like. Textmate, Sublime are a couple others that have served me well. I stick with the two spendy editors, Coda and Dreamweaver.

Anyway, your goal here is to connect via FTP so you can find the plugins folder within the WordPress file structure.

Step 2.

Once you’ve successfully connected to your host, look for the ‘wp-content’ folder, then find the plugins folder.

Step 3.

Rename the plugins folder to ‘plugins-og’. Renaming the plugins folder deactivates all the software contained inside. If you look inside the plugins folder, you’ll see a series of subfolders all containing the plugins you downloaded. One or more of those plugins are causing the trouble you’re experiencing.

plugins folder

The plugins folder can be accessed via ftp

Step 4.

Go to your browser and access “” (use ‘your’ domain name silly, not my example)

Log-in to your WordPress website and activate another theme. I use one of the default themes that come with WordPress upon installation. Pick the Twenty Sixteen theme and activate it. (From your WordPress dashboard, find themes here Appearance -> Themes. Hover over your the Twenty Sixteen theme or any other theme and select the activate button). Activating another theme allows you to see that your WordPress installation is okay. It’s okay because the newly activated theme works! Test your site out to be sure. If you can’t activate a new theme because there aren’t any themes, upload one. Look for the ‘Add New’ button. And if that still doesn’t work, you need to contact me.

Step 5.

Once you have proven out your site works, go back to your plugins folder you accessed via FTP. Open that folder and rename all your plugin sub-folders to end in ‘-og’ and restore the original name of the parent folder to ‘plugins’ (your parent folder was originally ‘plugins’, put it back to that .

Reactivate your original theme and test your site. Don’t be surprised to find stuff missing or non functional. The goal here is to see if your website loads and you don’t get the ‘Warning’ screen.

Once you can see your website loads with out errors (errors are messages that appear on your screen telling you shit is f’ed up) you’re ready for the next step.

Step 6.

Go back to your FTP client and start renaming/restoring original names of the plugins sub-folders ONE AT A TIME to their original name. That means removing the ‘-og ‘ I instructed you to attach to each file folder name. Again these are the files found in the plugins folder.

As you restore each file folder to original name, take some time to verify your site works. This is the whole point of this stage of the process. We are trying to isolate the offending plugin/folder. Test it, reload it. Clear your browser cache!!!

Eventually you will find the offending plugin when you test the site after restoring any given plugin folder name. You’ll know because the ‘white screen of death appears’.

Step 7.

Rename the folder that caused your site to ‘crash’. Yeah, the “white screen of death” thing. Crash means your site didn’t load. So, you saw the error message again. This means the last plugin you restored is a bad, very bad plugin. Delete it from within your WordPress dashboard. Why? Well, some plugins should go through an uninstall process controlled by a script included within the plugin’s folder. I avoid deleting from my IDE. Better yet.. just leave it renamed, then find the developer and reach out and share your experience. Most developers want to help and learn. Expect a reply!

At this point you can look for another similar plugin that provides the solution the offending plugin did at one time not so long ago. Additionally, Once again, you could try to contact the plugin developer and ask for an update. Or, maybe you shouldn’t be plugging around with any and all plugins online! Why? Because if you do that enough, you’ll catch website-crabs, browsyphilis, firefoxitis, safariamydia.

My advice is pay someone to develop a plugin for you. Someone who will keep your site healthy and produce custom plugins that are sanitary!

I can help you. Build plugins. I do that!

Questions? Send me your comments below.

WordPress function fixes overlapping admin bar

I used to fix the overlapping admin bar issue with CSS. For example:

.logged-in .navbar {
margin-top: 32px;

But that solution doesn’t work unless you’re developing with Bootstrap navigation styles. So, I found a cool way to simply tell your browser to move the


down 32px so it renders below the WordPress admin-bar. I use an inline style that activates upon the presence of the WordPress admin-bar. Place the following code in your header.php file where your navigation menu code is. Look for the


tag and duplicate my example below. Keep in mind you may have class and id names that must not be deleted or pasted over. If you are unsure or not getting the results you hope for, comment below with your questions. I’ll do my best to reply quickly.


if ( is_admin_bar_showing() ){ echo 'style="margin-top:32px;"'; }

Some of you may feel this is sort of a hack. Maybe so. But I sure like the simplicity of this solution.

Wordpress function admin-bar overlap