WordPress Archives - Page 5 of 11

Posted on April 23, 2019 by Đạt Trần — 5 Comments

How To Change Link Color in WordPress

Your WordPress site’s link color is defined by the theme you use. If the theme doesn’t specify a rule for link color, then the default color by the browser is applied. As a rule of thumb, link should be styled in a way that visitors know that is a link(blue color, cursor changed to a hand when hover on it). However, there are times theme author uses a different color that makes the links look strange.

Then, you wonder, how can you change link color in WordPress?

The answer may surprise you because it’s fairly easy.

Do you know CSS?

Knowing CSS, even at the very basic level can be super helpful when you want to customize your site. Most of WordPress themes nowadays provide a section call Additional CSS under Apperance->Customize so you can add your own styling. So, if you know how to write CSS, you can easily edit anything related to style on your site.

But if you don’t know CSS, don’t worry because I’ll walk you through.

Here are the steps you need to do to change link color in WordPress

Find the color you want to use as link color
Find the selector of the link on your site
Write the rule in Additional CSS box
Apply the changes and see the effect

Now, let’s get started

Step by step to change WordPress link color

Find the color you want to use as link color

The first step is to get the code of the color you want to use. If you go to google and search for color picker, chances are you’ll see one provided by Google:

This is a good one. You simply drag the sider at the bottom to get the to the base color (Blue for example) and then position the circle to pick the exact color you want to use.

When you are happy with your selection, let’s look at the left and see the string that begins with the # sign.

That’s your color code.

In my case, my color code is #5495ff

Find the selector of the link on your site

The next step is to find the selector of links on your site. Normally, the link tag starts with <a. You may be tempted to use a as the selector as in this example:

a {
    color: #5495ff
}

It may or may not work depends on the theme you are using. To increase the chance of our color is applied to the link, we need to add a bit more specificity.

Now, go to your site, find any link and right click on it, select Inspect (I’m using Chrome but you can use Firefox too).

Depends on your browser settings, you’ll see a new window appears either at the bottom of the browser or at the right side.

Let’s look at the window:

As you can see, we have the link element starts with <a here. You’ll also notice that this one is the child of an element with and ID named “secondary”. In addition, the div with the ID secondary is the child of another div with class “container”.

So, to apply the color above to all links in the div with “secondary” ID, we can write the rule as follow:

.container #secondary a { 
    color: #5495ff 
}

Write the rule in Additional CSS box

Now, let’s go to Appearance->Customize->Additional CSS and put the code above at the bottom of the custom css box:

As you can see, the moment I pasted the code, the color of the links on the sidebar changed to blue.

You still need to click on publish to make the change permanent.

Conclusion

As you can see, change link color in WordPress is very simple. You still need to understand basic HTML and CSS to do so. If you need assistance, please let me know.

Posted on April 11, 2019April 11, 2019 by Đạt Trần — Leave a comment

[Fixed] Why Does Yoast Not Generate A Sitemap – Sitemap_index.xml 404

So I have been struggling to fix a problem with my sitemap. It was working properly before, until I moved the server.

The problem is I didn’t know up until this morning. I moved my site to the new server two weeks ago.

And Google noticed that too:

That doesn’t look good, does it?

So I, like you guys right now, search the web for a solution. I was running Rankmath. I tried to change to Yoast SEO and other sitemap plugins but still the 404 error persisted.

By the way, my site is on an Nginx server.

Yoast SEO has a post here showing the solution or half of the solution. They provided the code below but didn’t tell where to put the code:

location ~ ([^/]*)sitemap(.*).x(m|s)l$ {
  ## this rewrites sitemap.xml to /sitemap_index.xml
  rewrite ^/sitemap.xml$ /sitemap_index.xml permanent;
  ## this makes the XML sitemaps work
  rewrite ^/([a-z]+)?-?sitemap.xsl$ /index.php?xsl=$1 last;
  rewrite ^/sitemap_index.xml$ /index.php?sitemap=1 last;
  rewrite ^/([^/]+?)-sitemap([0-9]+)?.xml$ /index.php?sitemap=$1&sitemap_n=$2 last;
  ## The following lines are optional for the premium extensions
  ## News SEO
  rewrite ^/news-sitemap.xml$ /index.php?sitemap=wpseo_news last;
  ## Local SEO
  rewrite ^/locations.kml$ /index.php?sitemap=wpseo_local_kml last;
  rewrite ^/geo-sitemap.xml$ /index.php?sitemap=wpseo_local last;
  ## Video SEO
  rewrite ^/video-sitemap.xsl$ /index.php?xsl=video last;
}

I put it in the server block, didn’t work.

Then I tried to put this inside the location / block inside the server block and the problem was solved.

Remember to put the configuration block inside location /

And that’s all the fix needed to make your sitemap.xml working again.

Posted on March 26, 2019 by Đạt Trần — 5 Comments

How To Add Custom CSS/Javascript In Elementor Free Version

If you are using the free version of Elementor, you’ll notice that adding custom css to the page isn’t supported. Elementor says that it’s a feature of the pro version.

What can you do? Are you going to upgrade? Well, if you can, I recommend you to do so. It’s worth the price.

However, if you just need to add some CSS and not quite ready to upgrade yet, let me show you a walk around.

Adding custom CSS in Elementor free version

Now, let’s find the HTML element and drag it into your page:

Now, you’ll see the HTML on your page look like this:

It doesn’t look very attractive. However, you don’t need to worry about that. It will not show up on your final page (the page that your visitors see).

Now, let’s hover your cursor over the HTML element, you will see the edit icon appears:

Then, you’ll see the HTML box appears on the left of your screen:

While it says HTML code, there is nothing prevent us to enter CSS code 😉

Let’s enter some CSS code:

<style>
body p {
    color: red;
}
    
</style>

And you’ll see, my page has red text:

Now, update your page and see the changes.

Conclusion

Some of you may say that, putting style tag inside the body is not recommended. Well, that’s a thing of the past. HTML5 is finally allow the style tag in the body. If you don’t mind reading length specification page, here you go.

You don’t limit to put just css in the HTML box. You can put HTML (of course) and also javascript code. This enable some very interesting feature that you cannot do with the default elements provided by Elementor.

Posted on March 1, 2019 by Đạt Trần — 2 Comments

The Ultimate Nginx Configuration For WordPress Website

So recently I decided to move my server from HostGator to DigitalOcean droplets. In comparison, DigitalOcean has so many benefits over HostGator, especially for developer. The most notable are:

Full root access
You can install anything you want on DigitalOcean
Free SSL (Let’s encrypt)
Cheaper
More powerful server (2GB of RAM, 50GB SSD, 2TB transfer for just $10/month)

My website was running on Apache server at HostGator. As I’ve heard so many good things about Nginx, I decided to make the change. Installing Nginx was easy. However, as I’m not familiar with Nginx, I spent more than a day to solve these two issues:

Website is not accessible. I got 502 Bad Gateway error every time I try to access my site.
When I was able to access my site. All pages/posts are 404 except the home page.

So, to save you time, I’m going to share my configurations so you can follow and get your site up and running fast on Nginx.

Configure PHP FPM

First, let’s edit you php-fpm www.conf file. I’m running php7.2 so the file is located here:

/etc/php/7.2/fpm/pool.d/www.conf

However, if you are running a different php version, you may have different path. The trick is to cd from /etc the ls to see the list of folders. For example, if you have php 7.3, the path would be:

/etc/php/7.3/fpm/pool.d/www.conf

Edit the file using your favorite editor. I’m using vim so I type:

vim /etc/php/7.2/fpm/pool.d/www.conf

Let’s navigate to the line says:

listen = /run/php/php7.2-fpm.sock

Comment that line by placing a ; at line start and type the following line below:

listen = 127.0.0.1:9000

Now it will look like this:

Save your file and restart php fpm. I’m on ubuntu 18.04 so my command to restart php fpm is this:

systemctl restart php7.2-fpm

However, if you are on a different server, the command could be different. You can google for the exact command for your system.

Configure your site’s server block

Let’s go to:

/etc/nginx/sites-available/

And create a file match your domain name. For example, my site is excelautocomplete.com, I’ll create file called excelautocomplete.com

vim excelautocomplete.com

then enter the following content to the file:

# WordPress single site rules.
# Designed to be included in any server {} block.
# Upstream to abstract backend connection(s) for php
upstream php {
        server unix:/tmp/php-cgi.socket;
        server 127.0.0.1:9000;
}

server {
        ## Your website name goes here.
        server_name domain.tld;
        ## Your only path reference.
        root /var/www/wordpress;
        ## This should be in your http block and if it is, it's not needed here.
        index index.php;

        location = /favicon.ico {
                log_not_found off;
                access_log off;
                expires max;
        }

        location = /robots.txt {
                allow all;
                log_not_found off;
                access_log off;
        }

        location / {
                # This is cool because no php is touched for static content.
                # include the "$is_args$args" so non-default permalinks doesn't break when using query string
                try_files $uri $uri/ /index.php$is_args$args;
        }

        location ~ \.php$ {
                #NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
                include fastcgi.conf;
                fastcgi_intercept_errors on;
                fastcgi_pass php;
                fastcgi_buffers 16 16k;
                fastcgi_buffer_size 32k;
        }

        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                expires max;
                access_log off;
                log_not_found off;
        }
}

You need to pay close attention to two fields:

server_name
root

in server_name, type in your website address (without http or https). In the root field, enter the location of your site’s file (the folder that contains wp-content, wp-admin…)

Save the file and reload nginx.

systemctl reload nginx

Now, your site should be up and running without an error.

Conclusion

Moving my website from Apache to Nginx was a challenging but exciting experience for me. I lost a sales due to my customer cannot get to the download page of the product. However, I’ve learned a lot from this experience and next time when I need to move other sites, the whole process would be much faster and easier.

Hopefully, the post has been helpful to you. If you have questions, don’t hesitate to ask.

Posted on March 1, 2019March 11, 2019 by Đạt Trần — Leave a comment

Picture Guide To Create Child Themes In WordPress Step By Step

If you are reading this post, you may have heard of the good things that a child theme bring. Most of the time, you like the look and feel of the parent theme, however, you still need to modify a bit to your liking. This is the perfect case to create child themes in WordPress. Another example is when you want to alter some functionalities of the parent theme such as change the WooCommerce shop page design. Once you know how to create a child theme, there are many great things you can do. Without further ado, let’s learn how to create child themes in WordPress.

There are two ways you can create a child theme in WordPress. If you are comfortable with creating folders and files, then take a look at the second method below. However, if you want an easy way, maybe using a plugin to create your child theme is the right way.

Create child themes in WordPress using plugin

We are going to use a plugin called Child theme wizard. Let’s go to Plugins->Add new and type Child theme wizard in the search box:

Let’s click on Install now and wait until the text on the button change to Activate. Click on Activate.

Now, go to Tools->Child theme wizard:

If you are creating a child theme, chances are you want to add styles or function to the current active theme. Thus, you should leave the parent theme as the currently active one (however, you can create a child theme for any theme available in your themes folder).

Next, let’s enter some details. You can enter anything you like in these boxes. When you are done, click on Create Child Theme.

After a few seconds, you should see this notice:

The child theme was created successfully.

Now, let’s go to Appearance, you should see the child theme listed there:

Now you can activate the child theme and write additional styles and functions to your site.

Create WordPress child theme by manually creating the theme files

If you want to create the folder structure for the child theme yourself, let’s follow the instructions below:

Here are the steps we are going to do to create a child theme

Locate the parent theme that you want to create a child theme for
Create a folder to host the child theme’s content
Create the style.css file inside child theme folder to declare its information
Activate the child theme in WordPress dashboard

Let’s go through the steps above. In this post, I’m going to use my local development server (which runs Windows). However, you can apply the same concept to create child themes on cPanel or even through linux command line. If you need help, please let me know.

Locate the parent theme that you want to create a child theme for

The first thing you need to do is to find out which theme you want to create a child theme for. Let’s go to your wp-content/themes folder. Here I have some themes available:

I’m going to create a child theme for the theme storefront, which is the default theme of WooCommerce. It’s totally depend on you to pick the parent theme.

Create a folder to host the child theme’s content

Our next step is to create a folder to host the child theme’s files. I’m going to create a folder called storefront-child-theme. You can give the folder any name you want. However, the name should (not must) make it obvious to see the parent-child relationship. Some other good examples for child theme’ names are:

storefront-child
storefront-extend-theme

Now, in our wp-content/themes folder, we have these folders:

Create the style.css file inside child theme folder to declare its information

Our next step is to go to the child theme’s folder and create a file named style.css. This is the must-have file of any WordPress theme. Let’s enter the following details in style.css:

/*!
Theme Name:   Storefront Child Theme
Theme URI:    https://binarycarpenter.com/?p=1158&preview=true
Author:       Dat
Author URI:   https://binarycarpenter.com/
Template: storefront
Description:  This is the storefront child theme
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront-child-theme
Tags:         e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, editor-style
*/

There are quite some fields here (each field stays on one line). However, there are two fields you need to pay attention to. Those are Theme Name and Template.

These two fields are required and they have some strict rules you must follow:

For the “Theme Name” field, you can put anything you like in here but it must be unique across all your themes (on your site).
For the Template field, the value of this field must match the FOLDER NAME of this theme’s parent theme. In this example, the parent theme’s folder is storefront so I put storefront in the Template field. You should put this value according to your parent theme.

Let’s save the file and go to the next step.

Activate the child theme in WordPress dashboard

Now we have successfully created the child theme for storefront. Let’s go to Appearance->Themes inside WordPress dashboard to activate it:

As you can see, we now have a new theme called Storefront Child theme. Let’s hover on it and click on activate. The site is now running our new child theme. Now you can start working on writing custom CSS styles, additional functions in the functions.php files…

Conclusion

Child themes bring a lot of flexibility to your WordPress site. Knowing how to create and work with child theme is important, even when you are not a developer. Child themes let you customize the styles and also add new functions to the parent theme. Hopefully the post has been helpful to you. If you have any questions, please let me know in the comment below.

Cookie	Duration	Description
cookielawinfo-checbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.