When you sit down to develop a modern-day WordPress theme you’ll typically be following some design mockup, or at least an idea in your head. This can be a challenge at times when you don’t want to think much about the customizations. But any good WordPress theme should be comprised of a number of key points.
In October 2013 the newest WordPress 3.7 release was announced with plenty of new features. Not many updates will directly impact themes, yet it is a marvel seeing how far this platform has advanced since version 3.0. In this article I want to go over some of the core fundamentals you should think about including with every new WordPress theme. Especially for premium or free themes designated for commercial use by hundreds of different webmasters.
Getting Started
If you are unfamiliar with the core fundamentals of WordPress theming please check out their online documentation for more details. The bare minimum requirements should be a single index.php file along with a style.css stylesheet. Your CSS should begin with a comment block indicating the theme name, version, and other key metadata.
But this is quite literally the absolute least effort you could put into theming. Once you can start building in the functions.php file you’ll end up with a whole lot more customization. You can specify new custom post types, taxonomies, pretty much anything technical should be organized into functions and called in your theme file(s), or within the content as a shortcode.
Some of this terminology is newer to WordPress development beyond 3.0. If you are not sure how to build shortcodes or CPTs don’t worry! Plenty of guides online provide an easy-to-copy template of code which you could save as your own snippet for future development. Just be sure to familiarize yourself with these newer features to at least understand how they behave, and how they look in the WP Admin backend.
Theme Headers & Backgrounds
When you click on the “Appearance” link within the admin panel you find a number of sub-links which appear based on the currently active theme. One link says Header and this is very typical with newer WordPress themes. This settings page allows users to change out their header text for an image, or just update the link/background colors.
This is also true with custom backgrounds on the page. You can read more about custom headers & backgrounds which changed a bit during version 3.4. Basically you’d need to code an area for dynamic updates in the header, based on what the user selects. Both of these background/header functions can take an array of settings which determine the default state.
Backgrounds are slightly trickier but definitely not impossible. Custom Background Extended is a free plugin which capitalizes on this functionality. You can install the plugin and go through the source code to see how it works, or even check out some other related articles online. When targeting a wide audience both of these features can dramatically improve the quality of your theme.
Active Widget Areas
WordPress widgets are another very popular topic that have been around since the early days. However the process for developing widgets gradually advanced over newer versions to achieve what we have today. If you’re not familiar with the process of widgetizing a theme then definitely check out the online documentation or follow along with great tutorials online.
The benefit to widgetizing your theme is not in the ability to create your own widget(although this is pretty cool). By simply coding a widgetized sidebar you are allowing the user to swap out different pre-built widgets to see what looks best on the site. Plugins may also create new widgets giving the user even more options to switch around.
It’s noteworthy that a widgetized area can be placed anywhere in your theme. You could place some in your footer, just after the content, or even at the very top of your layout(think advertising). To get more technical, it helps if you name the widget areas specifically for their intended purpose. Also consider if they are left empty what content should appear, if anything at all.
Once you get comfortable programming widgetized areas into your theme, it might incentivize you to learn how to actually build custom widgets. These can include anything you like from database queries, API data, login forms, and so forth.
Custom WP Nav Menus
This step is probably the other crucial piece to any WordPress theme. Custom headers, widgetized areas, and WP menus are the 3 key points you should always consider. Anything else is definitely beneficial but certainly not required for a successful release.
You can read up more about navigation menus and the wp_nav_menu() function directly on the WordPress codex. The point is to first code a nav menu with a unique name. Then you can implement this menu into your layout with wp_nav_menu() calling the unique name as a parameter. If the menu isn’t setup then it’ll display the typical navigation by default.
Anybody who is somewhat familiar in WordPress should know how to create a custom menu. The user can arrange links and sub-links which become auto-formatted into HTML lists. Then the user selects which menu should be used and it’s all set! Now you would see this user-created list attached to a dynamic menu section already in the theme.
Additional Theme Settings
When you download a new copy of WordPress none of the internal themes have an extra settings menu. This has to be coded manually using the Settings API. It will usually display another link under “Appearance” with any text you choose – it is specific to your theme.
On this new settings page you can practically structure the layout any way you’d like. It can include sliders, input fields, many buttons and even multiple tabbed sections. Plugin developers often need to create their own settings pages for handling user preferences. But themes do not always require such settings – it is often found in more premium products.
But that doesn’t mean you should be discouraged from the idea! One free theme Monster does a very simple yet elegant job with this feature. Once activated you’ll find a new link “Theme Options” that displays a list of icons. The only option a user may customize is the monster icon which displays at the top of the page. A very simple and almost unnecessary settings panel – however it’s just one working example among a plethora of ideas that you could build into a WordPress theme.
Using Shortcodes
I brought up shortcodes earlier and I want to point out that many themes do not include these by default. Many plugins choose to utilize shortcodes because it is easier for embedding PHP-driven content into the page. Other reasons might include formatting text styles like columns, horizontal rules, link buttons, tables, HTML5 video players, and so forth.
WordPress also has a documented section about their Shortcode API you should look into. The development process might remind you of building a widget. Although these two ideas are very fundamentally different because shortcodes will be added directly into post/page content using brackets. So a new video widget might look like this: [wpvideo src="/media/movie.mp4" width="640" height="480"][/wpvideo]
You have the freedom to name your tags anything you like, so long as it hasn’t already been taken by another plugin or a core WordPress feature. If you are brand new to making themes don’t stress about getting into shortcodes right away. Build something that you can be proud of and make sure it works properly with no bugs. From there you should try updating the v1.0 release to add some extra functionality – and maybe a bit of that functionality includes shortcodes.
Closing
Many of these ideas are commonly understood by folks who are familiar with WordPress. Keep in mind that not everyone wishes to be a developer. So the more you can get people interacting with the admin section and not the source code, the better your theme will scale. But it’s also true that development is messy and sometimes you just need to hack into the code! No matter how you decide to start building themes, just keep practicing and be sure to gauge feedback whenever possible.
Source: http://designm.ag/wordpress-2/essential-features-building-wordpress-themes/
No comments:
Post a Comment