Well. It’s been fun. Thank you, Medium.

I’m posting new stories on CaughtMyEye.dev.

I’m contributing tech articles on DEV.to.

No paywalls. No click bait.

Enjoy!

Thanks to Shruti for getting me off the fence. ;-)


Adding custom CSS to a WordPress.com site using Appearance > Customize > CSS
Adding custom CSS to a WordPress.com site using Appearance > Customize > CSS

Five Methods Covered

We’ll cover these 5 ways to add CSS to a WordPress site. No plugins are required.

  1. WP Admin > Appearance > Customize > Additional CSS
  2. Child theme’s style.css file
  3. Theme options (Avada, Divi, & The7)
  4. Page builder settings (Gutenberg, Avada, Divi, Elementor, & WP Bakery)
  5. Inline code (Gutenberg, Classic Editor, Avada, & Divi)

1) WP Admin > Appearance > Customize > Additional CSS

This area is mainly for global (site-wide) styling, but it can contain page specific CSS selectors as well.

Log into your WP Admin dashboard. Navigate to Appearance > Customize > Additional CSS. Enter your custom CSS. Hit the Publish button to save and go live.

Adding custom CSS to a WordPress.org site using Appearance > Customize > Additional CSS
Adding custom CSS to a WordPress.org site using Appearance > Customize > Additional CSS
WP Admin > Appearance > Customize > Additional CSS


Image for post
Image for post

Sharing is Caring

I answered this question (title of this post) recently in the Theme Fusion Avada Community Support Forum. I thought I’d share the love with fellow WordPress Avada theme junkies.

And as an added bonus, the solution will cost you only four lines of CSS! Scope out the code here.

If you have any questions, please leave me a comment! Share & enjoy :-)


CloudCannnon Versus WordPress (Product Review by mark l chaves)
CloudCannnon Versus WordPress (Product Review by mark l chaves)

Significant additions done 30 October 2019

First Impressions

My very first impression of CloudCannon was oxymoronic at best. It just didn’t make sense at the beginning. To go sling around a lot of code to build things that are already available for WordPress (with no coding required).

I was introduced to CloudCannon by a friend about two months ago. I briefly looked at the CloudCannon site (didn’t know anything about Jekyll yet) and thought,

“Oh no. Do I really need to (re)invent the wheel yet again? Do I really need to code-up an image carousel when there are hundreds of off-the-shelf WordPress carousels out there? …


Image for post
Image for post
ATM by mark l chaves

Updated 3 October 2019

Problem Solving

This article is about problem solving. Plain and simple. Which happens to be one of my favourite subjects. Just this past week, I responded to at least twenty requests for technical help. This is not a complaint. I enjoy helping people with web/email/tech related issues.

All of us will need technical assistance from time-to-time. I’m included. The way you ask for help makes a huge difference. Asking for help is a skill that can get your tech issues resolved quicker!

TL;DR

  1. State the specific problem up front. The more details the better. Minimalism doesn’t work well here.
  2. Include what you were trying to do when the problem occurred. …

Image for post
Image for post

This is How Google Sees Your Popups

Rewind to August 2016. Google announces that,

“To improve the mobile search experience, after January 10, 2017, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as highly.”

The excerpt above, is in direct reference to what Google refers to as intrusive interstitial design. Better known as popup windows that block you from what you’re trying to do on a site.

Fast forward two years later. Intrusive interstitial design is still alive and well. Maybe some folks like TripAdvisor can get away with it on the desktop?

Image for post
Image for post

This is the first thing I see when I go to TripAdvisor on a desktop browser. I feel this is intrusive to say the least. Luckily, they follow Google’s guidance by not displaying an interstitial for mobile devices. …


Image for post
Image for post

You’ve got keywords. Yay! Now what?

You’ve been told keywords will improve your SEO. Which will in turn boost your Google search ranking. But, how?

Below is a real life example that I hope will answer these two questions for you.

Let’s start with the live web page that we’ll use for our example content. We’re going to use a blog post called Artistic Street Photography published on my Bali Street Photographer site.

This page is currently showing up on Google SERP 3 (search engine result page 3) for the query, ‘What is “artistic” street photography?’. Not too shabby considering there are 121 million results for this long tail keyword.

Image for post
Image for post
Google SERP 3 for long tail keyword ‘What is Artistic Street Photography?’

Next: The List of Keywords to Sprinkle Our Content With

Here’s the list of keywords we have to work with. In order from most general to most specific (head keywords to long tail keywords). …


Image for post
Image for post

How do I Log into My Site?

If you are like me and setup WordPress websites, it’s inevitable to be asked, “How do I log into my site?”. Just about every WordPress website owner I’ve worked with has asked me this. So, here’s how.

The Recipe

Image for post
Image for post
This recipe is the universal default admin login link for a WordPress site.

Adding /wp-admin to the end of your homepage link

Let’s use TechCrunch’s website as an example. TechCrunch.com is a startup & technology news site. The TechCrunch website is a showcase site for WordPress. Their homepage is located at this URL https://techcrunch.com

If we follow the /wp-admin recipe for getting to TechCrunch’s WordPress admin dashboard, all we need to do is add /wp-admin after https://techcrunch.com to become https://techcrunch.com/wp-admin/. Try it.

  1. Bring up https://techcrunch.com in your browser. …

Image for post
Image for post
This article shows two ways to centre a custom call-to-action button using HTML & CSS.

Special thanks to Irene Dang for asking me how to centre my custom CTA button in my earlier article. Ok, let’s get to it!

TL;DR

Scroll all the way to the bottom for the link to the full source code covered in this article.

Two Options to Centre Your Button

There are several ways to do this. I’m going to cover two options.

  1. Option 1: More, Intuitive, & Slick. Option 1 uses a DIV tag. There’s more code involved here, but IMHO (in my humble opinion) it’s more intuitive and elegant. It’s also using the slick CSS Flexible Box (flexbox). Read more on the flexbox here.
  2. Option 2: Minimalist, Cryptic, Oldie but a Goodie. Minimalist is nice when you want to reduce your code footprint (smaller file size). But, code reduction can/will make your code harder to read. Therefore, harder to maintain. This is a tried and trusted method. So, it can be more reliable than option 1. Ah, trade-offs. What can you do? …

Image for post
Image for post
Tagging Heaven in Phuket Thailand by mark l chaves

Using categories and tags, is one better than the other?

When I finally sat down to write this piece, the first analogy I thought of to help me explain categories was from a TV show. It was an episode of Gomer Pyle, USMC (c. mid-1960s). I wasn’t much of a fan of Gomer Pyle. But, I was stuck in the house with the flu this particular day.

The episode was the one where Gomer organises the supplies in the base exchange store into three categories: animal, vegetable, and mineral. While watching this episode, it hit me that I never before seriously thought about how to categorise things. BTW, I am not the first person to use Gomer Pyle’s supply store fiasco as an allegory for categorising things–pleasant surprise.

About

mark l chaves

I slung code for Fortune 500 companies in a previous life. Now, I write and make some photographs. I’ve moved on to Dev.to. Portfolio on CaughtMyEye.cc

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store