After just a few years (and even months) of designing and growing WordPress themes, particularly for shoppers, you begin to notice that plenty of the performance might be standardized or distilled down right into a “starter theme or package”. This helps get the event course of began and shifting alongside apace.
The finest first step in doing this, I’ve discovered, is to nail down a lot of the frequent capabilities and embrace them within the capabilities.php. This capabilities.php file will must be prolonged to satisfy the actual theme’s wants as new initiatives come up, however it’ll present a greater than superior start line for improvement.
There are about thirteen key features that I like to start out out with and can add to them as wanted…
1. CUSTOM MENU SUPPORT
The navigation menu characteristic, launched in WordPress 3.0, permits for the intuitive creation and sustaining of navigation menus in themes.
At the very least, a normal theme will want a fundamental navigation menu, maybe within the header and a secondary navigation menu within the footer. To do that, we’ll register these two menus “Main Menu” and “Secondary Menu”
While this isn’t a very new characteristic, its nonetheless good to wrap it in an if function_exists() simply in case the person is caught in a pre 3.0 set up:
In the features.php file, embrace the next:
if ( function_exists( 'register_nav_menus' ) )
register_nav_menus(
array(
'main_menu' => __( 'Main Menu', 'cake' ),
'secondary_menu' => __( 'Secondary Menu', 'cake' ),
)
);
Now that the Menus are registered, we have to inform the theme the place to output them. We’d just like the Main Menu to look in our header. So, in our header.php file, we embrace the next code:
<?php if ( has_nav_menu( 'main_menu' ) ) ?>
<?php $defaults = array(
'theme_location' => 'main_menu',
'menu' => '',
'container' => false,
'echo' => true,
'fallback_cb' => false,
'items_wrap' => '<ul id="%1$s"> %3$s</ul>',
'depth' => 0 );
wp_nav_menu( $defaults );
?>
<?php else ?>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php ?>First, we verify to see if now we have a menu known as ‘main_menu’ outlined and if we do, we insert its contents right here, in any other case we fallback to the default wp_list_pages() which we will additional customise to show the hyperlinks as we want.
If you’d like even additional customization of the menu, see the WordPress codex page onwp_nav_menu() perform.
We need the secondary menu to seem within the footer, so we open up the footer.php and embody the next code:
<?php if ( has_nav_menu( 'secondary_menu' ) ) ?>
<?php $defaults = array(
'theme_location' => 'secondary_menu',
'menu' => '',
'container' => false,
'echo' => true,
'fallback_cb' => false,
'items_wrap' => '<ul id="%1$s"> %3$s</ul>',
'depth' => 0 );
wp_nav_menu( $defaults );
?>
<?php else ?>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php ?>2. STYLE THE VISUAL EDITOR
This operate permits you to use customized CSS to model the WordPress TinyMCE visible editor.
Create a CSS file named editor-fashion.css and paste your types inside. As a placeholder, I like to start out with kinds within the editor-model.css file of the Twenty Twelve theme.
In the features.php add the next:
add_editor_fashion();If you don’t wish to use the identify “editor-type” on your CSS file and in addition wish to transfer the file elsewhere, e.g. in inside a css listing, then modify the operate.
For instance, I need to identify my file tiny-mce-kinds.css and I need it inside my CSS listing; so my perform will appear to be this:
add_editor_type('/css/editor-model.css');While we’re at it, we would as nicely fashion the editor for proper-to-left languages. In the theme listing, create a CSS file referred to as editor-type-rtl.css and, on the very least, embrace the next:
html .mceContentBody
course: rtl;
unicode-bidi: embed;
li
margin: 0 24px 0 0;
margin: 0 1.714285714rem 0 0;
dl
margin: 0 24px;
margin: 0 1.714285714rem;
tr th
textual content-align: proper;
td
padding: 6px 0 6px 10px;
textual content-align: proper;
.wp-caption
textual content-align: proper;
Again, as a placeholder, the above kinds are from the Twenty Twelve theme. Restyle and lengthen as wanted.
3. CUSTOM AVATAR SUPPORT
Most individuals commenting on blogs on-line have an avatar related to them. If, nevertheless, they don’t and also you don’t significantly just like the WordPress default avatar choices, you’ll be able to outline your personal.
To accomplish that, embody the next code in your features.php:
if ( !function_exists('cake_addgravatar') )
operate cake_addgravatar( $avatar_defaults )
$myavatar = get_template_directory_uri() . '/photos/avatar.png';
$avatar_defaults[$myavatar] = 'avatar';
return $avatar_defaults;
add_filter( 'avatar_defaults', 'cake_addgravatar' );
What we’re doing right here first, is checking to see if the perform exists. If it does, we add a filter that tells WordPress to make use of our customized outlined avatar because the default.
We are telling WordPress to search out this avatar in our “pictures” listing contained in the theme listing. Next step, clearly, is to create the picture itself and add it to the “photographs” folder.
4. POST FORMATS
The put up codecs function means that you can customise the type and presentation of posts. As of this writing, there are 9 standardized publish codecs that customers can select from: apart, gallery, hyperlink, picture, quote, standing, video, audio, and chat. In addition to those, the default “Standard” put up format signifies that no submit format is specified for the actual put up.
To add this performance to your theme, embody the next code in your capabilities.php, specifying the publish codecs you’ll be profiting from. e.g. If you solely need the apart, picture, hyperlink, quote, and standing Post Formats, your code ought to appear like this:
add_theme_help( 'put up-codecs', array( 'apart', 'picture', 'hyperlink', 'quote', 'standing' ) );5. FEATURED IMAGE FUNCTION
The featured picture operate, as the codex explains, permits the creator to decide on a consultant picture for Posts, Pages or Custom Post Types.
To allow this performance, embody the next code in your capabilities.php:
add_theme_help( 'submit-thumbnails' );We might cease there and go away it as much as WordPress to outline the thumbnail sizes or we might take management and outline them ourselves. We’ll do the latter, clearly!
Let’s say we’re operating a magazine website the place the featured picture will seem in no less than 3 completely different sizes. Maybe one giant picture if the put up is featured or is the most recent, a medium sized picture if its only a publish among the many relaxation and a daily dimension maybe to seem elsewhere.
We reap the benefits of the add_image_size() operate that instructs WordPress to make a replica of our featured picture in our outlined sizes.
To do that, we add the next to the features.php:
// common measurement
add_image_dimension( 'common', four hundred, 350, true );
// medium measurement
add_image_measurement( 'medium', 650, 500, true );
// massive thumbnails
add_image_measurement( 'massive', 960, '' );See the best way to work with the add_image_size() perform to both comfortable crop or onerous crop your photographs on the WordPress codex page.
6. ATTACHMENT DISPLAY SETTINGS
Once we’ve outlined the above picture sizes (common, medium and huge) — and since by default WordPress doesn’t do it for us — we’ll add the power to pick our these picture sizes from the Attachment Display Settings interface.
It could be good in the event you might, when writing a put up, insert the specified dimension picture by deciding on it from the dropdown as you usually would for the WordPress default sizes.
To do that, we add the next to our features.php:
// present customized picture sizes on when inserting media
operate cake_show_image_sizes($sizes)
$sizes['common'] = __( 'Our Regular Size', 'cake' );
$sizes['medium'] = __( 'Our Medium Size', 'cake' );
$sizes['massive'] = __( 'Our Large Size', 'cake' );
return $sizes;
add_filter('image_size_names_choose', 'cake_show_image_sizes');With that in place, we are able to choose our picture sizes.
7. ADD FEED LINKS (INSTEAD OF OLD RSS CODE IN HEAD)
This one is straightforward. If you’ve been constructing WordPress themes for some time, you’ll bear in mind the times if you needed to manually embrace code to output the RSS feed proper within the header.php. This strategy is cleaner and depends on the wp_head() motion hook to output the required code.
In the capabilities.php file, embody the next:
// Adds RSS feed hyperlinks to for posts and feedback.
add_theme_help( 'automated-feed-hyperlinks' );Make positive that you’ve got it within the header.php, proper earlier than finish of &rgt;/head&lgt;
8. LOAD TEXT DOMAIN
With this perform you are taking step one in the direction of making your theme accessible for translation.
Its finest to name this operate from throughout the after_setup_theme() motion hook i.e. after the setup, registration, and initialization actions of your theme have run.
add_action('after_setup_theme', 'my_theme_setup');
operate my_theme_setup()
load_theme_textdomain('my_theme', get_template_listing() . '/languages');
Now add a listing named ‘languages‘ in your theme listing.
You can be taught extra about load_theme_textdomain() perform on the WordPress codex page.
9. DEFINE CONTENT WIDTH
Content width is a characteristic in themes that means that you can set the utmost allowed width for movies, pictures, and different oEmbed content material in a theme.
That means, while you paste that YouTube URL within the editor and WordPress mechanically shows the precise video on the entrance finish, that video won’t exceed the width you set utilizing the $content_width variable.
if ( ! isset( $content_width ) )
$content_width = 600;WordPress additionally recommends the addition of the next CSS:
.dimension-auto,
.measurement-full,
.dimension-giant,
.measurement-medium,
.dimension-thumbnail
max-width: a hundred%;
peak: auto;
While that is helpful, its a bit heavy handed. It defines the content material width for all content material. What in the event you needed movies of a bigger width on pages than in posts and a good bigger dimension in a customized submit sort? Currently, there is no such thing as a strategy to outline this. There is nonetheless a featurerequest proposing the inclusion of the $content_width variable into the constructed-inadd_theme_support().
10. DYNAMIC SIDEBAR
Your typical theme could have no less than one sidebar. The code to outline the sidebar is fairly simple.
Add the next to your capabilities.php:
if(function_exists('register_sidebar'))
register_sidebar(array(
'title' => 'Main Sidebar',
'before_widget' => '<apart id="%1$s" class="widget %2$s">',
'after_widget' => '</apart>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
This registers and defines a sidebar named “Main Sidebar” and its HTML markup.
You can be taught extra in regards to the register_sidebar() perform on the WordPress codex page.
You’ll routinely discover the necessity to have greater than that one sidebar so you’ll be able to simply copy/paste the above code and alter the identify.
There can also be a register_sidebars() perform that may assist you to register and outline a number of sidebars suddenly but it surely doesn’t provide the flexibility of giving every new sidebar a singular identify.
eleven. CUSTOM “MORE” LINK FORMAT
If you’re displaying excerpts of your posts on a weblog index web page, by default WordPress will present [...] to point there’s extra “after the leap”.
You will more than likely wish to add a “extra hyperlink” and outline how that appears.
To do that we have to add the next code to our capabilities.php:
operate new_excerpt_more($extra)
international $publish;
return '...<br /><br /><a href="'. get_permalink($put up->ID) . '" class="read_more">learn extra →</a>';
add_filter('excerpt_more', 'new_excerpt_more');This provides an ellipses ‘…‘ proper after the excerpt and features a learn extra hyperlink after two break tags. You can rename and elegance the read_more CSS class for the hyperlink as desired.
12. BASIC PAGINATION
Each theme may need totally different pagination wants nevertheless it’s at all times most secure to start out with a pleasant default capabilities: previous_posts_link() and next_posts_link().
operate cake_content_nav( $nav_id )
world $wp_query;
if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="<?php echo $nav_id; ?>" class="content_nav clearfix">
<ul>
<li class="nextPost"><?php previous_posts_link( __( '← newer ', 'cake' ) ); ?></li>
<li class="prevPost"><?php next_posts_link( __( 'older →', 'cake' ) ); ?></li>
</ul>
</nav>
<?php endif;
?>thirteen. REDIRECT AFTER THEME ACTIVATION
If you may have particular directions in your theme eg. in your theme choices web page that you simply’d just like the person to see once they first activate the theme, you need to use the next operate to redirect them there:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")
wp_redirect('themes.php?web page=themeoptions');Pay particular consideration to the wp_redirect() perform. Make certain to interchange the ‘themes.php?web page=themeoptions‘ with the URL of your web page.
14. HIDE ADMIN BAR (DURING DEVELOPMENT)
During growth, I generally discover the WordPress admin (instrument) bar to be fairly distracting.
It’s in a set place on the prime of the window and relying on my structure can cowl some components of the header.
While nonetheless designing and growing, I like to cover the admin bar with this useful operate.
show_admin_bar( false );Do you could have any favorite capabilities for leap beginning WordPress template improvement? What features would you wish to see? Let us know within the feedback.
Leave a Comment