Browsed by
Tag: css3

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…