By the end of this tutorial you will have learned how to create a child theme on your WordPress installation. You will also have learned how to run your own custom PHP inside of WordPress.
Create a child theme
You’re probably going to dismiss this instruction because you can get away with not doing this: Make sure you create a child theme first.
There are a lot of blog posts on how to create child themes in WordPress. Most of them are out of date.
The best tutorial on creating child themes in WordPress was written by Nick Roach. Follow the instructions on his blog to get this done before moving on.
Create a new page in WordPress
WordPress puts restrictions on where it will allow PHP to be run. You will need to create a template page. Please follow the instructions below to create a new page:
- Log into WordPress.
- Go to the Dashboard.
- Create a new page.
- Save the new page.
There, you’ve finished setting up a new page. Next we will go to the file browser and create the template file that your new page will point to.
Open your file browser and find the location of your wordpress installation. Mine is: /home/david/Documents/website
Navigate to the folder with your current theme. This should be the child theme you created in the first part of this blog post. Mine is: /home/david/Documents/website/wp-content/themes/hemingway-child
I copied the file page.php from the parent theme into this directory for my child theme. Let’s rename page.php to templatePage.php.
Remove the page’s content
The only parts we need of this page are the scaffolding. Let’s remove the following code from templatePage.php:
<div class="post-content"> <?php the_content(); ?> <?php if ( current_user_can( 'manage_options' ) ) : ?> <?php edit_post_link( __('Edit', 'hemingway') ); ?> <?php endif; ?> </div> <!-- /post-content -->
Add your own PHP
Now templatePage.php should look like this. I’ve added comments to show where the content of the page should be put in the updated page. Be sure to wrap your PHP code with PHP tags!
<?php get_header(); ?> <div class="wrapper section-inner bottom-margin"> <div class="content left"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="posts"> <div class="post"> <?php if ( has_post_thumbnail() ) : ?> <div class="featured-media"> <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"> <?php the_post_thumbnail('post-image'); ?> <?php if ( !empty(get_post(get_post_thumbnail_id())->post_excerpt) ) : ?> <div class="media-caption-container"> <?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?> </div> <?php endif; ?> </a> </div> <!-- /featured-media --> <?php endif; ?> <div class="post-header"> <h2 class="post-title"><?php the_title(); ?></h2> </div> <!-- /post-header --> <!-- START CONTENT --> <!-- This is where we will put our code. Be sure to wrap your PHP with php tags! --> <?php echo "Hello World!"; ?> <!-- END CONTENT --> </div> <!-- /post --> <?php if ( comments_open() ) : ?> <?php comments_template( '', true ); ?> <?php endif; ?> </div> <!-- /posts --> <?php endwhile; else: ?> <?php _e("We couldn't find any posts that matched your query. Please try again.", "hemingway"); ?> <?php endif; ?> <div class="clear"></div> </div> <!-- /content left --> <?php get_sidebar(); ?> <div class="clear"></div> </div> <!-- /wrapper --> <?php get_footer(); ?>
Now we can run any PHP code inside of templatePage.php that we want. This page can be used to set up a form, query the database, and process forms. Contact me if you have any specific questions about this part.
Name the template
The next step is to name the template so it is accessible from the WordPress Dashboard. Add the following lines to the top of templatePage.php:
<?php /** Template Name: My Awesome Template */ ?>
Upload the template
Next you need to upload your new template file into the child theme directory. This is how WordPress will see your new template.
Set page with new template
Go back to the page you created at the beginning of this blog. Find the following section on the “Edit page” screen in the Dashboard (it’ll be in the sidebar. Quick note, if you are not self hosting, you will not see this option):
Save the page and reload it in your browser. If everything has been set correctly, you will see a standard looking page with your PHP code running inside of it.
Contact me if you have any questions.