Skip to content Skip to sidebar Skip to footer
Home / Blogging / Tips and Tricks

How to Insert Snippets in a WordPress Theme

How to Insert Snippets in a WordPress Theme: On this occasion, I will explain how to insert a snippet on the theme file. There are two files in a WordPress theme that are modified frequently, namely style.css and function.php.

Theme Structure

A WordPress theme consists of a collection of files. We can modify the theme by changing the code contained in these files.

Every WordPress theme has a different structure, some are simple, some are complex. However, usually, WordPress themes should have at least the following files:

Other standard files in the theme include:

  • index.php
  • single.php
  • page.php
  • archive.php
  • search.php
  • author.php
  • etc.

For more details on the theme structure, please see the official WordPress website.

Modify Themes

The codes contained in the WordPress theme can be modified, even if you are not a programmer.

If you surf a lot, there are lots of people sharing code snippets (snippets) that can be applied to the theme. One of them is in this blog. You just copy and paste the snippet in the theme you are using.

Often a beginner finds a snippet for a particular function, but it happens error when pasted in the theme. It can happen because of how to insert snippet wrong.

How should it be snippet pasted?

Insert snippet on style.css

Cascading Style Sheets or CSS is not actually a programming language, but a set of commands to set the appearance of HTML.

File style.css in WordPress themes written using the CSS command. This file functions to set the appearance of the theme, such as type font, layout, colors, decorations, and other rules.

File style.css must begin with a description of a theme. For example, here is the description style.css on the WP Journal theme.

/*  Theme Name: Jurnal WPURI: https://jurnalwp.comDescription: Dibuat khusus untuk Jurnal WPVersion: 1.0Author: Cecep Risnandar*/

Well, if you want to add CSS code to the theme, make sure it is inserted after the theme description text.

For example, I’ll insert CSS that sets the font type and size as follows:

body {	font-size: 62.5%; /* Resets 1em to 10px */	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;	}

She was snippet The above CSS is applied to the file style.css WP Journal theme, then the position is like this:

/*  Theme Name: Jurnal WPURI: https://jurnalwp.comDescription: Dibuat khusus untuk Jurnal WPVersion: 1.0Author: Cecep Risnandar*/body {	font-size: 62.5%; /* Resets 1em to 10px */	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;	}

Insert snippet on function.php

File function.php works like a plugin that can manage functions in WordPress.

Commands in the file function.php apply well to the front end of the page the visitor viewed, or the back end of the page used by registered users to manage the website, also known as the admin area.

Fill in the file function.php written in PHP, therefore it must start with ‘<?php‘and ends with’?>‘.

If you want to add a snippet on file function.php make sure it is in the PHP tag.

For example, I want to register a function register sidebar the following:

add_theme_support( 'automatic-feed-links' );if ( function_exists('register_sidebar') )	register_sidebar(array(		'before_widget' => '<li>',		'after_widget' => '</li>',		'before_title' => '',		'after_title' => '',	));

When applied to files function.php will be like this:

<?php/* Sisipkan snippet setelah ini */add_theme_support( 'automatic-feed-links' );if ( function_exists('register_sidebar') )	register_sidebar(array(		'before_widget' => '<li>',		'after_widget' => '</li>',		'before_title' => '',		'after_title' => '',	));/* sisipkan snippet sebelum ini */?>

In practice it can be a file function.php in the theme you are using is full of code.

If the conditions are like that, you can add a snippet at the very end of the very beginning. Or, it could be in the middle but make sure the snippet that you paste does not cut the existing code.