Instructions for writing basic wordpress themes

Instructions for writing basic wordpress themes

is one of the best SEO source codes available today, not only that, it also supports a lot of good and simple ways. The problem in WordPress is just the interface and today I will help you approach it at the most basic level.

In this article, I will reuse the web the day I installed on localhost.

WordPress theme structure

First we need to understand the structure of the wp theme, which gives you a more general view of how wp works and writes more precise themes.

Create a basic wp theme including tag template and template.

Template tag

Is a function call code usually in the template’s template files. The simplest tag template you can imagine is <?php the_title (); ?> used to display the title of the page.

You can find lots of wp tag templates at http://codex.wordpress.org/Template_Tags. In addition, you can also create your own tag templates suitable for your theme anymore. I will have a tutorial later.

Template

As above, I also mentioned, the template it will contain many template tags, ie it is like a template so you can use the appropriate template tag to put in. It is easier to understand, it is like a static HTML, you use template tags instead of static information, you will get a wordpress template.

The structure of template files in the theme

So you already know what template and template tags are, how it will be organized now, see this section.

Please access the link “C:\xampp\htdocs\wordpress\w-content” This is a template theme that when you install wp you already have it. Please see all its files.

Now go back to the “C:\xampp\htdocs” path wp-content themes “create a folder called “mytheme”.

Next, create two files named “style.css” and “index.php”. You can also take a screenshot of your sample website saved in * .png format and name it “screenshot” then copy it here as well.

Now go to the interface at wp-admin and you will see your theme is available, you can activate this theme always.

Open the “style.css” file and add the following paragraph. Of course you can ignore it, but I recommend using it to mark your copyright.

/*
Theme Name: My Theme
Theme URI: http://tuandc.com
Author: Tuan DC
Author URI: http://tuandc.com
Description: huong dan lap tri wordpress can ban.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tuandc
Tags: wordpress, code php, seo.
*/

Next open the “index.php” file into the code below.

<?php get_header(); 

 if ( have_posts() ) :
 get_template_part( 'content');
 else :
 get_template_part( 'content', 'none' );
 endif; 

 get_sidebar(); 

get_footer(); ?>

Note:

get_header(); will help you get the content of the “header.php” file (I’ll create it in a while)

get_template_part( ‘content’); will get the content in the “content.php” file (I’ll create it in a while)

get_template_part( ‘content’, ‘none’ ); will get the content in the “content-none.php” file (I’ll create it in a while)

get_sidebar(); will get the contents of the file in “sidebar.php” (if not, it will take the default)

get_footer(); will retrieve the contents of the file in “footer.php” (later I’ll create it in a while).

If the above function checks the content and selects which file will be taken content. Assuming I don’t have any article yet, my website will display “content-none.php” file.

Next, create the file as above only “header.php”, “content.php”, “content-none.php”, “sidebar.php”, “footer.php”.

You can easily see these files imported by the “index.php” file from top to bottom, so that it is assembling into a complete website. Next, let’s blow the interface into the pages created above.

Create HTML and add necessary template tags.

Here I will write basic HTML so it will be missing a lot: D. You can use bootstraps to design a faster and more beautiful interface.

Code for header.php

First open “header.php” and code like the image.

<!DOCTYPE html>
<html>
 <head>
 <?php wp_head(); ?>
 </head>
 
 <body>

That’s it. <?php wp_head (); ?> Will help get the information you need into the <head> section of the web. If you want good SEO, install SEO plugins. Or if you do not want to use Plugin, I will have an article about this section.

Code for footer.php

Next, open “footer.php” and the code below.

<div style="text-align:center;">
 <h4>Bản quyền thuộc về ABC</h4>
</div>
<?php wp_footer(); ?>
</body>
</html>

The function <?php wp_footer (); ?> help display admin toolbar outside the page. If you don’t need it, you can leave it as well.

If you need a better theme design, please refer to the article: Design the website interface with bootstraps

Code for content.php

Open the file “content.php” and code as shown below

<div style="width:70%; float:left">
 
 <?php $getposts = new WP_Query(array(
 'post_type'=>'post',
 'post_status'=>'publish',
 'orderby' => 'ID',
 'order' => 'DESC')); ?>
 
 <?php while ($getposts->have_posts()) : $getposts->the_post();?>
 
 <?php the_post_thumbnail(full,array( "title" => get_the_title(),"alt" => get_the_title(),"class" => "class-img" ));?>
 <h2><?php the_title();?></h2>
 <p><?php the_excerpt();?></p>
 <a href="<?php the_permalink() ;?>">Xem thêm</a>
 
 <?php endwhile ; wp_reset_query() ;?>
 
 
</div>

I use WP_Query, is a query function of wordpress, to retrieve the required data:

  • Species: post.
  • Post status: posted (publish)
  • Sorted by: ID
  • Sort by descending (ie the latest post will be displayed at the top).

Use the while loop to retrieve posts. and insert tag templates. Specifically:

  • the_post_thumbnail used to get thumbnail images. I will have a specific article about this.
  • the_title used to get the title of the article.
  • the_excerpt Use to get the description.
  • the_permalink to get links to articles.
  • End the loop remember to set the function wp_reset_query(); to be able to use WP_Query in another query otherwise there will be errors.

Code for sidebar.php

Next, open the “sidebar.php” file and the code below.

<div style="width:30%; float:left">
 
 <?php if ( is_active_sidebar( 'sidebar-1' ) ) :
 dynamic_sidebar( 'sidebar-1' );
 endif; ?>
 
</div>

Here I use dynamic_sidebar which means taking a sidebar containing many widgets. I’ll guide you down below …

Write the function functions needed in file functions

WordPress has a lot of tempalate tags that have the necessary functions so that we can deploy template files quickly. But there are many complex requirements or requirements to fit your themes, you can create separate functions.

For example, wp_nav_menu() will produce an unwanted html code because it is not suitable for your template so I can use it to get the data and produce another suitable html code with my template more.

And now we will create a file called “functions.php” and proceed to include the function code as follows.

Enable post thumbnails for posts.

<?php
 add_theme_support( 'post-thumbnails' );

Usually this feature will be hidden and you can not find any place to turn the avatar image up, so please add this code. This section shows the themes we support thumbnail and requires activation of this feature in the text editor.

Create widget storage for created sidebar

I created a “sidebar.php” file and got a sidebar with id “sidebar-1”. However, when entering the interface you will not see the widget anywhere. That’s because your themes haven’t created any sidebar yet. To create a sidebar, use the “register_sidebar” function and the code below.

function sideright_widgets_init() {

register_sidebar( array(
 'name' => 'Witget_side',
 'id' => 'sidebar-1',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ) );
 
}
add_action( 'widgets_init', 'sideright_widgets_init' );
  • Name is the name of the sidebar. When you enter the widget, there will be a section for witget, just drag and drop witget here.
  • ID is a code so you can call it themes. It can’t be duplicated. The call to it is dynamic_sidebar (‘sidebar-1’); I have written in sidebar.php.
  • Before_widget: is the start tag for widgets.
  • After_widget: is the end of widgets tag.
  • similar before_title and after_title apply to the title. You can add class to the before tags to display in accordance with the themes.

Create remaining files like single, search, page, archive, …

To complete a news site you need to create more files. Specifically:

Create single.php file – display a specific article

Please create a file named “single.php” and code the following.

<?php get_header(); ?>

 <div class="content-wrap">
 <h1 class="title"><?php the_title() ;?></h1>
 
 <?php while ( have_posts() ) : the_post(); ?>
 <p class="exce"> <?php the_excerpt();?> </p>
 <div class="content">
 <?php the_content(); ?>
 </div>
 <?php endwhile;?>
 </div>
 
<?php get_footer(); ?>

In the file I will also import the header and footer as the index page. Inside, simply insert the tag templates into html tags so that it displays the content.

The while loop is used to get details of the content, description, …. You can re-design it beautifully.

Create files search.php, tag.php and archive.php – display searches and categories

Usually I create these 3 pages exactly the same because they all have the same features and sometimes have the same interface. You can code 1 and copy and rename it. My code is as simple as below.

<?php get_header(); ?>

<div class="content-wrap">
 
 <?php while ( have_posts() ) : the_post(); ?>
 <div style ="width:33%; float: left">
 <?php the_post_thumbnail(full,array( "title" => get_the_title(),"alt" => get_the_title(),"style" => "width:100%; height:auto" ));?>
 <h2><?php the_title();?></h2>
 <p><?php the_excerpt();?></p>
 <a href="<?php the_permalink() ;?>">Xem thêm</a>
 
 </div>
 <?php endwhile;?>
 
 <div class="pages">
 <?php previous_posts_link( '&laquo; TRƯỚC', $loop->max_num_pages) ?>
 <?php next_posts_link( 'TIẾP &raquo;', $loop->max_num_pages) ?>
 </div>
 </div>
 
<?php get_footer(); ?>

So it is done.

The “page.php” file is the same for you. You can reuse single.php files to copy and rename. So basically, you have completed your website already.

There are some things like author.php, 404.php, .. then you can find out more, I think that doing the above pages is not a problem. If you need help, please comment below.

If you find it useful, don’t forget to click like and share.

Related post
View