Socrates Premium Wordpress Theme
Welcome to WordPress theme design This title is intended to take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. WordPress was originally, and is foremost, a blog system. Throughout the majority of this book's chapters for simplicity's sake I'll be referring to it as a blog or blog system. But don't be fooled Since its inception, WordPress has evolved way beyond mere blogging capabilities and has many standard features that are expandable with plugins and widgets, which make it comparable to a full CMS (Content Management System). In these upcoming chapters, we'll walk through all the necessary steps required to aid, enhance, and speed your WordPress theme design process. From design tips and suggestions, to packaging up the final theme, we'll review the best practices for a range of topics designing a great theme, rapid theme development, coding markup, testing, debugging, and taking it live. The last three...
The best place to find a theme for your blog is the WordPress Theme Directory (http wordpress.org extend themes ). This directory is run by the same people who control WordPress itself, and they've set up some ground rules that a theme has to follow to be listed. These requirements benefit WordPress theme consumers. They also make the WordPress Theme Directory the best place to find free themes for your blog.
We'll use the default WordPress theme to review the basic parts of a theme that you'll need to think about as you convert your XHTML CSS mockup into your theme. Earlier, I explained that the WordPress theme is the design of the site and that WordPress generates the content. Thus, the content and the design are separate. Your theme does need to have the appropriate WordPress PHP code placed into it in order for that content to materialize. It helps if the theme is broken down into template files, which make it even easier to maintain with less confusion. A WordPress theme's main template files consist of the main index.php file, which uses PHP code to include other template files, such as header.php, footer.php, and sidebar.php. However, as you'll learn throughout this book, you can make as many templates as you feel necessary and configure them any way you want Your theme also contains other types of files such as stylesheets (style.css), PHP scripts (such as searchform.php and...
The first place you should always go to when looking for a theme is the official WordPress Theme Directory at http wordpress.org extend themes . This is where everyone in the WordPress community uploads their free themes and tags them with keywords that describe the basic look, layout, and function of their theme. Look at this screenshot Looking for the awesome WordPress themes Here's the place to find them Welcome to the Free WordPress Themes directory. High quality WordPress theme named Gear. Download Threaded comments. Paginated comments. Includes a very customizable banner. Change visibility, banner's image
They're one of those neat built-in Firefox features we were talking about (Yes, I know. Every decent browser has them now). Keep all your WordPress development and admin views in one window. Each tab within a Firefox window is accessible via keystrokes such as Ctrl + 1, Ctrl + 2, and so on. It makes for a much cleaner work space, especially as we'll already be in constant Alt + Tab flip mode. Flipping to the wrong browser window gets annoying and slows you down. You'll quickly get in the habit of Alt + Tab, Ctrl + to jump right to the WordPress theme view or administration page you need.
A quick scouring of the Web reveals that there are literally thousands of themes available for WordPress. The sheer amount of choice that we have is great. It also means that we do not have to know how to build an entire theme from scratch just to have some semblance of a unique theme. Still, we can build entire WordPress themes from scratch, and if you are interested in learning how to do so, we suggest reading the latest edition of WordPress Theme Design (ISBN 978-1-849510-08-0).
M hapter 11 shows how you can use free WordPress themes in your blog. Many people are quite happy to use these themes without making any adjustments to them at all. I can't tell you, however, how many times people have asked me how they can customize a theme that they've found. The answer to their questions is always, Of course you can make changes on your own. The practice of changing a few elements of an existing WordPress theme is tweaking. Thousands of WordPress blog owners tweak their existing themes on a regular basis. This chapter provides information on some of the most common tweaks you can make to your theme, such as changing the header image, changing the color of the background or the text links, and changing font styles and these changes are pretty easy to make, too You'll be tweaking your own theme in no time flat.
Not bad The content is now contained up top using the jQuery UI theme we chose, called Smoothness to compliment our WordPress theme best (again, we're using the default WordPress theme that comes with 3.0 as of the writing of this book). Let's look at some other uses for the UI plugin.
By now you've gotten the point that the WordPress theme essentially contains the HTML and CSS that wrap and style your WordPress content. Thus, it's usually the first place you'll start when incorporating jQuery into a site. Most of the time, this is a good approach. Understanding a bit more about how themes work can only make your jQuery development go a little smoother. Let's take a look at how themes are structured and best practices for editing them. Want to know more about WordPress theme design This title focuses on what you most need to know to work with jQuery in WordPress. If you're interested in WordPress theme development I highly recommend April Hodge Silver and Hasin Hayer's WordPress 2.7 Complete. Along with covering the complete core competencies for managing a WordPress site, Chapter 6, WordPress and jQuery's UI has an overview on editing and creating standard themes for WordPress.
In Part III, Working with Themes and Template Tags, I talk about the aspects of WordPress that have to do with themes and templates. If you have an Adobe Photoshop layout and need to hack it up into a WordPress theme, this is the series of chapters you'll want to get into. It is most suited for designers who need to understand how the WordPress theme system works.
Chapter 1, Project 1 Migrating a Static Website to WordPress shows you how to migrate from an existing static HTML website to a WordPress blog. This includes important information, such as how to transform your HTML template into a WordPress theme and how to move the content from your previous website into WordPress. Appendix B, offers guidance on the installation of WordPress themes and plugins using various methods. So, if you're new to WordPress, then getting started will be easy using the instructions provided here.
This book is made up of six parts that introduce you to the WordPress platform, including detailed information on two very popular versions of WordPress the hosted version of WordPress.com and the self-hosted version of WordPress.org. Also included is detailed information on WordPress themes and templates. This part also reveals how to find, install, and use various WordPress plugins to extend the functionality of your blog. It also steps into the world of WordPress themes, showing you where to find free themes, install them, and use them. Part V takes an in-depth look at the structure of a WordPress theme by taking you through each of the templates and explaining the template tags each step of the way. You find information on basic CSS and HTML that helps you tweak the free theme that you are using or even create your own theme. The Part of Tens is in every For Dummies book that you will ever pick up. This part introduces ten Web sites that have really stretched the functionality of...
You may think that migrating to WordPress means that you will also have to give up your current website design. This, however, doesn't have to be the case. If you're happy with the way your website looks now, then it's entirely possible to continue using your current design. To do this, you will need to convert your static HTML CSS template into a WordPress theme.
If your WordPress theme was to take advantage of creating a robust menu for the page links, you could write individual styles for page_item and current_page_ item in order to have complete control over your page links menu. This would also ensure that your menu displays whichever page is currently active.
A Cascading Style Sheet (CSS) is a style sheet that controls the appearance of content on a Web site. Every single WordPress theme you use in your blog uses CSS. The CSS provides style and design flair to the template tags in your templates. (See Chapter 12 for information about WordPress template tags.) The CSS for your WordPress theme is pulled in through the Header template In your Dashboard, click the Editor link on the Appearances menu, and look at the Header template for the Twenty Ten WordPress theme by clicking the Header link on the Edit Themes page. You find the following line of code, which pulls the CSS (style.css) into the page to provide the formatting of the elements of your blog Chapter 12 covers the commonly used parameters for the bloginfo() template tag used in WordPress themes.
Most WordPress themes feature a header, footer, and sidebar element. Figure 5-1 shows how the Loop is placed directly in the middle of these elements, creating your web site content area. This section of your web site is usually dynamic and will change as you navigate through it. The Loop by default is used in your WordPress theme template files. Custom Loops can be created anywhere in your theme template files, as Figure 5-2 shows. Custom Loops are also used in plugins and widgets. Loops can be used anywhere inside of WordPress, but different methods exist for creating custom Loops depending on where they are used, and the potential side effects of each construction will differ. The following section looks at the basic flow control of the Loop, and the WordPress template functions provided to customize the way content is displayed while being handled inside of a loop. Armed with the basics, it then goes into building custom loops based on hand-tailoring those query parameters.
The official WordPress Theme Directory isn't the only place to find a great theme for free. Here are just two of the many other Web sites you can check WordPress Themes (www.wpthemespot.com) highlights interesting and unique themes from across the Web. The site doesn't have as broad a collection of themes as some other sites do, but I think the quality of the themes highlighted here is pretty high.
If you don't care for any of the Buddypress-comptible themes that you've found, it's possible for you to use a standard WordPress theme on your site. For this to be possible, you will need to add BuddyPress support to your chosen theme. Doing this isn't as difficult as it sounds because you can use the BuddyPress Template Pack plugin, which is available at to guide you through the process step by step. Before you begin working with this plugin, however, you must first activate the WordPress theme that you're planning to use on your site. To do this, visit Appearance Themes and then click the activation link for your theme.
In the default Twenty Ten WordPress theme, for example, the first piece of markup in the Header template (header.php) is < div id wrapper> . This ID, with the name wrapper, provides styling for the site page. In the default Twenty Ten WordPress theme stylesheet, the CSS defined for the wrapper ID is as follows
One of the things wp_head() adds to a WordPress theme's header template is a meta generator tag showing which version of WordPress you're using. It helps the WordPress developers know how many WordPress sites there are in the world. However, it's also an advertisement to would-be hackers that your site runs on WordPress especially if you haven't updated to the latest release. Now, you should always upgrade to the newest release as soon as possible, but of course there will be times when you just can't upgrade immediately. If that's the case, you wouldn't want to advertise to the world that you're running an older, potentially insecure version of WordPress.
Unless you have a WordPress theme custom-built for you, you'll usually need to make some adjustments to get your site looking the way you want it. This is particularly true if you're building a business website with WordPress, and the most important change to make is in the header portion of the theme adding a company logo, for example. In this lesson I use the Island Travel site to show you some ways in which you can customize your header content.
The next step towards turning your ideal design into a WordPress theme is to slice images out of your design and write HTML and CSS files that put it all together. For the purpose of this chapter, I assume that you already know how to do this in general. We'll cover the ways you can do your slicing and dicing, but in a different way so that your HTML will be best suited for WordPress. If you are interested in the details of both designing a theme and slicing it for WordPress, I highly recommend the book WordPress Theme Design, Packt Publishing, 9781847193094 by Tessa Blakeley Silver. This book minutely covers topics such as choosing a color scheme, considering typography, writing the best CSS, and laying out your HTML using Rapid Design Comping. Now that you've got your HTML and CSS lined up, you're ready for the next step turning the HTML build into a WordPress theme.
Learning the various tricks of the trade when it comes to WordPress is important to lift your site from just a mere WordPress theme (no matter how great) to something more complete. It is almost all about polishing, but any good site needs that, so you should experiment with techniques and see what you can do with your site.
The default WordPress theme based on the famous Kubrick. All of this theme's files are located in themes tiefault. Tags blue, custom header, fixed width, two columns, widgets TTie original WordPress theme that graced versions 1.2.x and prior. TTie original WordPress theme that graced versions 1.2.x and prior. Tite default WordPress theme based on the famous Ku brick. Tite default WordPress theme based on the famous Ku brick.
Before you dive headfirst into the theme's code, you need to understand a little bit about the workings of template code, which powers every WordPress theme. WordPress templates use special template tags that retrieve information about your WordPress installation, such as the blog's name or a list of posts. The most critical part of the index.php template file is The Loop. This piece of code is the engine that powers much of WordPress.
WordPress comes packaged with one very useful default theme called Twenty Ten (named after the year it was first released in version 3.0 of WordPress). Most bloggers who use WordPress usually don't waste any time at all in finding a theme that they like better than the default WordPress theme. The Twenty Ten theme is meant to get you started. While you're not limited to the default theme, it's a very functional theme for a basic blog. Feel free to use it to get you started on your way. Are all WordPress themes free Not all WordPress themes are created equal, and it's important for you, the user, to know the difference between free and premium themes download only after you've paid anywhere from 10 to 500. The designer feels that these themes are a cut above the rest and, therefore, are worth the money you spend for them. Generally, you're not allowed to remove any designer-credit links that appear in these themes, and you're not allowed to redistribute the themes. (Note You won't find...
From a WordPress theme designer's point of view, comments can be a bore, mostly because making them look good can be a problem. The actual code isn't all that hard, though, and if you like the default comment view (as featured in the default WordPress theme) you won't even have to create the comments.php template file. We looked closer at such a file in the A Closer Look at the Notes Blog Core section earlier in this chapter, so we'll gloss over that part for now and look at the comments from a less technical point of view for a little while.
These are the basics of what you should cover in your WordPress theme ReadMe file Reiterate the basic steps for installing a WordPress theme (not everyone is keen on reading through WordPress' codex site and will know how to unzip the theme or where to upload the file). Also, mention any special requirements your theme has. For instance, if you included some custom PHP code that requires special CHMOD (a.k.a. RewriteRules) or anything like that, specifically list the steps of action a user should take to get your theme running.
Most people just hardcode some general keyword and description meta tags into their theme's template files that best describe the overall gist of their WordPress site. However, if you want to aid in your content being indexed by search engines a little better and or you use your WordPress site to cover a wide range of diverse information that an overall gist of keywords and a description just won't cover, you'll want to make metatags in your template files a bit more dynamic. There are several ways in which you can add keyword and description meta tags for individual posts and pages to your WordPress theme. You can use the available template tags within your theme's header.php or other header template pages to add content to your meta tags. Or you can install third-party plugins that will expand your administration page options and give you a little more control than what is produced by your post's content. In the next few sections, we'll look at doing it yourself as well as a few...
Using your FTP software or the built-in WordPress theme editor, edit the single.php file in your theme folder. If you're using the theme we built during Chapter 6, find the code that we added in it, which includes the comments template < php comments_template() > and add this code just before it
From the perspective of a plugin developer, widgets are only good if the theme the blog has adopted supports widgets. While all themes available in the WordPress Themes Directory (http wordpress.org extend themes ) are required to support widgets, some custom themes do not. So, how do you ensure that your WordPress theme is prepared for widgets
WordPress themes are the other side of WordPress extensibility. In Part II of this book, I took a long, hard look at plugins, hooks, widgets, and other aspects of extending WordPress with plugins. The other side of that equation is themes. The WordPress theme installer uses the WordPress Themes Directory located at http wordpress.org extend themes , which I discuss later in this chapter. 2. Click Find Themes to perform a search of the available themes with those options in the WordPress Themes Directory.
Perhaps you don't want to keep your old website design and would prefer to make a completely fresh start. If that's the case, then a new WordPress theme is in order. When selecting a new design, there are certain things that you will need to consider. Do you need one, two, or three columns Is the theme that you're considering widget-ready Is the stylesheet easy-to-read, so that you can make customizations if needed
To do so, open the stylesheet for your particular WP e-Commerce theme. Keep in mind that this is not your regular WordPress theme, but the theme file inside your wp-content uploads wpsc themes folder. For instance, if you are using the iShop theme, your stylesheet will be called iShop.css. This is the CSS that controls how the sidebar shopping cart looks, and right now it has essentially no styling. Depending upon your WordPress theme, your cart might look something like this
Even though most of the WordPress themes use a unique page template, our favorite blogging engine allows us to create as many different page templates as we want. To achieve this recipe, you only need a WordPress theme and a text editor. In the following example, we use the WordPress default theme. If you're using another theme, you'll have to adjust the code a bit to make it fit your theme HTML markup. Now, you know how easy it is to create and use page templates in your WordPress theme. This example isn't useful at all, therefore, let us see some really interesting uses of page template in the following recipe.
Understanding child themes is the first step in taking WordPress theme development to the next level, or at least bringing it up to a wider scale. You don't have to use child themes, obviously, but as a designer and developer it is a great concept to play with. After all, just the fact that you can put all your core functionality in one theme, everything you usually put into themes anyway, and then lean on that one theme by using a child theme that builds on it, certainly is food for thought.
Nevertheless, you will have to decide if you are going to take your current HTML files and add in the proper WordPress hooks and code, or start with a working WordPress theme, like Sandbox, and style it to match. It really is a mixed bag, and you will have to decide the best path for yourself. For practicality we recommend taking a theme framework and styling it to match your site's look and feel. In the long run, this has worked out better for us.
As you've seen, CSS is quite powerful, and minor tweaks can have big impacts. If you are unhappy with the fonts used in your WordPress theme, adjusting them all is easy. Fonts come in all shapes and sizes, and a font change can alter your site's look and feel dramatically.
The Twenty Ten WordPress theme is packaged with an option that allows you to change the background to a different color or use an image for your background. To use the nifty, built-in custom background feature to change the Twenty Ten background for your blog, follow these steps
You create a new WordPress theme, using some of the basic templates included in the default Twenty Ten theme. The first steps in pulling everything together are as follows To create a Main Index template to work with the other templates in your WordPress theme, open a new window in a text editor program and then follow these steps. (Type the text in each of these steps on its own line. Press the Enter key after typing each line so that each tag starts on a new line.) This template tag pulls the information in the Header template of your WordPress theme.
What you see on your live site is formatted by the style sheet of your WordPress theme, but it has no effect on what you see in the Text Editor. There will always be differences between what you see in the Text Editor and what visitors see on the live site, and sometimes those differences can be quite major. That's why WordPress has the Preview button, so that you can see your post the way your style sheet is going to display it. It's important to check Preview before your publish or update a post.
As I've hinted at in this chapter, cramming functions.php full isn't always such a great idea. A lot of things you do in that file can just as well be done by a plugin, and while that is unnecessary or even redundant at times, sometimes it truly is the best decision. After all, the whole idea with various skinning concepts in publishing systems is to separate as much design from the code as possible. When it comes to WordPress themes, it means that you'll have to break that rule a bit if you want to do crafty things. In the end, tightening a WordPress theme is more or less the same as tightening any site. Good and tight code, preferably valid, will load faster than clunky and bloated code, so get it right from the start.
Brute-force is often the simplest approach here. Copy and paste your text, or export a document as HTML and glue that into a WordPress page. Be warned, however, that most word processing applications insert a huge array of embedded HTML tags, local formatting, and other style elements that make the output page render the way it would as seen from the word processor, but not the way you'd want it to within your WordPress theme structure. If you don't want to strip out all but the most elemental paragraph, table, and link information, consider exporting the file as raw text and then hand-editing it to match the style of your other pages. It's ugly, but so is removing half of the document in the form of HTML directives. Even something as simple as the MacOS TextEdit application uses custom HTML tags for paragraphs if you ''Save As'' an HTML document. Save your text, without any formatting.
We very briefly discussed this in Chapter 3, just to get our development going, but let's review exactly what kind of information you can place into your stylesheet which will show up in the WordPress Theme Administration Panel. Essentially, the first 18 lines of the style.css sheet are commented out and without changing anything that comes before a colon ( ), you can fill out the following information about your template
Many of you can probably do most of what you need with just the basic CSS style selectors. But wait, there's more Filters are the part of selections that I find incredibly useful, especially considering that we're working with WordPress. Again, with a WordPress theme, a lot of your HTML elements, IDs, and class names are probably being generated by a theme that you're not the author of or, for various reasons, you don't want to edit or perhaps you're just not allowed to edit the theme. (What's that Designers get a little testy when developers start mucking about with their markup I had no idea.) But that's OK. With filters, you simply don't have to.
It is time for some more definitions. Figure 14.4 is a partial view of the CSS behind the default WordPress theme, Kubrick. Looking at style.css, you see something similar to a two-column table, with an object on the left side, some braces, and some settings on the right. The whole thing is called a rule. The object is called a selector, and the stuff inside the braces is a declaration. Each declaration has at least one property (like color, font, margin, or border) and a value (that you set the property to).
WordPress theme files are basically HTML pages with some strategically placed, WordPress-specific PHP functions. While some PHP developers criticize the mingling of languages, preferring a strict separation of logic and layout, the WordPress system is flexible and easy to learn, once you figure out the Loop, which I'll go over in a bit. The best way to demonstrate how a theme file works is to start with a familiar HTML page and show you the tags required to transform it into a WordPress theme file. Listing 6-2 shows the simple XHTML template you'll turn into a theme.
WPlite (wordpress.org extend plugins wplite ) To some, even WordPress may feel big and scary, especially if the only thing they need to do is publish a news post every month or so. That's when WPlite comes in handy, because it lets you hide parts of the admin interface from different kinds of users, hence making WordPress look less of a beast. This can come in handy when doing static sites for companies in particular, so keep it in mind if you're working with that sort of thing. WordPress Download Monitor If you're interested in how many times a certain file has been downloaded, say a WordPress theme
However, you don't just write the mother template theme's name in the child theme's style.css header, you write the folder in which it resides. The default WordPress theme is located in wp-content themes default so if you wanted to use that as your template for your child theme, you'd write default. Now, you wanted to use the Notes Blog Core theme, which is located in wp-content themes notesblog-core , hence the folder you want to pass along in your child theme style.css is notesblog-core.
To add some real design pizzazz to your WordPress theme, every time the page loads, you can randomly display different photos or other images in the header section of your theme. You can use this as a technique to generate interest for your visitors, or just as a fun personal experiment. With the method in this recipe, you'll be up and running in no time.
Creating your own theme control panel is outside the scope of this book, but it is definitely a great feature to have and most of the premium theme frameworks are including this functionality. Having a theme control panel helps your WordPress theme bridge that gap from blogging engine to full-fledged content management platform for the average user. As a coder, WordPress is easily extendible through
Next, I'll go through what I feel are the most popular tricks used in website design today. Most of these design techniques are easily incorporated into WordPress, as they're handled 100 via CSS. A few items will require you to think and plan ahead, as you'll need to make sure the WordPress template code accommodates the effect. The best thing is, if you can implement these techniques into a WordPress template, you can implement them into any website. Backgrounds If you haven't already realized this by now, about 98 of the CSS that makes your WordPress template look great is dependent on how creative you get with the CSS background properties of your XHTML objects, classes, and id rules. Learn your image editor inside and out This is not a specific web technique, but it is what will set you apart. Photoshop, Fireworks, GIMP, Illustrator, or Inkscape, whichever your editor of choice is, once you have a handle on controlling your layout with XHTML and CSS, the real factor that will make...
Now that you've configured your site and created some content, it's time to make it look good First, you'll learn a few ways to change your site's appearance without modifying theme files using widgets, the menu manager, and uploading custom header and background images. Then you'll create a basic custom theme, starting with a standard HTML file. I'll walk you through the various WordPress template files you can use to make parts of your site look different based on context, and finally I'll show you child themes a powerful way to customize existing WordPress themes while keeping the original code intact.
In Chapter 3, we included our own custom sidebar using the previous technique. You can also use the WordPress template path inside a basic PHP include function. This technique can come very handy in helping you streamline your theme's code and help keep it easily updatable.
Until recently, WordPress template tags did not output many CSS styles. In Chapter 3, we used the wp_list_pages tag and learned it output a few classes that could be used to style menu items. With the release of 2.7 and now 2.8, we have a few new template tag functions that output quite a few class styles.
You want to work with nice, small pieces or chunks of code. I tend to define a chunk in XHTML markup as no more than one div section, the internal markup, and any WordPress template tags it contains. When working with CSS, I try to work only with one id or class rule at a time. Sometimes, while working with CSS, I'll break this down even further and test after every property I add to a rule, until the rule looks as I intend and validates.
The bloginfo('template_directory') command is a WordPress template tag so that no matter which theme I'm using, it will look in the proper folder on the server. The id logo is a unique identifier that I can use in my CSS style sheet to make the logo image do whatever I want.
Let's carry this metaphor over to your WordPress theme. The home page template of your theme should promptly let users know where they are and what the site's primary content is. Post and page titles should be easy to find, read, and click on. Subheadings should be less dominant and so forth, until you have styled the body copy, which should be simple, readable, and consistent across all parts of the site. You can of course use other visual design elements to organize content on your pages, but be mindful of the power that type has to communicate information hierarchy. In WordPress themes especially, it's a powerful way to ensure that content is communicated clearly even if you're unsure what that content is going to be. In a WordPress theme, the golden ratio usually appears as the ratio of the main content column to the sidebar column it can also be applied to subcolumns, or to the height of elements in the header or footer. Let's look at a practical example of what this might mean...
You might have noticed that the PHP code we use for the home.php and index. php page loops have a catch-all fix in case posts are not found, which will display a nice message and the search.php template page. The 4 04.php template page in the default WordPress theme does not do this (and it's also not set up to display our other template files and CSS). 4. Add the sidebarLT XHTML div and PHP WordPress template tag back in under the content div
Make sure that you include all of the core WordPress template files, like index.php, sidebar.php, single.php, comments.php, header.php, and footer.php. Your template folder should also contain a style.css file. Using a functions.php file to contain loose functions (that is, those that are not plug-ins) is also preferred.
Similar to the previous recipe, you only need a text editor, a WordPress theme, and of course this book to achieve the hack. This recipe is based on the WordPress default theme, but can be adapted on any other theme as well. In this chapter, you have learned how to modify and enhance a WordPress theme to definitely make your blog different.
As long as you take care to make sure the div is positioned correctly, the object embed code has the correct height and width of your Flash file, and you're not accidentally overwriting any parts of the theme that contain WordPress template tags or other valuable PHP code, you're good to go.
Welcome to this chapter on theme design and approach. My hope for this chapter is that even you design pros may discover interesting tidbits that will help you in your WordPress theme design creation. The purpose of this chapter is to help you create a working XHTML and CSS-based mockup, with a view to having it end up being a WordPress theme while staying compliant with W3C standards and table-less CSS layout techniques. By the end of this chapter, you'll have a working XHTML-and CSS-based comp or mockup of your WordPress theme's design, ready to be coded up and assembled into a fully functional WordPress theme. That's fine This chapter covers the ins and outs of web design best practices, with a view to ending up with a unique and custom WordPress theme. It contains time honored and tested methods for approaching compliant, accessible XHTML and CSS creation. If you're a total XHTML CSS design wizard, you can skim this chapter for any new tips and tricks that might be of use to you...
With WordPress, as we've discussed in some detail here, all that HTML is generated dynamically. There's no single file that you can open into your editor to get an overview of what jQuery has to work with. You'll have to get to know the WordPress publishing system and most importantly, the WordPress theme and any plugins that you're using, to be able to get your jQuery scripts to target and affect the elements that you want to affect. As I've already mentioned, this is where you'll discover the Web Developer toolbar and Firebug extensions for Firefox to be your best friends.
First, you need to discern what the ID of the containing element for your content is. Take the following header code, which is usually contained within the header.php file, as a starting point, as it is fairly typical of a simple WordPress theme. The < div id wrap> tag is the key to using CSS to center the theme. If your file does not contain a site layout wrapping div tag above the header tag, then you will need to add one to your theme. In this example, the div is named wrap, but you may also see the same type of div named wrapper or rap or container, depending on the theme
This section covers the template tags that you use to display the body of each blog post you publish. The body of a blog post includes information such as the post date and time, title, author name, category, and content. Table 12-3 lists the common template tags you can use for posts, available for you to use in any WordPress theme template. The tags in Table 12-3 work only if you place them within The Loop (covered earlier in this chapter and found in the loop.php template file).
We've discussed that a WordPress theme comprises many file types including template pages. Template pages have a structure or hierarchy to them. That means, if one template type is not present, then the WordPress system will call up the next level template type. This allows developers to create themes that are fantastically detailed, which take full advantage of all of the hierarchy's available template page types, to make the setup unbelievably simple. It's possible to have a fully functioning WordPress theme that consists of no more than an index.php file In addition to these template files, themes of course also include image files, stylesheets, and even custom template pages, and PHP code files. Essentially, you can have 14 different default page templates in your WordPress theme, not including your style.css sheet or includes such as header.php, sidebar.php, and searchform.php. You can have more template pages than that if you take advantage of WordPress' capability for...
We'll be touching on the Notes Blog Core theme frequently from now on, so this section demonstrates the basic theme by taking the Core theme and cutting it down a bit to illustrate what a minimal WordPress theme can look like. Sure, you can make it even smaller still after all, you just need a style.css and an index.php to have a fully functional WordPress theme but it is a lot more likely that you'll use at least the most common template files.
Part of being a good developer is knowing when to make these decisions for your theme's users, and when to give the users a choice. Many WordPress users are not comfortable with editing PHP files, so you need to provide some other way for users to make these choices. The best way, in the context of a WordPress theme, is to provide the users with a theme options panel.
So what you're looking at, then, is something of a linking aside. In fact, this is really easy to pull off. We'll just reuse the code and let the custom fields content check do all the work. Again, we'll use the index.php in the default WordPress theme as an example on how to pull this off
In addition to considering if your work will need to be reused or deployed, you may also want to consider the lifespan of the jQuery enhancement and that of the WordPress theme. It's easy to think that the jQuery enhancement is really more a part of the theme as it visually affects it, but is it really I've found that more often than not, a large part of my WordPress and jQuery development seems to center around encapsulating jQuery development into a WordPress plugin, or making WordPress plugins more effective with jQuery. Ultimately, it's up to you and your comfort level, and what's best for the project, but I've found, with a few exceptions, which we will cover examples of in later chapters, that trying to keep most jQuery enhancements from being embedded in the WordPress theme has served me well.
Important Don't skip this step Copy in your XHTML CSS mockup files and the image directory. Rename your index.html file to index.php. WordPress template files follow what's known as the Template Hierarchy. That hierarchy looks first for an index.php page. Leaving the page as .html or attempting to name it anything else at this point will result in your template not working correctly. Find out more about the WordPress Template Hierarchy Certain WordPress template pages will override other pages. Not being aware of which files override which ones within your template hierarchy can make troubleshooting your template a real pain. We'll talk about this more in Chapter 6, which deals with WordPress Reference, and you can read through the WordPress codex online at http codex.wordpress.org Template_Hierarchy. Description A WordPress Theme created originally for < a and then modified for Packt Publishing's WordPress Theme Design. Version 1.4
In this recipe, we're going to see how we can easily modify the fonts used in a WordPress theme and also discuss about the good practices for typography on a WordPress blog. Most WordPress themes use a maximum of three different fonts. However, it is common to only use one or two different fonts. There's not a big choice, in terms of fonts, due to the fact that a user must have the font installed on his computer to have it render correctly on a web site.
When searching the Web for free themes outside the WordPress directory, be aware that not everyone on the Internet is a stand-up citizen and card-carrying member of the WordPress community. The vast majority of WordPress theme developers, no matter the experience level, are fans and friends of WordPress. You do have to watch out for that tiny minority, however. The popularity, open code, and ease of use in making WordPress themes are attractive to those who use the Web's powers for ill. With just a small bit of obfuscated code in an otherwise innocuous and beautiful theme, your web server could become part of a zombie army of machines participating in a Distributed Denial of Service (DDoS) attack on some other website, or be used in a phishing scheme to mine passwords and other personal information from your visitors unbeknownst to them or you.
Build Your Own Wicked WordPress Themes is the perfect book to help launch yourself headfirst into WordPress theme development. Whether you want to build a highly specialized theme for one client, or aim to design premium themes to sell, Build Your Own Wicked WordPress Themes is the book for you.
Copy the code in the segmented HTML template file that's located between the two header comment tags and then paste it into the blank header.php template that's located in your WordPress theme folder. When building a WordPress theme, it's important to include a doctype because it tells browsers which version of HTML or XHTML you're using and makes it easier for browsers to render your web page correctly. Its presence is also important because any theme lacking this information won't pass validation testing.
Even though I had most of these text elements handled in my mockup, I'm now seeing what's available to me via the WordPress template tags. You've probably noticed that the classes authorName and bigNum were not the part of my original mockup. I've decided to add them in as I'm developing the WordPress theme. This is
If you're doing customization work on your WordPress theme, you'll sometimes want the ID number of a category. It's not displayed in the listing, unfortunately, but you'll find it by mousing over the title of the category and looking in the status bar of your browser. You'll see something like this http www.yourdomain.com wp-admin
Whatever you wish to create, you can probably find a way to do it fairly easily with a jQuery plugin and a tweak or two to your WordPress theme. Perhaps you might just need to write a quick and simple jQuery script to enhance one of your favorite WordPress plugins. We'll go over the basics of jQuery and the most common uses of applying it to WordPress in this book and you'll quickly see that the possibilities are endless.
To achieve this recipe, you'll need a WordPress theme that you can edit. Conditional tags, as we have seen, are very useful. But there's more some conditional tags accept optional arguments that allow you to create a more specific condition. For example, you should create a code snippet that will only be executed if the current page is a WordPress template.
In Chapter 12, I discussed the method of putting a very basic WordPress theme together, which included a Main Index template using the WordPress Loop. You can use a custom tag to display custom styles for sticky posts, categories, and tags on your blog. That special tag looks like this In Chapter 13, I talk about CSS selectors and HTML markup and how they work together to create style and format for your WordPress theme. I can now go to my CSS file and define styles for the following CSS selectors
So, you've been messing about with websites for a little while now, and you've decided to take the plunge and learn how to design themes for WordPress. Perhaps you're a blogger yourself, and you want to take the next step by redesigning your site, or perhaps you've heard that there's a strong market for ready-made WordPress themes and you want to get in on the ground floor, so to speak. You're probably itching to start building your first WordPress theme, but before we jump in, it's a good idea to think about why we're here, and how we arrived. This chapter will give you a bit of background on WordPress in general and WordPress themes in particular. In the following two chapters Brandon will take you through the process of planning and designing your theme then Raena will take over and introduce you to the code behind WordPress themes and the Thematic framework, which will make your life as a developer much more enjoyable. After that, Allan will take you through the slightly more...
Although WordPress is written in PHP, it is in fact a framework in itself. You can use PHP to do stuff with your WordPress theme or plugin, but most of the functionality is managed with template tags. If you open a theme file (just about any file with the extension .php, like index.php or single. php) you'll find a lot of PHP-like functions, such as this one, for example So template tags are basically PHP functions that can handle parameters to do different things. Some have default values, others don't, and some have more settings for you to play with than others. Most of them will work anywhere in your WordPress theme files, but some need to be within the loop. The loop is basically the code that outputs the content, like posts or pages. (Loops are examined in the next chapter.)
Next, inside our content div, we'll place in our custom loops which load up the WordPress Themes and Inkscape Illustration categories. We know that the categories IDs are 5 and 6 so our custom mini loops look like this < div style float left width 380px > < h2> What's new in WordPress Themes < h2> What's new in WordPress Themes i Clearvume - Clearly a WordPress Theme i Gravipectic - World's Heaviest WordPress Theme i Slurpysation - A Rainbow filled WordPress theme i How To Name a WordPress Theme Clearvume - Clearly a WordPress Theme Gravipeelie - World's Heaviest WordPress Theme
Of course, you can also download jQuery plugins and include them manually into your WordPress theme or plugins. You'd do this for plugins that aren't bundled with WordPress, or if you need to amend the plugins in anyway. Yes, you've noticed there's no easy jQuery plugin activation panel in WordPress. This is where understanding your chosen theme and WordPress plugins will come in handy You'll soon find you have quite a few options to choose from when leveraging jQuery. Now that we have an overview of what WordPress themes, plugins, and jQuery plugins are, let's learn how to take better advantage of them.
As I mentioned earlier, the advantage of having your WordPress theme's parts separated into individual template pages is that your theme will be more flexible and able to accommodate a wider range of content. As nice as my theme currently looks, there are some problems with it that can only be dealt with if I break down the theme's design into further WordPress template pages.
First up, we don't even need to amend any template page HTML or WordPress Template Tag, PHP code. This is great as again, as often as possible (all the time really) we always want our site to work without the jQuery enhancement. As mentioned in Chapter 3, Digging Deeper Understanding jQuery and WordPress Together, if you create a jQuery enhancement that doesn't require any tweaks or edits to the WordPress theme, and will work with most themes released for public use, you may want to consider wrapping up your scripts into a separate WordPress plugin.
Make a copy of page.php within your theme and give it a new name. I like to prepend all of my custom template files with tmpl_ so that they are sorted separately from all the WordPress template files that I will create. I'll call this file tmpl_archives.php. There is no limit to the number of custom templates you can make in your WordPress theme.
WordPress Template Tags for Registration and Login Links Added to index.php The additions in Listing 16-7 are standard WordPress template tags. The call to wp_register() produces a link to the registration page, but it does so only if registration is enabled. If you are logged in, however, it produces a link to the administration pages.
Currently, the main sidebar (the sidebar that's just on the right-hand side of my layout) is still just XHTML markup. Let's get it out into its own template file and included into the index.php file, and then see about making it more dynamic with WordPress template tags. Because I understand a little PHP, I'll include a small, custom loop which will use three WordPress template tags and a formatting function to call in the post information for the last five posts in category 3 (which is my Features category), then just display the perma link for each post and its title. Understanding PHP and how to craft your own bits of code and loops will enable you to have no limits on your theme's capabilities. The following script has the WordPress template tags highlighted in it, so you can see how they're used
Understanding how the Loop functions will help you understand how you can control it. Controlling the Loop to display exactly the content you want will be one of your most used tools in developing WordPress-powered web sites. Because the Loop is at the heart of every WordPress theme, being able to customize the display content opens up the doors to making WordPress look and act however you want.
With the help of this plugin, you will be able to edit a standard WordPress theme so that it's capable of managing and displaying all BuddyPress pages and content. Accomplishing this doesn't require you to make any edits to your template files and it's completely reversible. Install the BuddyPress Template Pack plugin and then activate it on your site. BuddyPress requires extra template files that a standard WordPress theme doesn't include. The extra template files that you require are, however, provided with this plugin.
Have you ever come across a WordPress theme available online and thought, 'Wow, this is a great theme but it would look even better if it had a green layout ' This happens to me really often, and I'm pretty sure it's happened to you as well. Of course, you'll need at least one readily available WordPress theme. You'll also need a text editor. In this example, we shall use the Vi text editor which is my favorite text editor however, even other decent text editors can do the job (TextEdit on Mac, gEdit on Ubuntu, or Notepad on Windows). 1. The first thing we need to know is the hexadecimal color codes for each of the theme colors. Most WordPress themes use a color scheme of three to five different colors.
I know, we're barely into the first chapter and I've mentioned this mysterious acronym DOM several times. I'll be mentioning it a lot more. Learning about the Document Object Model can really enhance your understanding of your HTML for WordPress theme design and jQuery enhancements.
Blogging For Maximum Profit
Working Hard, Working Smart or Both; Without The Right Plan, You're Working For Less Than You Could Be! Do You Have A Plan For Making Some Serious Cash With Your Blog NOW? Then download Blogging For Maximum Profits.