Wordpress | steelbridge.io

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

<div id="carouselBeadManRedding" class="carousel carousel-fade">
<ol class="carousel-indicators">
<li class="active"> </li>
<li> </li>
<li> </li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="/add/your/image.jpg" alt="Add Alt">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt Text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
</div>
</div>

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 .carousel-item.active {
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.

Published by Chris Parsons on April 19, 2018 | Permalink

Get Image Alt From Custom Post Meta Field

(This post assumes you are familiar with creating custom meta fields)

It’s always bugged me when incorporating a meta field image attachment into a template, I find myself typing in the alt=”” contents when in the media section for any given image, there’s a field for alt text. I want to use the content in the alt text field to populate the alt tags in my theme or template, but I haven’t been able to find the solution until last night when I finally got fed up creating another group of image containers and facing the same old conundrum of typing the alt text in manually or calling the post title, maybe the post excerpt. The right thing to do is get the alt text from the image attachment. This time I simply could no longer ignore the fact that somehow, I could get the alt text for an image delivered by a custom meta field. So, I did it. Life is better.

Getting the alt content for a featured image or an image in the theme customizer is well documented online. But I struggled as I said, trying to acquire alt content from a media attachment for a meta filed. I could, and have just used the post_title like so:

<div id="carouselBeadManRedding" class="carousel carousel-fade">
<ol class="carousel-indicators">
<li class="active"> </li>
<li> </li>
<li> </li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="/add/your/image.jpg" alt="Add Alt">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt Text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
</div>
</div>

The above certainly provides alt text. It prints the post title. But it’s not consistent and we are not using the resource precisely. We are printing the post title and not the intended resource found in the media post type.

So, how to get the image alt for an image attachment produced in a theme or template via custom meta field:

/* 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 .carousel-item.active {
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’ll explain the code above:

The ‘post-meta-field-id’ can cause some confusion here if you are not already familiar with creating custom meta fields. Although there is a plugin available that allows easy creation of meta fields, called Advanced Custom Fields, I prefer to use my own code that I’ve developed over time. It’s a benefit to your clients to utilize your own crafted plugins because you are providing sound, tested, proven functionality without the noisy adds that are common in many of the free solutions available in the plugin repository. Some plugins are heavy on the database as well, loading scripts and features simply not needed for a given website. Anyway, sorry to digress… The ‘post-meta-field-id’ entry is from the code producing your meta field. It’s the callback that produces the content so it can be delivered on the front end… and it’s looks like this (poke around, it’s in there):

I am not trying to demonstrate how to create a meta field as much as I’m providing a reference since this post is for the tech who understands the process of creating meta fields.

Using attachment_url_to_postid associated the image id with the url to said image obtained via $get_image_url. I think using this method could create a load on the server if we are processing thousands of files on a single page. But, to that I say “isn’t processing thousands of files on a single page a problem in and of itself?”

The best part here is _wp_attachment_image_alt. This is where the alt test is delivered in the variable $alt

So, here’s how your in your theme or template will look based on the above solution:

<?php
// Get the URL of the custom meta image field
$get_image_url = get_post_meta(get_the_ID(), 'post-meta-field-id', true);
// Gets the custom post type image id
$get_image_id = attachment_url_to_postid($get_image_url);
// Get's the alt text from the image
$alt = get_post_meta ( $get_image_id, '_wp_attachment_image_alt', true );
echo $alt;

I know there’s other ways to do this and maybe I could have written my examples differently. This is just my way of accomplishing a task as of today. I will update this post with your insights and improvements as they most certainly will come.

What are your thoughts/questions?

Published by Chris Parsons on December 3, 2017 | Permalink

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”.

Example of a site hacked and defaced. Photo found at https://www.hackread.com

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.

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:

<div id="carouselBeadManRedding" class="carousel carousel-fade">
<ol class="carousel-indicators">
<li class="active"> </li>
<li> </li>
<li> </li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="/add/your/image.jpg" alt="Add Alt">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="/add/your/image.jpg" alt="Alt Text">
<div class="carousel-caption d-md-block">
<h2>Title</h2>
<p class="lead">Lead Text</p>
</div>
</div>
</div>
</div>

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:

/* 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 .carousel-item.active {
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);
}

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

<?php
// Get the URL of the custom meta image field
$get_image_url = get_post_meta(get_the_ID(), 'post-meta-field-id', true);
// Gets the custom post type image id
$get_image_id = attachment_url_to_postid($get_image_url);
// Get's the alt text from the image
$alt = get_post_meta ( $get_image_id, '_wp_attachment_image_alt', true );
echo $alt;

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

(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: https://api.wordpress.org/secret-key/1.1/salt/

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.

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:

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?

Published by Chris Parsons on November 5, 2017 | Permalink

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 “WordPress.com” and the second is called Self Hosted WordPress or “WordPress.org”.

Here’s the difference:

WordPress.com

This version starts out as free except for the cost of a custom domain (i.e. yoursite.com). 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.

WordPress.com 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.

WordPress.com 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 wp.com won’t allow you/a developer to integrate an API.

Very Secure

The upside of WordPress.com 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 WordPress.com over Shopify because you can easily migrate to a self-hosted version when expansion demands it. Shopify can be tough and expensive. Your WordPres.com 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 WordPress.com. It may be very difficult to achieve a respectable trust value with a “free” wp.com site .vs a WordPress website hosted at Godaddy or here at steelbridge.io

SEO Options

WordPress.com 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 WordPress.com option.

WordPress.org

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.

WordPress.org 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.

Published by Chris Parsons on November 5, 2017 | Permalink

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!

Published by Chris Parsons on November 25, 2016 | Permalink

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.

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.

The plugins folder can be accessed via ftp

Step 4.

Go to your browser and access “http://the-name-of-your-website-goes-here.com/wp-admin” (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.

Published by Chris Parsons on November 19, 2016 | Permalink

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.

Example:

<header

<?php

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.

Published by Chris Parsons on November 18, 2016 | Permalink