background preloader

How WordPress Themes Actually Work [INFOGRAPHIC]

How WordPress Themes Actually Work [INFOGRAPHIC]
WordPress developer and all-around web geek Joost de Valk has just graced the Internet with a highly useful infographic. For a medium that leans toward the amusing, infographics can occasionally be enlightening or even helpful for later reference. This one serves as a sort of "cheat sheet for how your blog works" and takes the reader through the basics of a normal WordPress theme. It's a posts-to-plugins look at the anatomy of a typical WordPress theme. Click to see original.

My Wordpress Cheat Sheet I know that there are many resources regarding this topic but there are never enough. This post is dedicated to small snippets from WordPress that will make your life easier. Or maybe my life easier and in this case I want to have them in one single post. In a way I’m trying to help you and in another I’m trying to organize this stuff for myself. Theme Structure If you want to create a WordPress theme, these following files must be included in order to be a standard theme. header.php - header section index.php - main section sidebar.php - sidebar section footer.php - footer section single.php - post template page.php - page template comments.php - comments template search.php - search content searchform.php - search form archive.php - archive functions.php - special functions 404.php - error page The Loop You will often see “the loop” as reference in many tutorials or samples. <? Note: the space in front of ? Template Include Tags Template Bloginfo Tags < ? WordPress Conditional Tags < ?

How JavaScript & HTML5 Are Remaking the Web The Future Web Series is supported by Elsevier's SciVerse Application Marketplace and Developer Network. The SciVerse applications platform enables developers to build apps based on trusted scientific content. Learn more. HTML5 is no longer just a buzz word. It — along with JavaScript and CSS3 — is quickly helping reshape perceptions of what a web browser and web standards can achieve. With browsers implementing more HTML5 features across platforms and devices, developers are starting to integrate many of the new features and frameworks into their web apps, websites and web designs. Although HTML5 is its own standard, the power of HTML5 is really only best realized with the use of CSS 3 and JavaScript. Graphics libraries like WebGL can extend JavaScript, allowing for the creation of interactive 3D graphics within the browser all while utilizing the plugin-free nature of the HTML canvas element. WebGL Brain Surface and Tractography Viewer Google Body Browser MathBoard Lost World's Fairs

Multiple sub directories for theme template pages So you want to create WordPress themes huh? HOW TO: Design & Program a Facebook Landing Page for Your Business Jonathan Goldford is a partner at Wired Impact, a web design company that builds websites for nonprofits. You can connect with Jonathan on Twitter and on the Wired Impact Facebook page. Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. Michael Jackson, Lady Gaga, Starbucks, and the TV show House each have more than fifteen million "Likes" and are growing rapidly. While there are an enormous number of articles that talk vaguely about how to create a custom landing page, very few discuss the nuances of actually designing and programming one. Designing Your Company’s Facebook Page Actually designing a Facebook Page is very similar to designing any website, except for a few considerations: Design for a 520px Width — Facebook Pages must fit within a width of 520px. To take into account the 520px width and the distance for your Like button, you may want to take a screenshot. Programming Your Company’s Facebook Page facebook.html Regular HTML

How to create custom Wordpress Page templates – for example a page showing subpages Create a php file with some unique name (like snarfer.php) and put it in your WordPress theme directory. This is the way you create a WordPress Page templates: <?php /* Template Name: Snarfer */ This is an example of a Worspress Page template which displays a Page including subpages: Conditional tags for a Page templates are: is_page_template() is_page_template( ‘the_name_of_yout_page_template.php’ ) More info for conditional tags – Before you see the newly created WordPress Page template you may need to go to your theme manager and reactivate your current theme, otherwise you may not see the new Page template in the drop-down inside the administration of your pages. For more info and other page template examples visit: Tagged as: page, subpage, template, Wordpress

How To Create WordPress Themes From Scratch I’m going to show you how to create a wordpress theme from scratch in these 3 parts of tutorial series. I will cover from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation. Table Of Content Below is the index of the topics that we will go through: Structuring This is a very important part in designing a web layout. HeaderPosting areaSidebarSingle pageCommentFeedbackSearching fieldPage menuRSSArchives, Links and About Page Something we need to keep in mind. Display too many things in one single page.Use too many colors and font type. In this sample, I also try to make is as simple as possible because the purpose of this series of tutorial is to give an example on how to create a wordpress theme. Final Result Photoshop Step 1 Create a new document with 1024px X 768px as we are going to create a layout which suit for 1024px resolution. Step 2 Grab the rectangle tool and draw a header for it. Step 3 I use Myriad Pro. Step 4 Step 5

Where to put snarfer.php? The Ultimate WordPress Cheat Sheet Messing around in WordPress is a pure knowledge thing. It really has nothing to do with skill since all you really have to do is learn what all the different tags do, mean and what their possibilities are. There is no other way to get to that information than to check the tags out and try them for yourself or read up about each one of them. It so happens that after the huge success of Techking‘s HTML 5 infographic, they set out on a mission to create one of the most complete (if not THE most complete) WordPress Cheat Sheets you can lay your hands on, and it is completely free. So if you’re a theme creator or a WordPress modifier and blog owner, you can step up your game with this ultimately useful sheet.

Related: