At the last time, in “Create Original Theme in WordPress 1“, I created the simplest minimum theme “techblog”. I’ll create practical WordPress theme from now on.
GOAL
To design the configuration of the WordPress site.
the configuration of pages
This is the page transition diagram. The top page is home. Pages “Home”, “About”, “Links” and “Posts(Post List)” can be accessed directly with main menu.
This is the construction of each page and links among them.
Detail design of each page
Home page
This page is used for “Home”.
Posts page
This page is used for “Posts (all posts)”, the result searched by categories and the result searched by words.
Single Page
This page is used for “About”, “Links” and the page for each single posts.
Side bar
Some of these items can be added easily by using Plugins.
style.css is the style sheet for the site. style.css should have infromation about the theme. Please check “Main Stylesheet (style.css)” in wordpress.org for details.
/*
Theme Name: Techblog
Theme URI: #
Author: Nako
Author URI: https://s-nako.work
Description: This is the simplest theme for engineer's technical blog
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techblog
Domain Path: /languages/
Tags: blog, news,
This theme, like WordPress, is licensed under the GPL.
*/
body {
color: #6B6B6B;
background-color:#DADADA;
font-family: 'Open Sans', sans-serif;
line-height: 1.7;
font-size: 14px;
}
The information in style.css is displayed in Appearance >Themes.
functions.php
functions.php is function set for the site. I don’t use any original function at this time.
<?php
/**
* techblog functions and definitions
* @package Techblog
* @since Techblog 1.0
*/
if ( ! defined( 'TECHBLOG_VERSION' ) ) {
// Replace the version number of the theme on each release.
define( 'TECHBLOG_VERSION', '1.0.0' );
}
Install the created theme
Put the directory where index.php, style.css and functions.php is into the themes directory “xampp\htdocs\wordpress\wp-content\themes”.
You can activate the theme you created in the Appearance >Themes.
I’d like to create my original theme for WordPress. This is the preparation for development of WordPress in XAMPP.
GOAL
To create develop environment for WordPress development in XAMPP.
Environment
Windows10 XAMPP 7.4.10
If you don’t have XAMPP, please install it first according to “Installation of XAMPP“. And If you’ll use MariaDB in a production environment, make it secure by setting password according to “How To Set MySQL Password in XAMPP“.
add_action( 'wp_head', 'header_customize');
function header_customize() {
$header_tags = <<<EOM
<!--ADD YOUR HTML HERE such as <script src="..."></script>-->
EOM;
echo $header_tags;
}
The argument function header_customize() is added when wp_head() is called in functions.php of parent theme as below.
<?php wp_head(); ?>
You can see the code written in the source of your website.
Change the default font of your theme in WordPress to google fonts.
Environment
WordPress 5.5.1 Theme: Sparkling (I have child-theme sparkling-child)
What is Google Fonts?
Google font is abundant font set that can be used in websites without install and upload. It can be used by just putting code in your HTML.
We believe the best way to bring personality and performance to websites and products is through great design and technology. Our goal is to make that process simple, by offering an intuitive and robust collection of open source designer web fonts.
To understand What child themes in WordPress is and create it
Environment
WordPress 5.5.1 Theme: Sparkling
What is Theme and child-theme in WordPress
What is theme?
WordPress Themes can provide much more control over the visual presentation of your content and other data on your WordPress site, as well as behavior of certain site’s elements while interacting with visitors.
And you can customize the themes from Appearance>Customize.
What are themes made of?
The following is an example of file construction of the theme. You can see these files from Appearance>Theme Editor.
Required files
index.php: the main template file
style.css
Additional files
PHP files
template files such as header.php, page.php, sidebar.php and 404.php
Localization files: this is used for translating an internationalized theme
CSS files
bootstrap.css, flexslider.css, etc
Graphics
JavaScript
customizer.js, functions.js, flexslider-custom.js, etc.
Text files
license.txt, readme.txt, etc.
What is child-theme?
As indicated in the overview, a child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files.
Create a new directory in wp/wp-content/themes and named it “<theme name>-child”. In my case, the name is sparkling-child.
2. Create a stylesheet: style.css
Create style.css in <theme name>-child directory. And write information at the top of style.css as below. “Theme URI” is the path to the child theme in the server and “Template” is the directory name of the parent theme. “Theme Name” needs to be unique.
/*
Theme Name: Sparkling Child
Theme URI: http://example.com/sparkling-child/
Description: Sparkling Child Theme
Author: Nako
Author URI: http://example.com
Template: sparkling
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog
Text Domain: sparklingchild
*/
/* Add your css here*/
3. Enqueue stylesheet
Create functions.php in <theme name>-child directory. And write the function to enqueue stylesheets of the parent theme.
If the parent theme has some css in addition to ‘/style.css’, you should contain them in theme_enque_styles(). If the stylesheet of the child theme doesn’t loaded automatically, you should enqueue ‘child-style’ in theme_enque_styles().
4. Install and customize child theme
Open Appearance>Themes in Dashboard.
Then select the child-theme you created and customize it.
5. Activate child theme
Appendix
The order of style sheet to read will changed if child-theme is added. So you should move some additional css from the parent style.css to child style.css.
When only parent theme is used, sparkling/style.css is loaded after loading font (Google Fonts). You can use the font in parent sparkling/style.css.
When child theme is used in addition to parent theme, sparkling/style.css is loaded at first and font (Google Font) is load after that. You can’t use the font in parent sparkling/style.css.
So you should put css related to the font in sparkling-child/style.css or read every stylesheet in sparkling-child/function.php.
The page size is expanded by mathematical formula. (For example, an article “What is Hermite interpolation?” has long formula)
How I found it…
In my case, though the width of main html is fit to the display the width of the whole page is expanded for some reasons. And it doesn’t occur when single article is opened (you can see the size of background is fit to the display as below).
I found that the change of the width happens with a time lag after main header and footer are loaded. I captured display and find that the change happened just after “Typesetting math” process completed.
This process is creation of the formula with the greatly useful plugin “MathJax-LaTeX“. When “MathJax-LaTeX” plugin is deactivated, the size of the page fit to the display.
