Want to Develop a Custom WordPress Theme? Try These Tips
With tons of resources and tools available online, creating a WordPress theme has become easier than ever before. But, if you want to create a perfect theme, you’ll have to train hard. Especially, when you’re creating a theme for a specific business owner or a company, you’ll need to write code to make tweaks to the WordPress menu.
Perhaps, some of you might consider downloading and working on a pre-built WordPress theme, but keep in mind that it may lack coding standards and might not include the styles you would like to have in the final website design; or you may need to add custom styles to the theme depending on your client needs. Besides, some of the pages might contain styles that can make it difficult for you to build a custom user interface.
With the help of this post, I would like to bring to your attention some useful tips that will help you learn about some basics of creating a custom theme for WordPress.
Basic Tips For Custom Theme Development in WordPress
#Tip 1. WordPress Templating
When working on a custom theme development project, chances are that youâll need to use custom markup to add custom styling to your theme’s pages, categories, etc. You can achieve this objective by understanding about template files.
Templates in WordPress are PHP source files that help in creating pages based on your users’ requests. WordPress lets you define individual templates to meet several aspects of your website. To create these templates and select theme, you need to learn about WordPress template hierarchy.
Let’s take an example, where you require custom markup for your theme âprofileâ page. You can get the task done in several ways using WordPress templating, discussed as below:
- In case your profile page slug (or URL) is âprofileâ, then you just need to create a new template titled âpage-profile.phpâ. Doing so, your âpage.phpâ template will get overridden.
- Another option you can choose requires creating a custom page template that can be used when editing that page. To know more, refer to WordPress codex.
#Tip 2. Creating Links For Different URL
Assuming that you need to write code for creating menu or links for specific pages on your website, then it is recommended that instead of using relative links, you should opt for WordPress default function: home_url(). This function helps you fetch the home URL for your site. Here is an example illustrating the use of this function:
|
1 |
<?php echo home_url( 'contact-us' ); ?> |
The above line of code will help in generating links on the basis of your base URL. This will prove useful whenever you would want to change the structure of your theme.
#Tip 3. Define Path For Images Sources
In order to access image sources, you need to know about the path of your theme directory. And so, when creating your own custom theme, you’ll have to build the path on the basis of the root of your âtheme directoryâ. For this purpose, you can use the following code:
|
1 |
<img src="<?php echo get_template_directory_uri(); ?>/images/img1.jpg" alt="Test Image"?> |
#Tip 4. Adding CSS and JavaScript to Custom WordPress Theme Using Enqueueing
You may often need to change the look of your theme and improve its functionality. While you can use CSS styles to alter the look, scripts let you enhance the functionality of your site. Though, you can add styles and scripts to WordPress from âheader.phpâ or âfooter.phpâ, but it is advised that you should use WordPress enqueue functionality. Using the enqueue way helps to avoid conflict between the scripts and styles.
|
1 |
wp_enqueue_style('theme-style',get_template_directory_uri() . '/css/theme-style.css', null,null); |
But, what if you would like to load a certain script or style on a single page of your custom theme? If that’s the case, then you can opt for a conditional, as shown in the code below:
|
1 2 3 4 5 |
if(is_front_page()){ wp_enqueue_style('front-page-style',get_template_directory_uri().'/css/home-style.css',null,null); } |
This code snippet will help in speeding up the loading time of the page.
#Tip 5. Using Conditional Tags
If you want to change how the content appears on your custom theme, then you can use the âConditional Tagsâ in your WordPress website template files. Let’s say, for example, you wish to present a text snippet just above the post listings on your blog’s main page. In such a case, you’ll need to use the is_home() Conditional Tag, as follows:
|
1 2 3 4 5 |
if ( is_front_page () && is_home()){ Â // Condition for default home page } endif; |
#Tip 6. Using Include Tags
Would you like to use a part of the markup (HTML and PHP) in your template file used in another template file without having to repeat it? Well, then you can include that piece of markup simply by including it within your custom template file using the function: <?php get_template_part(); ?>.
For example, the below code will include the files of the folder ânew-productsâ in âproduct-page.phpâ file:
|
1 |
<?php get_template_part( 'new-products/product', 'page' ); ?> |
For More Advanced Development
If you’ve come to know about all of the WordPress concepts, and would like to add advanced changes to your custom theme, then you can use the WordPress Theme Customizer.
With the release of WordPress version 3.4, a new feature was introduced called as âTheme Customizerâ (or Theme Customization Screen). This feature comes bundled with options that help in customizing the theme options page of a WordPress installation. For instance, it comes with some great controls (like text boxes, radio, color pickers, and many more) that can be extended, to adapt to your specific needs. Below is a code where we’re extending the built-in color_picker control:
|
1 2 3 4 5 6 7 8 9 |
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'text_color', array( Â Â Â 'label'Â Â => __( 'Text Color', 'mycustomtheme' ), Â Â Â 'section' => 'mycustomtheme_color_scheme', Â Â Â 'settings'Â Â => 'mycustomtheme_theme_options[text_color]', ) ) ); |
However, to make changes to the controls, you’ll first need to configure some settings on your theme options page and so on. To have more detailed insight about WordPress Theme Customizer below are two links worth checking out:
Conclusion
Are you a novice WordPress theme developer and want to create a custom theme? Then, reading the aforementioned tips will help you get the job done in an efficient manner.
Author Bio:
Amy is WordPress developer by profession. She works for custom WordPress theme development company and has a strong inclination for a suite of creative endeavors. Blogging meanwhile is a new found hobby for Amy.
