[WORDPRESS] Prevent Changes from Being Overwritten During Theme Updates

When thinking about website design, you'll often find yourself wanting to customize themes.

If you directly modify source code files like style.css or functions.php within the theme folder, your changes will be overwritten by new files when the theme is updated, and you'll lose your modifications.

However, continuing to use a theme without updating its version is not good from a security standpoint.

To prevent your changes from being overwritten, you should create a "child theme."

HOW TO CREATE A CHILD THEME

You can create it by setting up folders and files on your server using an FTP client or similar tool.

Create a 'mywiki-child' folder under wp-content/themes/.

Then, place functions.php and style.css inside it.

Although the diagram above also shows an 'image' folder, you should include any files you wish to customize as needed.

STYLE.CSS DESCRIPTION

For "Theme Name," enter the folder name of the child theme you created.

For "Template," enter the folder name of the parent theme.

/*
Theme Name: mywiki-child
Template: mywiki
*/

/*
 Theme Name:   mywiki-child
 Theme URI:    http://example.com/mywiki-child/
 Description:  MyWiki Child Theme
 Author:       hogehoge
 Author URI:   http://example.com
 Template:     mywiki
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         right-sidebar, responsive-layout
 Text Domain:  mywiki-child
*/

FUNCTIONS.PHP DESCRIPTION

It will generally work even if it's empty. However, it is now recommended to include the code for loading the parent theme's style.css in functions.php.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

CASES WHERE THE THEME DESIGN BREAKS

With only the code described above, some themes might have broken designs. This is usually due to them using multiple stylesheets.

In such cases, dependencies are usually defined in the parent theme's functions.php file.

For mywiki: The following is described in the parent theme's functions.php

add_action( 'wp_enqueue_scripts', 'mywiki_theme_setup' );
function mywiki_theme_setup(){

 wp_enqueue_style( 'google-fonts-open-sans','//fonts.googleapis.com/css?family=Open+Sans', array(), false,null );
 wp_enqueue_style( 'google-fonts-lato', '//fonts.googleapis.com/css?family=Lato', array(), false,null );
 wp_enqueue_style( 'google-fonts-cabin', '//fonts.googleapis.com/css?family=Cabin', array(), false,null );

  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), false,null );

  wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), false, 'all' );
  wp_enqueue_style( 'mywiki-style', get_stylesheet_uri());
  wp_enqueue_script( 'bootstrap',  get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '3.0.1');
  wp_enqueue_script( 'mywiki-ajaxsearch',  get_template_directory_uri() . '/js/ajaxsearch.js', array(), '1.0.0');
  wp_enqueue_script( 'mywiki-general',  get_template_directory_uri() . '/js/general.js');
  wp_localize_script( 'mywiki-general', 'my_ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
  if ( is_singular() ): wp_enqueue_script( 'comment-reply' ); endif;
}

In the example above, 'mywiki-style' is loaded last, so writing the following code will make it work correctly.

mywiki-child's functions.php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'google-fonts-open-sans','//fonts.googleapis.com/css?family=Open+Sans', array(), false,null );
  wp_enqueue_style( 'google-fonts-lato', '//fonts.googleapis.com/css?family=Lato', array(), false,null );
  wp_enqueue_style( 'google-fonts-cabin', '//fonts.googleapis.com/css?family=Cabin', array(), false,null );
  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), false,null );
  wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.css', array(), false, 'all' );
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

This time, I've extracted all the CSS settings so that they can be applied elsewhere, but it will work correctly even if you only include the necessary dependencies.

CUSTOMIZING WITHIN A CHILD THEME

The child theme's functions.php is loaded just before the parent theme's functions.php.

For other files, such as header.php, if they exist in the child theme, those will be used preferentially.

RECOMMENDED WORDPRESS BOOKS

While I do read books, I've found that implementing things in practice leads to a much deeper understanding.

I recommend reading books about WordPress itself and about PHP.

Understanding HTML and CSS will broaden your capabilities, but the great thing about WordPress is that you can manage the design aspect just by relying on templates.

The Easiest WordPress Introduction Course (Japanese) Paperback

WordPress basics. It carefully explains everything from installation.

There are many books available, so any would do, but I chose this one because it's recently published and the author is beautiful.

For those seriously developing. It introduces real-world examples, so it can also be used for brainstorming ideas.