• By F5 Buddy
• WordPress Development

Basics of WordPress theme Development for Beginners

Are you trying to get the most out of WordPress Theme Development? Well, it’s a good idea to develop your own website or pursue a bright career as a WordPress Developer. Also, if you want to sell your themes, getting theme development right is the only way. 

No worries if you’re new to WordPress. Everyone learns from scratch, and so you will, too. 

Let’s get started.

Files

You can find WordPress themes in the subdirectories of the WordPress Theme Folder. It consists of the necessary files for WordPress Theme Development. 

A custom WordPress theme needs only two files – index.php and style.css. Other files that can be included are:

1. header.php and footer.php – includes header and footer on your page
2. single.php – used for all types of single posts and post types
3. page.php – used for all types of single pages
4. attachment.php – includes attachments
5. 404.php – to be used when no content is found on your page
6. home.php – display blog posts
7. front-page.php – renders the first page of the site
8. archive.php – displays an archive

Ensure that every file that displays a post type must have two functions – get_header() in the beginning and get_footer() at the end. For specific headers and footers, pass a string to these functions. 

Template Hierarchy

WordPress themes consist of a lot of files, and it’s essential to understand those files if you’re really willing to learn WordPress Website Development. 

All of these WordPress files share three things in common: 

• Their names end with .php
• There’s a Loop inside them (different versions)
• They contain HTML and PHP code mostly

WordPress matches every query string to its type to look for the page being requested. According to the order in the template hierarchy, it selects the template. It then looks for the template file names in the theme’s directory and picks the template that matches first. 

WordPress will try to load the template you want, but if it cannot, it will resort to index.php. For a single post, WordPress will find,

• single-$id
• single-$posttype-$slug
• single.php
• singular.php
• index.php

Hence, you must include the index.php file in your WordPress Theme Development. 

Loop

WordPress uses a default mechanism called Loop to output posts through the template files of themes. The number of posts retrieved is found by the number of posts to show per page. Inside the loop, WordPress retrieves every post that needs to be displayed on the current page and then formats it according to the theme. The loop then extracts the data for every post from the database of WordPress and embeds essential information on the place of the template tag. 

You can also use a loop for:

• displaying post excerpts and titles on the homepage of your blog
• displaying content and comments on a single post
• displaying content on an individual page using a template tag, and
• displaying data from custom fields and custom post types. 

A Template Tag is a function that you can use inside and outside of a loop. These tags are stored in the wp-includes directory and are of 9 different types. 

• wp-includes/general-template.php
• wp-includes/author-template.php
• wp-includes/bookmark-template.php
• wp-includes/category-template.php
• wp-includes/comment-template.php
• wp-includes/link-template.php
• wp-includes/post-template.php
• wp-includes/post-thumbnail-template.php
• wp-includes/nav-menu-template.php

The Code is Look Like This Just Add Php Start and End Before and After the Code.

while( have_posts() ) {
the_post(); // set the next post in the loop as the current post

//Display the Title
the_title();
}
}

Functionality

Some themes of WordPress have some specific functionalities. The file that WordPress fetches from the theme is functions.php. This includes the unique features that you add to your WordPress theme, making it more modular, extensible, and functional. 

A functions.php file is beneficial because:

• it doesn’t require any header text
• you can find it in the theme’s subdirectory in wp-content/themes
• it executes only when the file is in the active theme’s directory
• you can apply it only to the active theme (theme changes, features can be used long)
• numerous code blocks can be used for different purposes. 

Using functions.php, you can:

1. make use of WordPress hooks
2. use WordPress features with add_theme_support()
3. design functions to use in multiple template files

The Code is Look Like This Just Add Php Start and End Before and After the Code.

'secondary' => __('Secondary Menu', 'myfirsttheme' )
));
}

add_action( ‘after_setup_theme’, ‘my_theme_function’ );

Styles & Scripts

While creating WordPress themes, you can include additional stylesheets and JavaScript files. The themes and plugins on your WordPress website must load the stylesheets and scripts using the WordPress method to maintain the harmonious working of the site. It is easy to add scripts and stylesheets to WordPress.  

You will create a function to enqueue your scripts and styles. Then WordPress will create a handle and a path to find your file and dependencies (like jQuery). After this, you have to use a hook for inserting your scripts and styles. 

Enqueuing Styles and Scripts

To enqueue styles – wp_enqueue_style( $handle, $src, $deps, $ver, $media );

To enqueue scripts – wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);The Code is Look Like This Just Add Php Start and End Before and After the Code.


// Example of another CSS: inside the theme folder /css/ without any dependencies (false), version: 1.1 and for all media
wp_enqueue_style( 'style-css-2', get_template_directory_uri() . '/css/style-2.css', false, '1.1', 'all' );

// Enqueueing Script inside the theme folder /js/ with jQuery dependency. Version 1.1 and enqueued in the footer (true)
wp_enqueue_script( ‘script’, get_template_directory_uri() . ‘/js/script.js’, array ( ‘jquery’ ), 1.1, true);
}

Sidebars

You can use sidebars to register in our theme and add widgets to them. You have to define them under the functions.php file. 

Register the sidebar using the function register_sidebar() and hook it inside the action widgets_init.

WordPress theme development is incomplete without the fundamentals that govern the process. If you want to know more or get your WordPress website developed, contact F5 Buddy. We employ a team of Expert WordPress developers to help you. The Code is Look Like This Just Add Php Start and End Before and After the Code.

'id' => 'main-sidebar',
'description' => __( 'Sidebar Description', 'yourtextdomain' ),
'before_widget' => '

• ‘,
  ‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
}