Category: Theme Development

[How to] Add Editor Style To Your Theme

WordPress allows theme developers to define custom CSS styles for visual editor on the post edit screen. Although, this theme development stage is often skipped by developers, it is very critical for end users to feel home when they are composing amazing posts.

To add editor style to your theme, all you have to do is to add add_editor_style call in your Theme Setup function like in the example below:

function wpa_theme_setup(){
    ...
    add_editor_style();
    ...
} add_action( 'after_setup_theme', 'wpa_theme_setup' );

When you add this call in your theme setup, WordPress will look for editor-style.css in your theme directory and it will use it for the visual editor styles.

If you want to give your editor stylesheet a custom name, you can also pass this name as a string to the function:

add_editor_style( 'styles-for-editor.css' );

I hope you liked this tip. If you want to get more tips like this, please don’t forget to subscribe to our weekly tipsletter! All the best,

WP Assist Team

[How to] Enable Automatic Title Tags in Your Theme

Since WordPress 4.1, WordPress allows automatic creation of document title tags. This is a very useful option for most SEO practices because the title tag structure can change depending on the context of page.

1. Add Theme Support for Automatic Title Tags

To enable automatic title tags, first, you need to add theme support in your theme setup function:

add_theme_support( 'title-tag' ); // Enable automatic title tags

2. Remove <title> Tags From Header Template

After you add theme support, you have to remove <title> tag from your header.php file. Otherwise, you can get duplicate title tags, which is bad for page SEO.

That’s it. After you complete those steps, your title tag is now automatically generated by WordPress.

This function also enables SEO plugins to better manage your site’s SEO titles.

(via WPAssist.me)

[How to] Include PHP File Using get_template_part in WordPress

While developing WordPress themes, dividing your theme into multiple re-usable templates makes everything easier. WordPress already manages templates parts like header, footer, and sidebar using special functions like get_header, get_footer, and get_sidebar. For including all other template parts that are created by the designer we are using the get_template_part function.

How to Properly Include Template Files Using get_template_part

To include a template part in your theme, the best practice is putting your template part in a folder like partials. After you put your template part in the folder you can easily include that template part using code sample below:

get_template_part( 'partials/navbar' );

When you use this function, WordPress looks for navbar.php file in the partials folder. If it can’t find that file, it doesn’t give any errors, but, simply displays nothing.

Including Template Parts Depending on Context

If you have multiple alternative templates depending on page context, you can pass the context as a second variable (string) to the get_template_part function. See it in the example:

get_template_part( 'partials/share', 'post' );

This example looks for share-post.php file in partials folder. The important thing to note here is that if it can’t find share-post.php file, it falls back to share.php file. Using this method you can easily manage your templates depending on context, post type, user capabilities or even page slug.

Conclusion

Dividing your theme into small logical parts makes things easier both for developers and also end users. Instead of making one large file for single page, you can divide it into small parts like post-header, content, share, comments, after post etc. This way your theme will be more organized, plus it will be more manageable.

 

[How to] Enable Automatic Titles in Your Theme

Since WordPress 4.1, WordPress allows automatic creation of document title tags. This is a very useful option for most SEO practices because the title tag structure can change depending on the context of the page.

1. Add Theme Support for Automatic Title Tags

To enable automatic title tags, first, you need to add theme support in your theme setup function:

add_theme_support( 'title-tag' ); // Enable automatic title tags

2. Remove <title> Tags From Header Template

After you add theme support, you have to remove <title> tag from your header.php file. Otherwise, you can get duplicate title tags, which is bad for page SEO.

That’s it. After you complete those steps, your title tag is now automatically generated by WordPress. This function also enables SEO plugins to better manage your site’s SEO titles.

I hope you enjoyed this post. Follow our social profiles for more tips!

 

[How to] Change Default WordPress Title Separator

Starting with version 4.4, WordPress allows you to easily change your title separator using a filter. This was previously done by either installing a SEO plugin or manually adding a title filter. But if you just want to change the default separator to something fancy, include following PHP file in your theme’s functions file and it will do the trick!

Filter to Change Default WordPress Title Separator

<?php
  function kafka_document_title_separator( $sep ) {
    return "//";
  }
  add_filter( 'document_title_separator', 'kafka_document_title_separator', 10, 1 );

Save this code in a file called filter-document_title_separator.php and drop/upload it to your theme folder.

Then, add the following line to functions.php to simply include it in your theme. You can follow my simple guide explaining how to edit functions.php on wordpress.

include_once( 'inc/filter-title_separator.php' );

This line goes to top of the functions.php file generally, after the <?php opening tag of course.

I hope you found this simple trick useful, Enjoy!