Removing Google fonts with PHP code in WordPress

If there are only a few Google fonts loaded by a theme/plugin and you want to remove them by yourself without a plugin, here are ways to do that with a few lines of PHP code.

There are two ways:

  • Find out the code that registers Google fonts with a handle name, then remove those handles one by one. This applies when you know which fonts to remove and reserve the rest.

  • Remove all the handles of fonts each of which is registered with an URL containing 'fonts.googleapis.com' at one time. This applies when you know which fonts to reserve and remove the rest.

You can put the code inside the functions.php of a child theme or create a new plugin to do that (See more at Ways to custom WordPress, it is pretty simple).

Way 1. Remove a font with a known handle

Assume you want to remove the Google fonts added by a theme in which the code adding fonts may like this:

function thetheme_enqueue_scripts () {
    wp_enqueue_style('thetheme-fonts',
        'https://fonts.googleapis.com/css?family=Libre+Franklin');
}
add_action('wp_enqueue_scripts', 'thetheme_enqueue_scripts');

The function thetheme_enqueue_scripts() registers Google fonts with a stylesheet handle named as thetheme-fonts (the first parameter passed to wp_enqueue_style()). Then it is added to action wp_enqueue_scripts with a default priority (10).

Stylesheet handle

The handle is used to identify a stylesheet to be added to a page. In the final HTML file, it is attached with -css and used as the id of a “ tag.

Then you can remove it with below code:

function mycustom_remove_google_fonts() {
    wp_dequeue_style('mytheme-fonts');
}
add_action('wp_enqueue_scripts', 'mycustom_remove_google_fonts',
    PHP_INT_MAX);

Here mycustom_remove_google_fonts() passes the handle thetheme-fonts to wp_dequeue_style() to remove the associated stylesheet.

Note we can only remove a stylesheet which has been registered. Therefore we add our action with a higher value of priority to make sure it is called at a later point.

Way 2. Remove all fonts from fonts.googleapis.com

Below code removes all fonts from fonts.googleapis.com but the font registered with the handle myplugin-fonts.

 function mycustom_remove_google_fonts () {
    // The fonts to be reserved.
    $reserved_font_handles = [
        'myplugin-fonts' => true,
    ];

    // Remove all styles whose src contains 'fonts.googleapis.com' except those reserved.
    $wp_styles = wp_styles();
    foreach ($wp_styles->registered as $style) {
        if (strpos($style->src, 'fonts.googleapis.com') !== false ) {
            $handle = $style->handle;
            if (!array_key_exists($handle, $reserved_font_handles)) {
                wp_dequeue_style($handle);
            }
        }
    }
}
add_action('wp_enqueue_scripts', 'mycustom_remove_google_fonts', 
    PHP_INT_MAX);

Note if you are using Google Ads plan, it may adds Google fonts and you should take care of that and better only remove the known Google fonts loaded by plugins/themes.

Resource

Ways to custom WordPress with PHP code

If you want to custom function of WordPress itself, an existing plugin, or the current using theme, there are two ways — a child theme or creating your own plugin.

Do custom in a child theme is easy, just drop your code in its functions.php file.

If you are not using a child theme or your work is not related to theme, then you may write your own plugin to do that. It is pretty simple.

Note, directly making changes to the source code is a bad idea. They mess the code and once the source code gets updated, your changes get lost or the update may fail for file permissions.

Before you start

No matter either way you use, it is important to prefix your functions or define them inside a class to avoid same name conflicts.

Create your own plugin

Here is how to create a new plugin.

Create a plugin folder named my-plugin-example in your local site’s plugins folder.

Inside the folder, create a file with the same name as the folder.

my-plugin-example.php may looks like this:

<?php
/*
 * Plugin Name: My plugin example
 * Description: A plugin to do some custom.
 * Author: Gloomic
 * Version: 0.1
 */

if ( ! defined( 'WPINC' ) ) {
    die( 'No direct access.' );
}


// Your code

If you want to publish your plugin some day, you can add more meta information, like

<?php
/*
 * Plugin Name: My plugin example
 * Description: A plugin to do some custom.
 * Author: John
 * Version: 0.1
 * Author URI: https://myexample.com
 * License: GPLv2
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

Test it in your local site to make sure every thing is fine, then transfer it to your real site.

An example to customize an existing plugin

If there is a filter for you to do the custom, just add your callback to the filter. You can also remove a function registered to a filter or action hook.

Note if you want to remove a function registered to a hook, you need to make sure your code run after the function has been registered. You can not remove a function which has not been registered yet.

Here is an example.

There is a function registered to an action by a plugin with some code like:

add_action('wp_head', 'print_emoji_script', 7);

You want to remove the function. Then you can do that in the plugins_loaded action:

function mycustom_disable_emoji() {
    // Note use the exact priority used when adding
    // the original action callback.
    remove_action('wp_head', 'print_emoji_script', 7);
}
add_action('plugins_loaded', 'mycustom_disable_emoji');

plugins_loaded action hook fires once activated plugins have loaded. Therefore when my_disable_emoji runs, the print_emoji_script has been registered.

Note

The plugins_loaded action hook fires early, and precedes the setup_themeafter_setup_themeinit and wp_loaded action hooks. If print_emoji_script is registered by a theme, then you need to remove it in an action that fires later like init.

add_action('init', 'mycustom_disable_emoji');

More examples:

Resource

Including a file in a WordPress template

If you want to call a file within a temple in WordPress, it is recommend to use get_template_part() instead of the PHP include() function. get_template_part() provides a simple mechanism for child themes to overload reusable sections of code in the theme.

Use get_template_part() to include a file in a template

Syntax

get_template_part( $slug, $name = null );

It first loads the template “{slug}-{name}.php” if $name is not empty. If $name is empty or the template “{slug}-{name}.php” does not exist, it loads “{slug}.php”. If “{slug}.php” still does not exist, no file will be included. Note you won’t get warnings if it fails to find any matching file.

Examples

Below example includes a navigation bar in the header.php template file.

get_template_part( 'template-parts/navigation/navigation', 'nav-bar' );

In the case of a child theme is being used, assuming that the parent theme is twentynineteen, and the child theme is twentynineteen-child, the code above includes the first existing file among these files in this priority:

  1. wp-content/themes/twentynineteen-child/template-parts/navigation/navigation/nav-bar.php
  2. wp-content/themes/twentynineteen/template-parts/navigation/navigation/nav-bar.php
  3. wp-content/themes/twentynineteen-child/template-parts/navigation/navigation/nav-bar.php
  4. wp-content/themes/twentynineteen/template-parts/navigation/navigation/nav-bar.php

Using include() to include a file in a template

If you still want to directly include a file using include_once() or require_once(), see below examples.

Example 1: Include a file from the parent theme

If a child theme is being used, get_template_directory() returns the absolute path of the parent theme.

require_once( get_template_directory() . '/inc/my-functions.php' );

Example 2: Include a file from the child theme

If a child theme is being used, get_stylesheet_directory() returns the absolute path of the child theme.

require_once( get_stylesheet_directory() . '/inc/my-functions.php' );

Parsing shortcodes in WordPress template files

To include a known shortcode in a custom page/post template file as part of the content, you need to use do_shortcode() :

echo do_shortcode( "[a-registered-shortcode-name]" );

The function do_shortcode() parses shortcodes with their registered hooks in the content and return the content with the parsed shortcodes output. Below example use do_shortcode() to parse multiple shortcodes in a piece of content.

echo do_shortcode( "<p>Shortcode example 1: ['shortcode-name1']</p><p>Shortcode example 2:['shortcode-name2']</p>" );

If you write the shortcode string in the article content just like you what you do in WordPress edit page, it will not be parsed.

<!-- The shortcode below is just a plain text in the page/post template -->
<p>
    ["a-registered-shortcode-name"]
</p>

When editing a page/post in WordPress, the shortcode string works because it will be processed by the the_content() in a template file when it is displayed. the_content() will call do_shortcode() to process the shortcodes inside the content.

Custom title tags in WordPress

How to change the meta title tag without a plugin in WordPress. It also gives an an example of adding category to the title tag for single post and page.

Custom the title tag with a filter

WordPress use get_document_title() to generate the content for the meta title tag. There are two filters to custom it. You may choose one for your purpose.

  • pre_get_document_title, this filter does not accept any parameters, it’s return value will be used as the title. If you want to completely control the title, this one will be your choice. It’s up to you to generate the title. Make sure you take care of all kinds of pages, like home, single post or page, 404, etc.
  • document_title_parts, an array of parts of the title has been generated, like “title”(page title) and “site”(site name). This filter can be used to further custom each part. Finally, each part in the array return by the filter will be joined together with a separator to form a complete title in get_document_title(). If you don’t need deep customization, this one will meet your needs.

What you do is simply define a filter of your chose, and put them in functions.php of your theme.

Change the title

function my_meta_title() {
    return 'My page title';
}
add_filter( 'pre_get_document_title', 'my_meta_title' );

Change the title parts

function change_title_part( $title ) {
    if ( array_key_exists(  $title ) ) {
        $title['title'] = "[$title['title']]"; // wrap title in "[]"
    }

    return $title;
}
add_filter( 'document_title_parts', 'change_title_part' );

Change separator in the title

You can also change the default separator in the title. Use document_title_separator filter to do it.

function change_title_separator( $separator ) {
    return '|';
}
add_filter( 'document_title_separator', 'change_title_separator' );

Example: Add category to the title tag

Below example adds category in the meta title tag for single post and page.

Add below code to your theme’s functions.php file

function add_category_to_meta_title( $title ) {
    if ( is_singular() ) {
        $new_title = array();

        if ( array_key_exists( 'title', $title ) ) {
            $new_title['title'] = $title['title'];
            unset( $title['title'] );
        }

        // add category
        $categories = get_the_category();
        if ( ! empty( $categories ) ) {
            $new_title['category'] = esc_html( $categories[0]->name );  
        }

        foreach( $title as $k => $v) {
            $new_title[$k] = $v;
        }

        return $new_title;
    }

    return $title;
}
add_filter( 'document_title_parts', 'add_category_to_meta_title' );

If you are using an SEO plugin, like Yoast, the above code may do not work for code conflictions. To solve that, define pre_get_document_title filter, so the above code will take effect.

function cust_document_title() {
    return '';
}
add_filter( 'pre_get_document_title', 'cust_document_title', 99 );

Conditional Headers, Sidebars and Footers

WordPress’s get_header() accepts a parameter to specify a specialized header to be included. Therefore, if you want to include headers according to conditions in a template file, simply pass a parameter specifying which header to be included to get_header() .

For example, below code includes header-home.php for the front page but normal header.php for the others in a template file.

if ( is_front_page() ) :
    get_header( 'home' );
else:
    get_header();
endif;

get_sidebar and get_footer() also accept such a parameter. They can be used to include a specialized sidebar or footer according to conditions.

Adding categories navigation to WordPress header

To show categories in the header part of your website, create a new division in the header where you want them to display.

Before you start, you’d better create a child theme to make customization instead of directly modifying a theme. Take the default “twentyseventeen” theme for example, add below code to file templates-parts/header/site-branding.php of the theme:

       <div id="category-list">
            <ul>
                <li><a title="Home Page" href="index.php">home</a></li>
                <?php wp_list_categories(array('title_li' => '', 'echo' => 1)); ?>
            </ul>
        </div><!-- .category-list -->

wp_list_categories is used to display the categories list. You can use many parameters to control its result, below are some of them:

  • title_li, text for the list title <li> element

  • echo, display markup marks.

  • separator, separator between links.
  • exclude, array of strings to exclude.

Add below code in style.css to style the categories:

/* category list in header */
#category-list {
    margin: 0;
    display: inline-block;
    float: right;
    vertical-align: middle;
    font-size: 14px;
    font-style: normal;
    text-transform: capitalize;
}
#category-list li {
    display: inline;
    list-style-type: none;
    padding: 0px 5px;
}
#category-list a:link, #category-list a:visited {
    color: #eee;
}
#category-list a:hover {
    opacity: 0.7;
}

The display and list-style-type make the list a horizontal layout.

Here is the header with categories:

categories in header