Styling a WordPress Theme

posted: category: web-design


Styling a WordPress Theme

So far in the process of creating a WordPress Theme, I have setup my test environment, gathered all of my resources, and created the template files. With all of that in place, I now have a very basic WordPress Theme, with hardly any styling. This brings me to the next step, styling the theme. Now, in the end, users are going to want to be able to make changes and adjust the style of any theme that they download and install. Before I start adding these customization options, I want to have a basic setup and styling to use as the default. So, let us get into this latest post on creating a WordPress Theme.

You Need a Solid Base

There are still going to be quite a few steps before this WordPress Theme is completed; though, like just about everything that involves detail, you need a solid base. That is the purpose of this initial styling - creating this solid base, from which I can add customization options into the admin dashboard in WordPress. In order to show exactly how the progress is coming along, I have put up a live version of this WordPress theme.

http://wordpress-theme.cloudymouse.com

From there, you can see the WordPress theme in action. Also, if you would like to, at any time you can download this theme in its current state. Whenever I go through a series of changes and updates, I will add them a zip file that you can download -

ZIP File of CloudyOne WordPress Theme

Now, let us get back to creating a solid base. There are several main areas of a WordPress site. You got the wrapper, header, menu, content, sidebar, and footer. Or at least, in my theme those are the main areas. The wrapper wraps everything. Right inside the wrapper is the header, followed by the menu (or access). Next, the content and the sidebar are side by side, with the footer at the bottom. Here is an example of some basic CSS for formatting these sections:

grow your small business

learn more about the creation of a business blog


body { text-align: center; } #wrapper { display: block; width: 940px; margin: 0px auto; background: rgba(255,255,255,.7); box-shadow: 0px 0px 10px; } #header { max-height: 200px; } #content { width: 74%; padding: 5px; float: left; background: #fff; } #sidebar { width: 23%; float: right; }

This is an incredibly basic setup that relies on the changing of the body background color to adjust the overall color of the site. This will put everything in place, other than the menu. The menu requires a bit more work. I have been making sure that this WordPress theme will use a responsive design and not quite finished working on the menu. I still need to add the javascript for creating a drop down for mobile devices.

If you want to check out all of the styling that I have done so far, here is the stylesheet that I am currently using -

http://wordpress-theme.cloudymouse.com/wp-content/themes/cloudyone/style.css

In the past couple of entries, I talked about creating a template. Well, at least for now, I have put the header, sidebar, and footer templates back with the index template. That means one file for the entire template, other than the functions file and the stylesheet. Here is the source code that I am currently using for the index file:

<!DOCTYPE html> <html> <head> <title><?php if ( is_single() ) { single_post_title(); } elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); } elseif ( is_page() ) { single_post_title(''); } elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); } elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; } else { bloginfo('name'); wp_title('|'); get_page_number(); } ?></title> <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="wrapper" class="hfeed"> <div id="header"> <h1 id="blog-title"><?php bloginfo( 'title' ) ?></h1> <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" /> </div> <div class="access"> <ul id="mobile" class="menu"> <li class='mobile bMenu' onclick='dropMenu();'></li> <li class='mobile bHome' onclick='linkC();'></li> <li class='mobile bPhone' onclick='linkB();'></li> <li class='mobile bEmail' onclick='linkA();'></li> </ul> <?php wp_nav_menu(); ?> </div> <div id="main"> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="topPost"> <?php // check if the post has a Post Thumbnail assigned to it. if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <h4 class="date">Posted on <?php the_time('F jS, Y') ?></h4> </div> <h1 id="mainTitle"><?php the_title(); ?></h1> <p id="start"><?php the_content(__('(more...)')); ?></p> <hr> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> </div> <div id="sidebar"> <?php if ( dynamic_sidebar('home_right_1') ) : else : endif; ?> </div> </div> <div id="delimiter"> </div> <div id="footer"> <?php if ( dynamic_sidebar('footer_1') ) : else : endif; ?> <p id="copyrights">Site Copyright - . Cloudysites Theme Developed by <a href="http://cloudymouse.com" target="_blank">Cloudy Mouse Web Design</a>.</p> </div> </div> </body> </html>

And the source code for the functions file:

<?php // Make theme available for translation // Translations can be filed in the /languages/ directory load_theme_textdomain( 'cloudyone', TEMPLATEPATH . '/languages' ); $locale = get_locale(); $locale_file = TEMPLATEPATH . "/languages/$locale.php"; if ( is_readable($locale_file) ) require_once($locale_file); // Get the page number function get_page_number() { if ( get_query_var('paged') ) { print ' | ' . __( 'Page ' , 'cloudyone') . get_query_var('paged'); } } // end get_page_number add_theme_support( 'post-thumbnails' ); add_theme_support( 'custom-background' ); $args = array( 'flex-width' => true, 'width' => 940, 'flex-height' => true, 'height' => 199, 'default-image' => get_template_directory_uri() . '/images/header.jpg', ); add_theme_support( 'custom-header', $args ); /** * Register our sidebars and widgetized areas. * */ function arphabet_widgets_init() { register_sidebar( array( 'name' => 'Home Sidebar', 'id' => 'home_right_1', 'before_widget' => '<div class="floatWidgets">', 'after_widget' => '</div>', 'before_title' => '<h2 class="rounded">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'arphabet_widgets_init' ); function arphabet_widgets_init2() { register_sidebar( array( 'name' => 'Footer', 'id' => 'footer_1', 'before_widget' => '<div class="floatWidgets">', 'after_widget' => '</div>', 'before_title' => '<h2 class="rounded">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'arphabet_widgets_init2' );

In the functions file I have added two widget areas, one in the sidebar and one in the footer. Users can add as many widgets as they like in the sidebar or footer. Eventually, I plan on adding a widget area to the header and having two separate widget areas in the footer.

That is all for now. I am still working on this styling and once it is completed, will begin adding customization options into the WordPress dashboard. From there, it is not too much further to go.

Just remember, after you setup your initial template files, go ahead and style a basic website, as if you were creating it for a single user or business. From there, you can add customization options and start grabbing information from the WordPress database. Check back next time to learn about the placement of Widgets and adding customization options.

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.