Adding content and template files

After showing how to create the theme and add the style.css file header in the previous article , we can move on to the next step.
Before creating the first template files, we will have to insert in the functions.php file some lines of code through which we will add the functionalities we need in our theme. To start we create a menu:

function custom_navigation_menus() {
	$locations = array(
		'Meniu' => __( 'Meniu', 'text_domain' ),
	);
	register_nav_menus( $locations );
}
add_action( 'init', 'custom_navigation_menus' );

After creating the menu, we can add a sidebar, using the following code:

function custom_sidebars() {
    register_sidebar( array(
        'name'          => __( 'Primary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
 

}
add_action( 'widgets_init', 'custom_sidebars' );

Next, we can add the basic theme settings:

//latime continut
if ( ! isset( $content_width ) )
	$content_width = 1200;

// Inregistrare setari generale
function custom_theme_features()  {

	// Tipurile de formate disponibile in cadrul postarilor
	add_theme_support( 'post-formats', array( 'status', 'quote', 'gallery', 'image', 'video', 'audio', 'link', 'aside', 'chat' ) );

	// Activarea imaginilor
	add_theme_support( 'post-thumbnails', array( 'post', ' page' ) );

	 // Dimensiune imagini
	set_post_thumbnail_size( 430, 300, true );

	// Fundalul paginilor (daca optati pentru imagine, stergeti codul de culoare si introduceti calea imaginii pe care vreti sa o utilizati)
	$background_args = array(
		'default-color'          => '#ffffff',
		'default-image'          => '',
		'default-repeat'         => '',
		'default-position-x'     => '',
		'wp-head-callback'       => '',
		'admin-head-callback'    => '',
		'admin-preview-callback' => '',
	);
	add_theme_support( 'custom-background', $background_args );

	// Aici puteti adauga o imagine implicita pentru sectiunea header
	$header_args = array(
		'default-image'          => '',
		'width'                  => 1000,
		'height'                 => 400,
		'flex-width'             => false,
		'flex-height'            => false,
		'uploads'                => true,
		'random-default'         => false,
		'header-text'            => false,
		'default-text-color'     => '',
		'wp-head-callback'       => '',
		'admin-head-callback'    => '',
		'admin-preview-callback' => '',
		'video'                  => true,
		'video-active-callback'  => '',
	);
	add_theme_support( 'custom-header', $header_args );

	// Implementare suport pentru html
	add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

	// Introducere titlu site (tag)
	add_theme_support( 'title-tag' );

	// Adaugare optiuni de stilizare in editorul WordPress
	add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'custom_theme_features' );

If you want to add other CSS files, you can save them individually as follows:

function custom_styles() {
	wp_register_style( 'numefisier', 'aici-scrii-calea-fisierului', false, false, 'all' );
	wp_enqueue_style( 'numefisier' );
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );

We will also add a search bar:

function my_custom_widget_area_init() {
    register_sidebar( array(
        'name'          => 'Top Nav - Search',
        'id'            => 'top_nav_search',
        'before_widget' => '',
        'after_widget'  => '',
        'before_title'  => '',
        'after_title'   => '',
    ) );
}
add_action( 'widgets_init', 'my_custom_widget_area_init' );

After entering this content in the functions.php file, we can start editing the search-form.php, header.php, sidebar.php and footer.php files.

Search-form.php file

In this file we will enter a form through which users will be able to search the content of the site.

<div>
    <?php if ( is_active_sidebar( 'top_nav_search' ) ) : ?>
    <div class="search-bar"><?php dynamic_sidebar( 'top_nav_search' ); ?></div>
    <?php endif; ?>
</div>

The header.php file

This file will contain the site header. The html structure includes the <head> section, followed by the opening of the <body> tag, after which we will introduce the content we want visible to users on all pages, at the top.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header">
		<title>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'nume' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo('descrierea site-ului'); ?></h2>
		</title>

		<nav class="main-navigation">
			<?php
			wp_nav_menu(
				array(
					'theme_location' => 'primary',
					'menu_class'     => 'Menu',
				)
);
?>
		</nav>

		<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'nume', 'display' ) ); ?>" /></a>
		<?php endif; ?>
	</header>
	<div id="main" class="wrapper">

Here we will offer the possibility to display the site title, the main menu, the description and a default image of the header. If we use a stylized template in CSS and Bootstrap, we will invoke between the <head> and </head> tags the path to the respective files, using the method:

wp_enqueue_style( 'nume-fisier', get_template_directory_uri() . '/calea/fisierului.css',false,'1','all');

Footer.php file

In this file we will introduce the content visible to the users for the bottom of the pages of the site followed by the closing part of the <body> tag.

</div> // inchiderea div-ului cu clasa "wrapper"
<footer id="colophon" class="site-footer">
			<div class="site-info">


				<a href="<?php echo esc_url( __( 'aici se introduce textul pentru copyright', 'numele temei' ) ); ?>">
</a>

		</footer>

</div>
	<?php wp_footer(); ?>

And last but not least, the sidebar.php file

<div id="sidebar-primary" class="sidebar">
    <?php dynamic_sidebar( 'primary' ); ?>
</div>

You can see the rest of the tutorial in the next article .