Browsed by
Tag: html5

Creating a WordPress Theme from Scratch: Dynamic CSS3

Creating a WordPress Theme from Scratch: Dynamic CSS3

CSS3 and HTML (5) comes along with a great tool to give your pages a different look depending on different features of the client.

Differently sized pages can have different CSS styles without having to do anything fancy. In fact most modern browsers on a desktop (Firefox, Chrome, Safari) all cause a re-evaluation of the screen size when it is changed. This means the user always get a nice looking site without any unnecessary scrolling regardless of device or screen size:

<link rel=”stylesheet” href=”small-style.css” type=”text/css” media=”screen and (max-width:480px)”>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen and (min-width: 481px) and (max-width: 1024px)”>
<link rel=”stylesheet” href=”large-style.css” type=”text/css” media=”screen and (min-width: 1025px)”>

Suddenly we have three different CSS files that can feed the page: resize divs, change the font size or even hide entire sections.

Some websites take you off to a completely different subdomain of their site (e.g. m.mywebsite.com).

This means that you have to maintain a completely separate subdomain. Analytically I don’t see any benefit really – you still get the stats from your Google Analytics of user agents and hence how many people are accessing the site on their mobile.

In terms of adverts, there will be no different as to which system is used really.

So assuming that you want to show the same content to your users regardless of their device, this responsive method is definitely more useful.

Alternatively you can use just one CSS file and include:

@media screen and (max-width: 480px) {
/* SMALL SCREENS */
.menu{
display:none;
}

.mobile-menu{
display:inline;
}
}

/* NORMAL SCREENS */
.menu-title{
display:inline;
font-size:24px;
}

.mobile-menu{
display:none;
}

@media screen and (min-width: 1025px) {
/* LARGE SCREENS */
.menu-title {
display: inline;
font-size:32px;
}

.mobile-menu{
display:none;
}
}

This is just the surface of how the dynamic web pages work and there are some great frameworks out there that you should investigate to help you with your design: e.g. normalizemodernizr

Creating a WordPress Theme from Scratch: Adding Menus

Creating a WordPress Theme from Scratch: Adding Menus

As discussed in previous post, functions.php is automatically included in the processing of a theme. This is therefore the best place to add default settings that you want to a theme, as well as helper functions.

To make sure that a function is called on the initialisation of a theme you should use the following in the functions.php file:

function add_menus(){
// Do Stuff Here
}
add_action( ‘init’, ‘add_menus’ );

In order to register the menus for your theme you need to use: register_nav_menus with an array of ‘slugs’=>’descriptions’:

register_nav_menus(
array(
‘main_nav’ => ‘The Main Menu’,
‘footer_nav’ => ‘The Footer Menu’,
)
);

This will do two things.

1) It will add an ability to edit menus on the theme once activated:

Adding Theme Settings

 

It will also add all the menus that you have specified to the list of possible menus that you can use:
Menus of a Theme

 

Now to actually display the appropriate menu you just need to call wp_nav_menu(‘slug’).

So our example would be wp_nav_menu(‘main_nav’); or wp_nav_menu(‘footer_nav’);

This will print out whatever menu you have in those drop downs above.

However if one isn’t selected it seems to still show the menu with Home and About. So I created a wrapper in my functions.php as so:

function get_menu($menu){
$locations = get_nav_menu_locations();
if ($locations[$menu]){
wp_nav_menu(array(‘theme_location’=>$menu));
}
}

Now I simply call get_menu(‘main_nav’); and it will either show nothing if the menu is blank or it will be the actual menu selected.

That is it for menus for now. Remember to check how WordPress outputs the menus and change the CSS to suit how you want it to. (e.g. by default it uses menu-top-menu as the class). Or you can use a custom class  when calling wp_nav_menu():

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );
Creating a WordPress Theme from Scratch: Structure of a Theme

Creating a WordPress Theme from Scratch: Structure of a Theme

If you have been following my post to setup the site from scratch you will just have three files in your theme directory:

Files in Theme Directory

 

This post is simply to tell you how WordPress processes things nicely technically so you can decide how best to use it for your design. Actually working out what your website is going to look like is a completely different task.

There are some built in files that WordPress expects that are immediately useful:

  • header.php
  • footer.php
  • functions.php

WordPress uses get_header() and get_footer() to grab the contents of these files.

functions.php is automatically included which is useful for setting up helper functions, creating menus for a theme or changing other variables within WordPress.

Similarly it is worth keeping in mind that the following pages can be used to define the outline for how the appropriate pages will look (however for an initial theme it probably isn’t worth editing these):

  • archive.php
  • category.php
  • tag.php
  • 404.php

Without any of these files, WordPress will simply look at your index.php and work out what to do from that.

So for now it is probably just inputting some values into the header and footer to get the structure of your site sorted.

index.php:

<?php
get_header();
get_footer();
?>

header.php:

HEADER

footer.php:

FOOTER

Going to the dashboard and now activating your new theme will simply show HEADERFOOTER on every page that is valid.

Cool. Now you can change those files to contain sensible contents (e.g. html, head and body tags!).

I also noticed that there were some issues with the default CSS – so remember to override anything you don’t like – e.g. body having a margin at the top!

Still to come: Adding Menus

Creating a WordPress Theme from Scratch: Getting Started

Creating a WordPress Theme from Scratch: Getting Started

There are actually only two files that you need to get a basic theme up and running: index.php and style.css. If you add these to a new theme folder (wp-content/themes/new-theme-dir/) then you can choose your theme from the dashboard (Appearance->Themes):

New blank theme

 

To populate this data with the details of your theme, you need to create an initial comment in the style.css file like so (I called my theme Raul just because…):

/*
Theme Name: Raul
Theme URI: http://www.dezco.co.uk/
Description: A nice clean news looking design.
Author: Robert Desmond
Author URI: http://www.dezco.co.uk/
Version: 1.0
Tags: responsive, white
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Detailed Theme

To add a screenshot of how you want your theme to look you simply need to add a file called screenshot.png to your theme directory (dimensions 600×450). (I took a picture of my drawing on paper until I would finally get a real screenshot!)

Updated Screenshot

There you go! You now have a theme that you can activate although you are probably a fair way from making it look good!

Next steps: Structure of a Theme…

Creating a WordPress Theme from Scratch

Creating a WordPress Theme from Scratch

I recently started creating a WordPress theme from scratch.

WordPress Logo

I did this so I could understand a few things:

  • The back-end of WordPress and how it fits together
  • How plugins, widgets and themes are constructed
  • How to create dynamic web-pages for mobile devices using CSS3 and HTML5

Creating everything from the ground up helps the understanding of how things fit together – but if you just want to get something working then there are plenty of other themes out there that will kickstart your development. (See Child Themes)

Throughout this process I have set myself a goal of creating a theme that is accepted by WordPress so the public can use it easily (although I am not sure I will have the time to maintain it going forward). If that goes well then perhaps I will even create a Premium Theme that I could sell if it’s good enough. That would give me motivation to keep the theme updated!

There are many articles out there that discuss the different CMSs (Content Management Systems) and the benefits of WordPress in comparison. I have a little experience with a few other CMSs – Escenic, a couple of bespoke CMSs, Joomla, Drupal…etc… However, perhaps through familiarity, much prefer the use of WordPress.

WordPress just works. It is well supported with decent community designs and features (although a few plugin’s don’t work the way you want – so create your own as per these tutorials or use recommendations from others).

A few people have commented to me that WordPress is a bit antiquated, however I feel it is continually updated with new features in the back-end and front-end (through themes).

WordPress works extremely well for almost any purpose of a website, not just blogs; but news sites, personal sites, information sites, static sites, commercial sites… and it is really quick and easy to set-up.

Also it is FREE!

Anyway, this page will include more and more links to tutorials over the coming weeks to help people (like the future version of myself that will forget) create and tweak their own website through some of the more technical parts of WordPress using PHP: