How to make WordPress adminbar play well with fixed header

More often than not if you have a fixed header and logged-in as an admin, the adminbar is usually visible and overlapping the header.

Your visitors won’t see this but it’s annoying none the less.

The easy fix is add the css below:

/* Make the fixed header behave well with overlapping and adminbar */
body.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 767.98px) {
	body.admin-bar .site-header {
		top: 0;
		position: sticky!important;
		background: #000!important;
	}
}

How to edit your Shopify e-commerce’s site metadata information for SEO

Metadata data are pieces of information that you put to your webpage to provide your audience and search engine to know more about your page.

To Google and other search engines, this is more than just knowing more about a certain page but is a factor on SEO.

By default, a webpage should have at least a “title” and a “description”.

On a custom webpage, you add these manually by code, but good thing Shopify provides a code-free solution. But on Shopify editing metadata does not live on a certain page. Let’s see what I mean below:

To edit the homepage metadata:

  1. Login to admin
  2. Go to Online Store -> Preferences -> Title and Meta Description block
Shopify Homepage metadata

To edit Collections page metadata:
Collection page is the main landing page of all your products.

  1. Login to admin
  2. Go to Products -> Collections
  3. Create a new collection called “all” (fig.1)
  4. Below the condition section, add a price condition and set it to greater than zero (0.00) so this will pull all products. (fig.2)
  5. Then at the very bottom the metadata section.
Shopify add product collection
Shopify edit collection condition
Shopify edit metadata section

To edit a blog, page or a product metadata:

  • Login to admin
  • Go to edit blog, page or product then go to SEO section.

Thats it!

Requiring www redirect on WordPress with Cloudflare provided ssl results in infinite loop

Had recently worked on a WordPress site that needs requiring www and SSL on all their URL.

So, this looks easy to set up in Cloudflare and I had done this before but this has resulted in an infinite loop.

So I started searching over Google and find tons of fix, that I did try and failed. It’s so frustrating because we did this number of times and is working with non-Wordpress sites.

But after numerous testing, all we need to do to make this work is:
1. Update domain in WordPress’ dashboard->settings to contain www.

2. Second, create a page rule in Cloudflare that sets all URL force SSL.

you’ll see “/*” right after the domain, its a wildcard, this denotes all other subpages e.g. (/about-us, /contacts, /products), to make sure all URLs will force SSL.

Currently, this works fine on WordPress 5, let me know if you have a better solution 🙂

How to update Bootstrap’s navbar dropdown item background (blue by default)

This maybe the simplest update, but if you don’t know where to look at, can take you several minutes.

When developing you have your own color scheme and this nav-item dropdown is a little bit tricky to update if you’re new to Bootstrap.

See below CSS to override this class:

// CSS
.dropdown-item:active {
  background-color: transparent;
}

Put this below the Bootstrap CSS and done!

How to make on-hover effect on Bootstrap’s navbar dropdowns

I can’t believe Bootstrap left this out on their documentation lol.

For those who still want to add “on-hover” effect on their Bootstrap’s navbar dropdown, with only on line of css, check out the css snippet below:

/* Adding an on-hover effect on Bootstrap navbar */
.dropdown:hover .dropdown-menu {
  display: block;
}

Checked and tested on Bootstrap 4.

How to add favicon on WordPress?

A favicon is an icon displayed on the browser tab just above the address bar, next to the site’s name when someone bookmarked your site.

People add them to give better user experience, since its easier to recognise an icon or a logo vs reading a site’s name, which sometime can be cut-of.

Adding a Favicon on a non-Wordpress site needs you to do some a bit of coding, but in WordPress world users are very spoiled, everything gas GUI here.

To add a Favicon to your WordPress site:

  1. Login your WordPress site.
  2. Go to “Appearance” -> “Themes” select your active template and then click the “Customise” button.
  3. You will be then forward to a page where you can edit you basic template settings. Where you need to go is “site identity” section.
  4. Just below the navigation, click “site icon” button.
  5. Select or upload an image, crop the image, then do not forget to click “publish” then refresh your page. Thats it!.