How to Change Default Text Color of WordPress Visual Editor (TinyMCE)

WordPress uses tinyMCE as its editor. This is the editor that you use to edit your WordPress posts and pages. By default, the color of the text when you type inside the editor box, is gray, against white background. It’s fine if you like that combination of color, but I personally don’t like gray text against white background very much, unless the font is fairly big, like what you are seeing right now. My eyes are not good with looking at small gray text against white background for a long time.

So how do you change the default gray text to, let’s say, black, for example? Or how do we change the overall styling and the appearance of our tinyMCE editor in general? Maybe you prefer a darker background and lighter font to go with your editor, for example. How do we go about doing this?

The easiest way is to use our own custom CSS file, so that we could style the editor however we want. Referring to WordPress Codex, this is how you do it:

First, create your custom CSS file called editor-style.css (or whatever name you want) and place it ideally in the root of your theme’s directory.

Second, copy and paste the above code into your functions.php file. Now drop all your custom styling into the editor-style.css file.

Example:

Now open your editor again, you will notice the text you’re typing inside the editor is now black against white! Walla!

Woocommerce: Display All Products Eligible For Coupons

If you are running Woocommerce for your online shop, there is a feature where you can set up coupons for your customers to use. If you want your coupons to be used only on certain products in your shop instead of shop-wide, you can also do so. Woocommerce allows you to add products of your choice to certain coupons, so that customers will be able to get discounts when they buy those products, given that they know what the coupon codes for those products are. This feature does not require any Woocommerce extensions, it’s one of Woocommerce core features.

There could be times when you want to allow your customers to filter products in your store and display only the ones that are eligible for coupons. One reason is to encourage your customers to buy those products instead of other products in your store. In my case, a client asks that all products on their store that are eligible for coupons to be shown with a little image that says “discount with coupon”.

So this is how to do it.

Step 1: Get all published coupons

First we use WordPress get_posts function to retrieve all published coupons.

Step 2: Get all coupon ID of active coupons

Now the variable $coupons in the code above contains all data about all the published coupons we have. But we only want coupons that are still active (not yet expired). And we only want the ID of these coupons. So we add this:

Step 3: Get all product ID of products associated to a coupon

From the code above, we now have an array of coupon IDs of all active coupons in the store. Now with each coupon ID we have, we’re going to retrieve all product IDs associated to it. So we do this:

This may not be the cleanest way to do it, but it gets the job done anyhow. Basically what we did above is we loop through active coupon IDs, retrieve product IDs associated to each coupon, and then store those products IDs in a variable, different variable for each coupon. So we got $coupon1_prod_ids which stores an array of product IDs associated to coupon 1, and then $coupon2_prod_ids which stores an array of product IDs associated to coupon 2, and so on.

Step 4: Merge all product IDs in Step 3 into a variable

The final step is to merge all the product IDs we got from above into an array variable so that we could use the data to do whatever we want.

With the code above, all the data we want is now stored in an array called $product_ids_with_coupons. This array now contains all product ID of products that are eligible for coupons. From here on, you could do things like comparing the ID of the current product in a loop against this array and determine if it matches.

Example

Here’s an example of the usage:

If you’ve got a cleaner solution, please feel free to share it!

Child Theme Doesn’t Look Like Parent Theme? Here’s The Fix

You have just created a WordPress child theme. You followed closely the guide found on WordPress Codex as well as on WordPress developer theme handbook. But there seems to be a problem. Once you activated your child theme, it doesn’t look like its parent theme. Shouldn’t a child theme inherit everything from its parent theme? If so, why doesn’t your child theme look exactly like the parent theme? Here’s what to look for in order to fix this.

There are two things you should check first:

  1. Have you copied custom css, widgets, theme options and configurations (including what you customized using WordPress customizer) from the parent theme over to the child theme?
  2. Have you successfully enqueued all the parent theme’s stylesheets and set their dependencies (such as font awesome, bootstrap, etc) accordingly?

Okay, let’s go through all the above one by one.

#1: Copy Parent Theme’s Options Over To Child Theme

Most WordPress themes these days have their own theme options page where users can customize the theme’s styles, fonts, and a lot more. Most also include custom css and custom js section where users who know css (and/or javascript) could change the site’s style and action via css and/or javascript.

The first thing you need to remember when creating a child theme is, a child theme will NOT inherit theme options, widgets, and custom css of its parent theme.

And you have to remember, for your child theme to look like the parent theme, you would have to copy ALL these theme options (including the custom css and js codes) from the parent theme to its child theme. Those widgets you configured for the parent theme? You have to reconfigure that once you activate the child theme. But lucky for you, themes with gazillions of options out there usually have an Import/Export feature so that you could export all your options and configurations into a file and import it back into your child theme with just a few clicks.

But what if your theme doesn’t have this Import/Export feature?

Well, the main reason you create a child theme is to add your own styling and customization to an existing theme. A child theme is to make sure the customization won’t be wiped out once the theme is updated. But understandably, not everyone wants to get their hands dirty by creating files and editing codes. That’s why a lot of themes these days have a more user-friendly theme options where users could change the look and feel of the theme just by clicking buttons without having to touch the theme files at all. And if you are already doing this, then you probably don’t need a child theme anyway. Amirite?

#2: Enqueue Parent Theme’s Stylesheet and Set Its Dependencies On a Child Theme

If your parent theme is a fresh install and you haven’t configured any options but your child theme does not look like the parent theme, the first thing you should check is the way you enqueue the parent theme’s stylesheet (style.css file). Are you enqueuing the parent theme’s stylesheet correctly?

From WordPress Codex, this is how you do it:

But copying the code above into your child theme’s functions.php¬†(and replacing ‘parent-style’ accordingly) is sometimes not enough. You have to look for its dependencies and make sure to set it as so.

Let’s use Shaped Blog theme found on WordPress.org theme directory as an example.

The Shaped Blog theme defines its main stylesheet as ‘shaped-blog-stylesheet’ in functions.php. Other than that, it also defines three other css files. All these are done in functions.php. Below is the code:

Naturally, looking at the code above, bootstrap css will load first, followed by font awesome css, followed by style.css, and then responsive css. That works well for the theme. But what if we want to create a CHILD theme for this Shaped Blog theme?

Without setting up any dependencies, parent theme’s style.css file will load FIRST, and then child theme’s style.css file, followed by the other three (bootstrap-css, font-awesome-css, responsive-css). This will cause your child theme to look a tad different from its parent theme, i.e. you will notice the fonts are different, among others.

In order to fix this, in the child theme’s functions.php file, you will have to set the parent theme’s stylesheet dependencies. This is to make sure the parent and child theme’s style.css files load AFTER the css files they depend on, like so:

Notice in Line 5 in the above codes, dependencies are declared as an array and then set in Line 7. This way, bootstrap css file will load first, and then font awesome css file, followed by the parent theme’s style.css file and then the child theme’s style.css file. Having bootstrap and font awesome to load first, child theme now will look just like its parent theme.

Still Need Help?

If you still need help with creating child theme, you can contact me for a quote.