background preloader

How to Build a Custom Wordpress Theme from Scratch

How to Build a Custom Wordpress Theme from Scratch
If you’re confident with your CSS and HTML, it’s not hard at all to step up to the challenge of building a custom WordPress theme. This overview shows the process of how my latest custom WordPress theme was built from design concept through to completed theme. See how the static design is split up into the various WordPress theme files, and discover how the simple PHP snippets can add that dynamic functionality of a blog. The theme I'm working on is named Sticky. With the post focusing on the production of the theme, I won't go into too many details on how the design was built, but you can see from the Photoshop previews that it uses a 16 column grid with 24px baseline; a fairly muted colour palette of a beige and grey, with a dark red as a highlighting colour for links; typography is set to serif font throughout for that touch of class! Before getting stuck into the build process, it's important to know how WordPress themes work. Configuring the stylesheet Populating the header

Pages Languages: English • Español • Français • Italiano • 日本語 • 한국어 • ລາວ • myanmar • Nederlands • Português do Brasil • Русский • Slovenčina • ไทย • 中文(繁體) • (Add your language) In WordPress, you can put content on your site as either a "post" or a "page". When you're writing a regular blog entry, you write a post. In contrast, pages are for non-hierarchical content: pages like "About" or "Contact" would be common examples. In addition to the common "About" and "Contact" pages, other examples include "Copyright", "Disclosure", "Legal Information", "Reprint Permissions", "Company Information" or "Accessibility Statement". In general, pages are very similar to posts in that they both have titles and content. What Pages Are Pages are for content that isn't specifically time-dependent, or which isn't "blog content". What Pages Are Not Pages are not posts, so they don't appear in the time-structured views within a blog section of a website. Creating Pages Pages > Add New Organizing Your Pages

Create a Compelling Resume Online With WordPress | Jon DiPietro is Domesticating IT Do you stand out? Here’s a news flash – the economy is a little rough these days. With the unemployment rate creeping up, it’s a time when you need to be clear about what you can bring to a prospective employer or client and, above all, to stand out from the competition. Fortunately, it’s cheaper and easier than ever to make yourself “present with authority.” One of my new year’s resolutions was to get my online identity sorted out, which means making the most of the available tools and delivering a consistent message. What Are the Benefits? If you think about your career as a product that you’re selling, wouldn’t it make perfect sense to have a web site? More and more, clients and employers are performing online searches to learn more about the people with which they are considering to engage. Laying the Groundwork The first decision is your domain name. Turn the Page Now it’s time to set up the pages. HomeAbout MeWork HistorySkillsVolunteerismExperienceCompaniesSocial NetworksContact Me

Stepping Into Templates Stepping into Templates Languages: English • 日本語 • 中文(简体) • (Add your language) Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions. A traditional web page consists of two files: The XHTML page to hold the structure and content of the page and the CSS Style Sheet which holds the presentation styles of the page. In WordPress, the (X)HTML structure and the CSS style sheet are present but the content is generated "behind the scenes" by various template files. The WordPress Page Structure A simple WordPress web page structure is made up of three basic building "blocks": a header, the content, and a footer. Basic Template Files To generate such a structure within a WordPress Theme, start with an index.php template file in your Theme's directory.

Mind Blowing WordPress Plugins In Dallas, August 29, 2010, at OpenCamp I presented “Mind Blowing WordPress Plugins.” Here are the WordPress Plugins and more features during my presentation. Let me first define what my qualifications for a “mind blowing WordPress Plugin” were, as I had to sift through thousands of Plugins and then filter down to include the following in my 50 minute presentation. To me, a mind blowing WordPress Plugin is one that breaks the rules. It is unique and original in its implementation, and pushes WordPress. It might not be a Plugin that everyone must have on their site. I’d love to know if you’ve found a WordPress Plugin that really and truly blows your mind, pushing the capability of WordPress beyond “just a blog” or simple website. WordPress Plugins As of the day I gave my presentation, there were 11,040 WordPress Plugins in the WordPress Plugin Directory. In fact, our blogs are built on WordPress Plugins. The cumulative list included: Development of WordPress is a crowd sourced project.

C'est quoi Foursquare : tentative de présentation en 51 slides Category Templates Category Templates When a viewer clicks on a link to one of the Categories on your site, he or she is taken to a page listing the Posts in that particular Category in chronological order, from newest Posts at the top to oldest at the bottom. There are many display choices, including whether to display the complete post or post excerpts, and what additional information to display (title, author, publish date, last modified time, etc.). Each theme makes different choices, and you might want to change them. This article explains how to change what happens when the blog viewer is visiting one of your site's Category pages. Permalinks to category archives are controlled Using Permalinks settings. What Template File is Used? The first step in modifying what happens when someone visits a Category page is to figure out which of your theme's files is going to be used to display the posts. In the case of categories, the hierarchy is fairly simple. Adding Text to Category Pages Static Text Above Posts

Getting set up with the WP e-Commerce plugin: settings and configuration Hi Adam, please can you advise if you were using the Gold Cart in your video presentation? We are currently building a shop in our new website and so far have only downloaded the free e-commerce plugin. I know nothing about php etc so I have struggled a little and finding your video was a great help, as I seem to have done most things corrently, albiet by trail and error. Two major items I need help with – I have set up a couple more Form Sets for the checkout as we need to get additional information from our members. There does not appear to be any way to select a unique name apart from what is displayed on the drop down list. I would like to be able to see these additional check out fields on the purchaser email, but currently they are not and I could not find how to get the tags you mention in the email settings on the Admin page. The new website we are currently working in, which is not yet live is

Encre de Lune - Series: WordPress pour les nuls « Avant de démarrer Un guide tout simple pour comprendre WordPress même quand on n'a jamais fait un site Web. Tout d'abord, la préparation, tout ce qu'il faut avoir avant l'installation du CMS WordPress. L'installation Un tuto simple et pas à pas pour installer WordPress sans se prendre la tête. Problèmes à l'installation Comment résoudre les erreurs à l'installation de WordPress les plus fréquentes : mauvais répertoire, pas de connexion à la base de données, message d'erreur "Cannot modify header" Les premiers pas Une fois le blog WordPress installé, il y a quelques réglages de base à faire avant de démarrer, soit pour la sécurité, soit pour la structure des urls (permaliens) Passer de Dreamweaver à WordPress Passer de la réalisation d'un site statique via l'éditeur wysiwig de Dreamweaver à un site sous WordPress implique de totalement changer ses habitudes, et de comprendre la logique de son nouvel outil.

Page Templates Page Templates Pages are one of WordPress's built-in Post Types. You'll probably want most of your website Pages to look about the same. Selecting a Page Template Your Theme files should include a default page template (named: page.php). Edit Page Screen: You can assign a custom template for any individual Page by using the Template dropdown in the Edit Page screen (part of the Page Attributes module): Select a Template from the list (e.g., My Custom Page). All Pages Screen: The Quick-Edit and Bulk Edit options on the All Pages screen also have Template dropdowns. Template List Will Show Only If: There is at least one custom page template file in your active Theme's folder. Creating a Page Template WordPress offers several ways to display Pages. Conditional Tags Edit your default template: You can often make smaller Page-specific changes with Conditional Tags in your Theme's page.php file. Specialized Page Template page-{slug}.phppage-{ID}.php /wp-content/themes/my-theme/ Custom Page Template <?

Grey: A New Free HTML5/CSS3 WordPress Theme Nik and I have been busy working on our first WordPress theme exclusively for webexpedition18 readers. Grey theme was built to have an elegant, out of the box, design with a strong core layout structure. Grey is generic enough to be used for almost any kind of blog. Whether you’re looking to setup your own design blog, a blog about photography, fashion or whatever your passion, the Grey theme should suit your needs. HTML5 / CSS3 ThemeCSS3 features: border-radius, multiple backgrounds, text-shadow, box-shadowCompatible with 3.0+ WordPress versionsGrey Options PanelBuilt-in Twitter and Flickr streamSupports threaded commentsWidgets readyAuthor BoxEnhanced with jQuerySEO orientedTested in Firefox, Safari, Chrome, Opera, IE8+Free Now let’s take a closer look at this awesome WordPress theme. Layout is created using new HTML5 tags. headernavsectionarticlefooteretc. Menu is customizable with menu editor tool in WordPress. Layout supports author box so you can add your signature to every post.

Related: