Hello, today we are going to learn how to create a WordPress theme using PHP + HTML + CSS + Javascript and we won’t die trying.
We are going to create a foundation upon which we can build different themes, and we’ll also use Bootstrap as a design library.
First, we need to have WordPress installed on our machine. In my case, I’m using Docker.
Now let’s start creating the theme. To do this, we’ll create the folder for our theme within wp-content/themes/. In my case, I’ll name it customtheme.
Now let’s add the different base files for our theme.
We create style.css with the following content:
/*
Theme Name: My Custom Theme
Description: A custom theme for my site.
Version: 1.0
Author: Your Name
*/
/* Global styles can go here */
body {
background-color: #f8f9fa;
color: #343a40;
}
.container {
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 5px;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h2 {
color: #007bff;
}
.text-muted {
font-size: 14px;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
Here we will add the different styles for our theme.
Now let’s create the index.php file.
<?php get_header(); ?>
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
?>
<article <?php post_class('mb-5'); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="text-muted"><?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="btn btn-primary">Read more</a>
</article>
<?php
endwhile;
else :
?>
<p>No posts found</p>
<?php endif; ?>
</div>
<div class="col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
We have created an example, using different available WordPress hooks and actions to display the different sections. It’s not complicated, we just need to place each element where it belongs (here is a list of all of them https://developer.wordpress.org/plugins/hooks/)Reading time: 2 minutes
Hello, today we are going to learn how to create a WordPress theme using PHP + HTML + CSS + Javascript and we won’t die trying.
We are going to create a foundation upon which we can build different themes, and we’ll also use Bootstrap as a design library.
First, we need to have WordPress installed on our machine. In my case, I’m using Docker.
Now let’s start creating the theme. To do this, we’ll create the folder for our theme within wp-content/themes/. In my case, I’ll name it customtheme.
Now let’s add the different base files for our theme.
We create style.css with the following content:
/*
Theme Name: My Custom Theme
Description: A custom theme for my site.
Version: 1.0
Author: Your Name
*/
/* Global styles can go here */
body {
background-color: #f8f9fa;
color: #343a40;
}
.container {
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 5px;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h2 {
color: #007bff;
}
.text-muted {
font-size: 14px;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
Here we will add the different styles for our theme.
Now let’s create the index.php file.
<?php get_header(); ?>
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
?>
<article <?php post_class('mb-5'); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="text-muted"><?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>" class="btn btn-primary">Read more</a>
</article>
<?php
endwhile;
else :
?>
<p>No posts found</p>
<?php endif; ?>
</div>
<div class="col-md-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
We have created an example, using different available WordPress hooks and actions to display the different sections. It’s not complicated, we just need to place each element where it belongs (here is a list of all of them https://developer.wordpress.org/plugins/hooks/)
Now let’s create the header.php file.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
And footer.php
<?php wp_footer(); ?> </body> </html>
Finally, let’s create the functions.php file and add the styles of our theme and Bootstrap
<?php
function customtheme_enqueue_styles() {
wp_enqueue_style('customtheme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'customtheme_enqueue_styles');
function enqueue_bootstrap() {
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap');
And now let’s go to our WordPress and we will see an inactive theme without a photo.
We activate it, and we can see the result:
It’s nothing extraordinary, but it’s a foundation that we can use to improve the theme and create a new one.
Now we create the functions.php file and add the styles of our theme and Bootstrap:
<?php
function customtheme_enqueue_styles() {
wp_enqueue_style('customtheme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'customtheme_enqueue_styles');
function enqueue_bootstrap() {
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap');
And now we go to our WordPress and we will see a theme without activation and without a photo.
We activate it, and we can see the result:
It’s nothing extraordinary, but it’s a foundation that we can use to improve the theme and create a new one.
It’s nothing extraordinary, but it’s a foundation that we can use to improve the theme and create a new one.
