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

100+ Resources for WordPress Theme Developers – DesignM.ag Get the FlatPix UI Kit for only $7 - Learn More or Buy Now One of the great things about working with WordPress and developing your own themes is the community and all of the resources that are available. If you’re not sure how to do something or looking to see what solutions other theme designers and developers are using, you can find plenty of infomation and tutorials to help. In this post we’ll feature a wide selection of resources that are extremely useful for theme designers and developers. All of the resources in this post are categorized and hopefully you will find a number of new resources that will be practical for your own work. WordPress Essentials and Basics: This section includes some official resources for the WordPress community, a few books about theme design, and some general articles that will help you to get more out of your development for WordPress. WordPress Support Forums The community of WordPress users is a great place to turn when you have questions. Child Themes:

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.

7 Awesome WordPress Plugins To Give Your Dashboard A New Look | Graphic and Web Design Blog -Resources And Tutorials If you are a regular user of WordPress like me then you might get bored of the default user interface of WordPress. Although the User Interface of WordPress is good but there is always room for improvement. Automattic the company behind WordPress has decided to go for Open Source Design Contests to make the User Interface of WordPress even better. Are you ready to give it a try? Default WordPress Dashboard In the article we will take a look on some awesome plugins that can alternate the user interface of WordPress to make it more users friendly. 1. Admin Drop down Menu is one of the best WordPress plugins to change the default user interface of WordPress admin area. Admin Drop Down Dashboard The plugin comes with a comprehensive options page. Admin Drop Down Options An interesting feature is compact mode which only shows icons for top links and saves space in the drop down menu. Compact Mode 2. Give your WordPress an attractive look with Fluency Admin. Fluency WordPress Dashboard 3. 4. 5. 6.

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

25 Fresh, Clean and Unique Wordpress Themes Lets be honest, when you look at the volume of WP themes that are available, there is not really that much originality. They are basically they same theme re-hashed in a different style. That maybe fine for some, but not for me. I look for all of those individual elements that add up to something original and unique, something that sets the theme apart from the rest. Perhaps that is why I am always drawn to a minimal theme, where the elements and the unique functions are obvious, and the developers skills are clearly evident. Anyway, for this article, I have collected 25 fresh WordPress themes that I think set themselves apart from the rest, purely for there uniqueness. Aparatus GoodTheme Zexee The Structure Theme Crispp Mayumi WpStream Newspress Hipsterist DailyNote from DesignDisease Bueno Unwakeable Theme Obscure Gadgetizer Theme Tanzaku MiniCard BlueBubble Satoshi Clear Fifty Fifth Street Neutra mnml galleria – siimple Purple Block Functionalism Ulap Theme

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 <?

55+ Most Wanted WordPress Tips, Tricks, and Hacks There are times when you come across a feature in a blog, and you just start thinking to yourself: How can I get this in my WordPress blog/site as well. Everybody have experienced this feeling. Sometimes you know you want it, and don’t know where to look for, or even what to look for. In this article we will be sharing some of the most wanted WordPress Tips, Tricks, and Hacks that you will definitely find useful. These tutorials are classified under various skills level. For some tutorials, you will need to know basic HTML and some WordPress Knowledge. WordPress Theme Cheat Sheet for Beginners 1. This is one of the most wanted hacks that users want to know how to accomplish. You can change the template name. Once you have published this page go to Settings » Reading in your admin panel. And select your page to be the homepage. 2. Have you ever been to a site and saw this cool feature? You would need to follow the trick #1 in this article to create a custom page template. 3. 4. 5. 6. 7.

Template Hierarchy Languages: English • Français • Italiano • 日本語 • 한국어 • Русский • Español • Português do Brasil • 中文(简体) • (Add your language) Introduction WordPress Templates fit together like the pieces of a puzzle to generate the web pages on your WordPress 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. What this article is about This article seeks to answer the following question: Which template file(s) will WordPress use when it displays a certain type of page? Who might find this useful Since the introduction of Themes in WordPress 1.5, Templates have become more and more configurable. Using Conditional Tags WordPress provides more than one way to match templates to query types. The Template File Hierarchy The General Idea WordPress uses the Query String — information contained within each link on your website — to decide which template or set of templates will be used to display the page. Examples

31 Rare Wordpress Themes | TutZone Over the past few years with the influence of premium themes, High quality free WordPress Themes have become harder and harder to find. Designers and developers are selling their themes, which is right for their awesome effort and work, the free wordpress themes are not coming in the flow as they were used to some time. Nevertheless, we have went through many sources and are presenting a showcase of beautiful, but rather lesser known themes you might have missed. DeltaCrea DeltaCrea is a 2 column dark wordpress theme packed with theme option, twitter and flickr ready. Theme URLDemoDownload Spectrum A beautiful and colorful WordPress Theme designed by Ignacio Ricci. Theme URLDemoDownload Furvious A fantastic design with 5 color styles to be choose. Theme URLDemoDownload A 1 column layout artistic Design. Theme URLDemoDownload Kubrick On Crack A WordPress theme that is built for the traditional blogger. Theme URLDemoDownload MoneyBlog Designed by Design Disease for MoneyBlog.com. KeKo Mystique Curtain

Getting Started with WebsiteDefender on WordPress - WebsiteDefender.com Step 1 – Login to your WordPress dashboard and mouse over the Plugins section to your left. Click on Add New. Step 2 – In the Search box, enter WebsiteDefender and click on the Search Plugins button. Step 3 – Click on the Install Now link where the WebsiteDefender WordPress Security plugin is shown. Step 4 – Click on the Activate Plugin link. Step 5 – Click on the WSD Security node to get an initial Report of the security of your blog. Step 6 – Proceed to the Database node to create a backup of your database and to harden the security of your WordPress database.

Related: