At the recent WordCamp Edinburgh, I took part in a panel discussion about WordPress theme development and the options available to developers when building themes. The overriding conclusion from the session was that there isn’t a one-size-fits-all answer and that the best method depends on the needs of the website and the capabilities of the developer.
But if you’re starting out building WordPress themes or want to develop a system for building them more efficiently or robustly, how do you decide which approach to take? In this article, we’ll briefly describe how WordPress themes work and then look at some of the different approaches to developing them, with tips on which approach might be most suitable for your website and circumstances.
How Does A WordPress Theme Work?
In WordPress, themes drive a website and determine what it contains, how it behaves and what it looks like. The theme is separate from the content, which is held in the database. This means you can use the same theme on more than one website, regardless of the content of the websites — which you might already be doing if you’ve downloaded themes from WordPress’ theme repository.
What To Consider When Developing A WordPress Theme?
Before deciding which approach to take to develop your theme, identify your constraints. These likely include the following:
- Time
How much time do you have to develop your theme, or to learn how to do it? - Budget
This is related to time but also has to do with whether you can afford to pay for a premium theme or a theme framework. - Capability
How familiar are you with theme development, with CSS and PHP and with how themes work? If you’re not familiar, how much do you want to learn? - Future-proofing
Will your theme need to be updated in future? Will other developers be working on it in addition to you? If so, then your approach will need to be as robust as possible. - Repetition
Do you see yourself developing a number of similar themes in future? If so, your approach will have to allow for code to be reused.
We’ll revisit these considerations at the end of the article and identify which development options are most suitable for various situations.
Theme Development: Your Options
A few options are available for developing your theme or themes, and investigating them before you roll your sleeves up and start coding would be worthwhile. Picking the right approach will result in a better theme, with more robust code, and it will minimize the amount of revisions you’ll have to do later. It will also help you to build the theme more efficiently.
The options we’ll look at here are:
- Build a theme from scratch,
- Edit (or “hack,” some might say) an existing theme,
- Use the theme customizer to tweak an existing theme,
- Create a child theme to make changes to an existing theme,
- Create your own parent theme (using one of the approaches above) and child themes,
- Use a theme framework.
1. BUILD A THEME FROM SCRATCH
This approach is the most difficult if you’re inexperienced. But if you’re a seasoned WordPress developer, it will give you the most control. It might be the most appropriate method if you’re importing HTML from an existing static website that is being upgraded to WordPress with no other changes.
However, when transferring a website to WordPress, conducting a review of it as part of the process, rather than simply copying the code across, is a good idea. If you are copying a static website, you’ll need to keep a close eye on your code to ensure that it’s clean, efficient and valid.
2. EDIT (OR HACK) AN EXISTING THEME
This is how most people start with WordPress theme development: in working on a theme that they’ve downloaded, they see that some styling isn’t quite right, so they delve into the style sheet and make some edits. Starting like this is tempting because it feels like a quick and easy way to achieve the effect you want. But there are some dangers:
- If you ever switch themes, that update will override any changes you’ve made.
- It’s easy to add repetitive code by adding new styles lower down in the style sheet that override styles higher up, rather than removing what you don’t need.
- The website could end up with a lot more code than it needs.
- If the theme isn’t well coded or commented to begin with, you could get yourself into a bigger mess and find that you have to make a lot of fixes.
However, hacking a theme can work if you go into it with your eyes open. It may be an option if the following are true:
- The theme you’re using is well written, valid and commented (e.g., the default WP theme, Twenty Eleven);
- The changes you’re making are so drastic that you wouldn’t need to update the original theme;
- You understand the PHP and CSS contained in the theme and are comfortable editing, adding to and removing it without breaking the theme.
If you do decide to go down this route, keeping a backup of the original theme and commenting your code thoroughly are important. I would also advise commenting out any code that you don’t want and then testing to see what happens before deleting anything.
3. USE THE THEME CUSTOMIZER TO TWEAK AN EXISTING THEME
The theme customizer was released with WordPress 3.4. It gives you the option to customize a theme without writing any code, simply by using a WYSIWYG interface. Depending on how well the customizer is written into the theme itself, you can use it to change images, titles, colors and even the layout. Expect to see more themes with the customizer integrated into them.
Using the WordPress theme customizer with the Twenty Ten theme.
The theme customizer stores your changes in a separate file, not in the theme’s style sheet, so there will be repetitive code.
For more information, take a look at Otto on WordPress’ video tutorial or guide to integrating the theme customizer into your own themes.
4. CREATE A CHILD THEME TO MAKE CHANGES TO AN EXISTING THEME
This approach is similar to editing an existing theme, but safer. It consists of creating a brand new theme that is defined as a child of the existing theme. Where your child theme doesn’t have a particular file but the parent theme does, it will use that. Where the child theme does have a file, that file will override the equivalent in the parent. This line tells the browser to load the parent theme’s style sheet before rendering any of the styles in the current style sheet. This frees you from having to duplicate any styles in the parent theme that you want to use.
So, that’s how child themes work. But when is this the best approach? I would suggest using it in the following cases:
- You already have a theme (to be used as the parent) that contains most of what you need for your theme;
- You want to be able to update your parent theme (for example, when theme updates are released following a WordPress update);
- You don’t want to get tied up in knots from hacking an existing theme;
- You want the option to revert to the parent theme or to develop another similar theme in future (which would be a new child theme);
- You’re developing a number of similar websites with some minor stylistic or content differences (I did this when building similar websites for a client that owned multiple companies);
- The difference between your child and parent themes is not so huge that you need to start from scratch, or not so huge that your child theme’s code will override anything affected by updates to the parent theme.
from : http://www.smashingmagazine.com/2013/03/13/a-guide-to-wordpress-theme-options/
This Demo Content Brought to you by Momizat Team
this is tags and keywords : wordpress themes momizat Tutorial wordpress templates
There is so much to learn about WordPress theme development. The Internet is home to hundreds of articles about building WordPress themes, to countless theme frameworks that will help you get started, and to endless WordPress themes, some of which are beautiful and professional but not a few of which are (to be honest) a bit crappy.
Rather than write another article on building a WordPress theme (which would be silly, really, since any theme I build would fall into the “crappy” category), I’ve asked some of the top theme designers and developers to share some tips and techniques to help you improve and refine your theme development and design process.
Before we get into that, Mark Forrester, cofounder of WooThemes, has shared some insight into his firm’s development process. Given WooThemes’ success, no doubt we can all learn something from it.
A Peek Into Woo
Whether you work in a large theme shop or are a lone designer, you can learn plentyfrom another designer or developer’s workflow.
- A theme at WooThemes starts life on the ideas board, through specifications provided by the community or based on a concept that’s emerged from customer research. It is designed either in house or by an industry-leading designer who is hired on contract.
- The theme is then meticulously designed in Photoshop. All of the major elements are styled and the pages constructed before any code is touched. Mark recommends Photoshop Etiquette for guidelines on structuring your design file. He says, “The better the Photoshop file, the easier the theme build.”
- Once the design is approved, it’s assigned to a developer, who works from WooThemes’ base theme. This includes the templates that come with every WooTheme, along with basic styling. The base theme has a responsive layout, and the CSS is managed using LESS, which Mark strongly recommends.
- Theme development is managed with Trello, and milestones are set withTeamGantt.
- Once the theme is finalized, the developer creates a demo for the website that is populated with dummy content and that tests almost every element of the design.
- The team sets about beta testing the theme. A list of bugs, tweaks and solutions is compiled, a hackathon is scheduled, and everything is completed by the developer.
- For WooThemes’ own redesign (which is awesome — congrats, guys!), the team started to use BugHerd, which helped them gather user feedback and track it directly in the pages.
- All revisions are included in the change log for easy reference. A strict numbering convention distinguishes between bug fixes and new features.
That’s a lot of process right there. Creating a WooTheme theme is about much more than knocking out a few lines of code. Here’s what Mark has to say:
“When we create and edit our themes it is not simply diving into the code. We have to carefully consider our community of users and how any code might impact their usage, and the template files’ customization ability.”
Apart from workflow, what else can be learned from professional theme designers and developers?
Develop Locally
If you’re not developing locally, then now’s the time to start. Here’s what Chris Coyier has to say about it:
“Designers and developers who work mostly on WordPress sites are, in my experience, the worst offenders of the “just do it live” development system. FTP commandos, if you will. I know — I was one for a lot of years. I suspect it’s the case because there are quite a few requirements to run a WordPress site locally: an Apache server running PHP and a MySQL database.
These things aren’t preinstalled on most computers like they are on most servers. Even if you get over those hurdles, setting up a workflow between local and live isn’t trivial.”
Luckily for you, Chris is going to show you a better way. Developing locally is easy to get started with.
STEP 2: GET OFF FTP
Developing locally has so many benefits. In particular, you’ll be able to do the following:
- Have a record of everything that has ever changed and when it changed.
- Roll back mistakes.
- Become more efficient by using text-editor features such as “Find in Project.”
- Work on major redesigns without worrying about screwing up a live website.
ALTERNATIVE TOOLS FOR A LOCAL SERVER
- XAMPP, Apache Friends
- “Install WordPress Locally on Windows With XAMPP,” Siobhan McKeown, WPMU.org
- “Configuring a Local Apache/PHP/MySQL Dev Environment in OS X,” Brian Richards
- WampServer
Use Live Reload
When you’re developing a theme, switching to the browser and reloading the page gets old pretty fast. That’s why Drew Strojny, founder of The Theme Foundry and the guy behind WordPress’ gorgeous new Twenty Twelve default theme, uses LiveReload:
“LiveReload is a great little application that works through a browser extension. LiveReload automatically reloads your page when a file has been changed in your project.
This is a huge productivity boon when you’re editing and tweaking a WordPress theme. All those small page refreshes add up to a big chunk of time saved at the end of the day. Not to mention, your fingers get a much needed break!”
The Theme Foundry loves LiveReload so much that it’s built support for it into Forge, its free command-line toolkit for bootstrapping and developing WordPress themes.
Use Git
Git is a distributed version-control system that is popular among developers all over the world. The great thing about Git is that you can quickly create a branch, make changes within that branch and then test those changes without affecting the master version. It’s what The Theme Foundry uses for every project:
“Quite honestly, we’d be lost without it. Git makes branching cheap and easy. You can experiment quickly with different ideas without worrying about getting lost. Think of it like the trail of pebbles left by Hansel and Gretel to help them find their way back home.
Git gives you the power to leave nicely annotated pebbles along your development path. If you see something interesting and wander off the trail, but then later change your mind, you can always get back to where you started.”
LEARNING GIT
from : http://www.smashingmagazine.com/2013/02/21/wp-theme-development-process/
This Demo Content Brought to you by Momizat Team
this is tags and keywords : wordpress themes momizat Tutorial wordpress templates
In case you missed it, WordPress release 3.4 included a very exciting new development: the Theme Customizer. This allows users to tweak theme settings using a WYSIWYG interfaceand customize the theme so it includes the colors, fonts, text — and pretty much anything else — they want.
WordPress 3.4 allows you to make extensive customizations to a theme, including colors, fonts, and text.
The purists out there may be throwing their hands up in horror — a WYSIWYG interface! Letting users alter themes themselves! Surely that opens the floodgates for the creation of thousands of ugly, messy WordPress websites? Well, yes, there is a risk of that. But more importantly, the Customizer means that if you’re developing custom themes for client websites, or themes for other developers to use, you have a whole new set of tools to play with.
With the Theme Customizer:
- If you’re developing free or premium themes for others to use, integrating the Customizer will make your themes much more appealing to developers and website owners.
- If you’re building client websites, you can let your client tweak the template content of their website such as the logo, tagline and contact details in a more intuitive way than by using a theme options page.
- For both groups, you can let website users and developers make changes without having to rely on widgets or theme options pages — a less risky and less time-consuming approach.
So, let’s start by having a look at what the Theme Customizer is and how it works for the user.
How The Theme Customizer Works For Users
The Theme Customizer has been integrated into the Twenty Eleven Theme, so you can try it out using that theme. There’s a great video on the Ottopress blog showing you how the Customizer works with Twenty Eleven. Using it is simple:
- On the “Themes” page, search for and activate the Twenty Eleven Theme.
- On the same page, click on the “Customize” link under the current theme’s description.
The “Customize” link is right below the current theme’s description on the “Themes” page. Larger view.
- This brings up the Theme Customizer in the left column, along with a preview of your website on the right.
The Customizer options are shown side-by-side with a preview of your website, so you can test the effect of changes. Larger view.
- To make changes, all you have to do is select each of the available options and edit their settings. The options are:
- Site title and tagline
Edit the title and tagline of the website without having to go to the “Settings” page. - Colors
In the Twenty Eleven theme, you can only change the color of the header text and website background, but as we’ll see, this can potentially be used for much more. - Header image
Choose from one of the default images or remove the header image altogether. - Background image
Upload an image to use as the background of the website. The image below is what happens when I upload an image of some hang gliders to my website. The image can be tiled but unfortunately doesn’t stretch.
- Site title and tagline
You can set your background image to tile, but not stretch. Larger view.
-
- Navigation
Select which menu you want to use for the primary navigation of your website. - Static Front Page
Specify whether the front page of the website should be a listing of your latest posts, or a static page of your choosing.
- Navigation
- Once you’ve made the changes you want, you must click the “Save & Publish” button. Until this is clicked, none of the changes are reflected in the live website. This means you can play to your heart’s content without your visitors seeing your experiments.
Another really exciting way to use the customizer is when previewing themes. If a theme has the Customizer built in, you can use it to make tweaks before downloading and activating the theme.
This demonstrates the Customizer in action with the Twenty Eleven theme, but what about your own themes? How would you harness this to add more functionality in themes you are selling or developing for clients?
So let’s take a look at how to implement Customizer in your theme, and how to add your own customization options.
from : http://www.smashingmagazine.com/2013/03/05/the-wordpress-theme-customizer-a-developers-guide/
This Demo Content Brought to you by Momizat Team
Recent Comments