Guys! in this article i show you some important/use_ful code for theme development. And I’m sure you can make WordPress theme easily.
What’s important for WordPress theme
First of all create a folder then make one by one php file and paste given code. So lets start-
header.php (required)
<?php /** * The header for our theme * * This is the template that displays all of the <head> section and everything up until <div id="content"> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package TheKroyaardSPL */ ?> <!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"/> <link rel="profile" href="https://gmpg.org/xfn/11"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <header class="header-background"> <div class="site-branding"> <?php the_custom_logo(); ?> </div><!-- .site-branding --> </header><!-- #masthead --> <div class="main-menu-background"> <nav id="site-navigation" class="main-navigation" rel="nofollow"> <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu', ) ); ?> </nav><!-- #site-navigation --> </div> <main id="primary" class="main-container">
footer.php (required)
</main><!-- #main --> <footer id="colophon" class="site-footer" style="clear: both;" rel="nofollow"> <?php wp_nav_menu( array( 'theme_location' => 'menu-2', 'menu_class'=> 'footerdesign-left' ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'menu-2-1', 'menu_class'=> 'footerdesign-right' ) ); ?> </footer><!-- #colophon --> <?php wp_footer(); ?> </body> </html>
functions.php (required)
<?php
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_image_size( 'small-thumbnail', 640, 358, true );
add_theme_support( 'post-formats', [
'link',
'image',
'video',
'audio',
'standard'
] );
// This theme uses wp_nav_menu() in one location.
register_nav_menus(
array(
'menu-1' => esc_html__( 'Primary', 'thekroyaard_spl' ),
'menu-2' => esc_html__( 'secondary', 'thekroyaard_spl' ),
)
);
register_sidebar(
array(
'name' => esc_html__( 'Sidebar', 'thekroyaard_spl' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'thekroyaard_spl' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
add_theme_support(
'html5',
array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
)
);
// Add theme support for selective refresh for widgets.
add_theme_support( 'customize-selective-refresh-widgets' );
add_theme_support('custom-logo');
add_filter('jpeg_quality', function($arg){return 25;});
function thekroyaard_spl() {
wp_enqueue_style( 'styles', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'thekroyaard_spl' );
function pagination_nav() { global $wp_query; if ( $wp_query->max_num_pages > 1 ) { ?> <nav class="pagination" role="navigation"> <div class="nav-next" style="float: left; left: 0;"><?php previous_posts_link( '←' ); ?></div> <div class="nav-previous" style="float:right; right: 0;"><?php next_posts_link( '→' ); ?></div> </nav> <?php } }
index.php (required)
<?php get_header(); ?> <div class="site-main"> <?php if ( have_posts() ): ?> <?php while( have_posts() ): ?> <?php the_post(); ?> <div class="blog-post"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php if ( has_post_thumbnail() ) : $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'medium' ); ?> <div class="blog-post-thumb"> <a href="<?php the_permalink(); ?>"><img src="<?php echo $featured_image[0]; ?>" alt='' /></a> </div> <?php endif; ?> <?php the_excerpt(); ?> </div> <?php endwhile; ?> <?php else: ?> <p><?php _e( 'No Blog Posts found', 'nd_dosth' ); ?></p> <?php endif; ?> <div style="clear: both;"><!--This <div> acts as a separator--></div> </div> <?php get_footer(); ?>
page.php (required)
<?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site may use a * different template. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package TheKroyaardSPL */ get_header(); ?> <div class="single-main"> <?php while ( have_posts() ) : the_post(); <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="page-content"> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><!-- .entry-header --> <?php the_content(); ?> </div> </article><!-- #post-<?php the_ID(); ?> --> endwhile; // End of the loop. ?> <div style="clear: both;"><!--This <div> acts as a separator--></div> </div> <?php get_footer(); ?>
style.css (required)
/*! Theme Name: write_theme_name Theme URI: https://www.thekroyaard.com Author: thekroyaard S P L Author URI: https://www.thekroyaard.com Description: this theme created by thekroyaard SPL, Use this theme for more faster perfomance Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 or higher Text Domain: TheKroyaard Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready */
These are required files, If any file is missing then theme not work perfectly, So add every file on created WordPress’s theme folder.