Custom WordPress Theme Development
Did you know that more than 35% of all the websites are designed with WordPress?
If the premade themes don’t cut it for you, or you want something unique, you will need to develop a custom WordPress theme. If you know HTML, CSS, and some basics of PHP, you can make one yourself; otherwise, you will need an agency like ours. A WordPress theme consists of the index.php template file and a stylesheet, and everything else is optional. You will want to start with a fresh install of WordPress, locally or on a server and follow along.
#1 style.css
The stylesheet defines the theme for WordPress and needs to be in the root directory of your theme. It’s important to name your main stylesheet tostyle.css; next, you’ll need to add a few lines of comments to the file.
/* Theme Name: Kontra agency blog example Theme URI: http://www.... Description: Theme made for kontra.agency blog Author: Ivan Jurkovic Version: 1.0 */
Change the name, author, description, and so on.
#2 Template file
WordPress theme must contain the main index.php template. This template is a default theme template, and if there is no other template in use, it will fall back to this one. When it comes to developing a custom WordPress theme, there is a whole template hierarchy. Every template usually includes header.php and footer.php, which looks the same on all the templates/pages.
An example of a header.php file.
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title();?></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<nav>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>
</header>
language_attributes() – Prints the language type for the <html> tag. wp_title() – Simply returns the title of the page. wp_head() – Prints the javascript links and other header stuff. All the tags above and many more of them are well documented in the WordPress Codex.
footer.php is a more simple file; it contains your custom content and a wp_footer() function used by WordPress, often for plugins and scripts.
<footer> <!-- custom content --> </footer> <?php wp_footer(); ?> </body>
And finally, the main template file index.php
<?php get_header(); ?>
<h1>title</h1>
<div id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?></p>
<?php endwhile; else: ?>
<p>Sorry, no posts we're found.</p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
The index.php includes header.php with get_header() function, and the same goes for the footer. Then we have a WordPress loop which looks for the posts and for every single post, it prints out the title, time, excerpt, category and link.
Our custom WordPress theme is ready to activate.
Your simple theme should be ready to activate and test. Next step will be to make a front page template file and name it front-page.php according to the template hierarchy. For a custom template like contact page, you can make file template-contact.php with the first line of comment :
<?php /* Template Name: Contact Page Template */?>
This is just a start, and now you can get back to all these templates and add content like images and texts. Styling it all with a style.css you can make a really beautiful website. If you think this is too much for you, take a look at some already made themes.
