Create a Responsive WordPress Site with Streamline on Genesis

It is becoming more and more of a necessity to have a website that is responsive to smart phones and tablets. Here I’m going to explain about how I created the theme of RobCubbon.com using Streamline on the Genesis framework.

responsive design

The Genesis framework costs $60 and the Streamline theme costs $25 (you can get both at the same time for $80). If you purchase the theme through these links I receive a commission. If you do, I appreciate it and feel free to ask me any questions. Otherwise, you can purchase the products by Googling them and there’ll certainly be no hard feelings!

The great thing about using the Genesis framework is the price. You get all the advantages of using a professional WordPress framework and you can use it on multiple sites. I always use Genesis – for all my sites and all the sites I build for clients. In fact, I always build responsive sites for clients now, even if they haven’t asked for it, because the benefits are undeniable.

If you don’t want to use Streamline or Genesis, you can search for responsive themes on the WordPress theme directory.

So how do you make WordPress responsive?

Above is a video explaining how to install a responsive theme on WordPress and the first few steps to get it looking how you want.

Streamline is a child theme on the Genesis framework (more about child themes on Genesis here). As it is a child theme it needs to sit in the /themes/ directory next to the /genesis/ directory that contains the Genesis framework.

theme-files-wordpress

I also explain in the video above how to re-name your theme by amending the style.css and functions.php and renaming the “streamline” folder itself but this isn’t necessary. Once the theme folders are in the correct place in the WordPress install, you are ready to activate the theme in WordPress by going Appearance > Themes and selecting the Streamline theme and clicking Activate.

Congratulations! Your WordPress site is now responsive to smart phones and tablets!

Changing the header of the Streamline theme

Once Streamline is installed you can go to Appearance > Header and Appearance > Background to upload header and background images.

However, I like to do this by amending the CSS. In order to be able to amend the header and background by the CSS, you need to delete the following lines from the functions.php:

/** Add support for custom background */
add_custom_background();

/** Add support for custom header */
add_theme_support ( ‘genesis-custom-header’, array ( ‘width’ => 960, ‘height’ => 120 ) ) ;

Once these lines are deleted set your Header Settings in the Genesis Settings to “image logo” and you are free to style the header and background in the CSS along with everything else.

The CSS for any theme can be found in the theme’s folder and is usually called style.css. This can be edited through WordPress by going Appearance > Editor where you will see all the files in the main theme directory. However, this isn’t the best way to edit a large CSS file and you’ll probably want to use a code editor on your server to for more productive editing.

So, to add a logo image to the header you can amend the CSS like so:

.header-image #title-area { background: url(images/logo.jpg) no-repeat top left; }

Of course you have to remember to put your logo image (logo.jpg) in the streamline/images/ folder.

Changing the background of the Streamline theme

The background of the Streamline theme is actually a tiled image. Should you want to change this you should simply amend the body identifier in the CSS:

body { background: #E6E4E1; }

The above is the background color for this site. With Streamline this changes the background of the top navigation bar as well, but you can easily amend your CSS to get the top navigation bar to have a different background from the main body if you wish.

Creating the responsive elements

The advantage of amending an already responsive theme is that is cuts down the development time. Creating a responsive theme from scratch would take a lot longer.

However, I needed to make a few changes to the smart phone and tablet version to get them looking exactly how I wanted. I explained the basics of responsive CSS media queries in my other article. Here are some more specifics:

On the right side of my header I have some social media buttons that will take you through to my Facebook page, my YouTube channel, etc. Once the website is viewed by a device narrower than 960 pixels (an upright tablet, for example) the logo centers and the social media buttons disappear. (Go on – if you’re viewing on a desktop, re-size your browser window to see it working!)

The following media query in the CSS is added to the div #title-area to center the logo when the site is viewed on upright iPads:

@media only screen and (max-width: 960px) { #title-area { float: none; text-align: center; } }

So, as you can see, the media query @media only screen and (max-width: 960px) { } styles elements only if the website is narrower than 960 pixels wide.

The social media buttons were added in a text widget in Appearance > Widgets (more about styling widgets here). By using the Developer Tools in Chrome (or any other browser) you can see what unique identifier is used for each widget. In this case the div was #text-6. Here is the CSS that makes that widget disappear when the browser width is less than 960 pixels:

@media only screen and (max-width: 960px) {#text-6 {display : none ; } }

You can go on and on with this tweaking in the CSS to make sure that your site looks perfect on every device.

What you can do

If you want to change your WordPress site to become responsive I would definitely work on a copy of your site first. If you are setting up a new site to be responsive it may be an idea to work locally developing the theme by setting up WordPress on your computer using MAMP (Mac) or WAMP (Windows). In order to view how the website will respond on different sized devices, simply reduce and expand your browser window.

It’s not very difficult to do. Once you have the framework in place, creating a site for desktops, tablets and phones is almost as easy as setting up WordPress. You can do it!

Comments

  1. says

    Thank you Rob for this info. I am aware of genesis but not this theme.
    also please inform to all subscribers when you post a video on same topic.

  2. says

    Very cool blog, Rob!!!
    Btw, when you say you can use genesis for ”multiple websites” once purchased, does that mean ”for life time and for as many websites as you want”?

    • says

      Thank you, Fasil. Yes, Genesis is really good value for money as it is $60 and you can use it as much as you like and you have access to the support forums for life. There’s no “user’s license” and “developer’s license” as with Thesis and other frameworks. Of course, once you’ve bought the Genesis framework, you may want to buy an individual child theme but these only cost $20 or $30. I have only bought one so far!

  3. says

    Perfect!! ;)
    but, why would you wanna buy a child theme, Rob? And which child theme did you buy? Isn’t it my task to build a child theme for every project?

  4. says

    Great article; thanks! I now have the Genesis theme with the Streamline child, and I love how it looks. Just one small issue – I don’t know how to configure it so readers can see my older posts. My old WordPress theme used to have a “View older posts” link at the bottom of each page. Is there a way to offer that with Genesis/Streamline?

    Thanks for any thoughts on this!

    • says

      Hello Becky, that’s great. It’s certainly possible on all the blog archive pages as in the Genesis theme settings under Content Archives you can choose under Select Post Navigation Technique: “Numeric”, “Older/Newer”, “Previous/Next” – I always go for “Numeric”.

      However, looking at your site from the link you’ve given here it appears that you’re using the old Streamline theme (version 1) and I can’t remember how that works so much. There is obviously a custom home page in Appearances > Editor that you should be able to edit – although with caution! Also you could post a question in the forums and I’m sure they help you amend the home.php in the theme.

  5. says

    Streamline is really a very creative theme and i hope that this will be most loved theme of genesis after news theme.

    Thanks for sharing tips to make it responsive. I am using Streamline on one of my blog and hope this tutorial will help me to make my theme much better.

  6. says

    Hi Rob

    Another great post. Your work has been invaluable in my learning the basics of Genesis and hand-made child themes. Responsive design is doing my head in, however. I’m going to investigate this post’s recommendations, though, and see if I can work it out. If only because it pees me off when I rotate my iPad on my sites and they don’t shrink to fit.

    Thanks
    Dom

  7. says

    My Genesis WordPress site used to have a link at the bottom of my Home page saying “Older Posts” but it has disappeared. Can you help me figure out how to add that element back to my site, please?

    Thanks!

    • says

      I can’t really answer that without seeing your site from the back-end, Madge. This is controlled in the Genesis Theme Settings, under “Content Archives”, where it says “Select Post Navigation Technique:” but you should have something there.

    • says

      Glad you liked it, Sharon. It’s definitely better to get a responsive theme first and tweak that (as long as it’s a good one) rather than to make an unresponsive theme responsive – which is possible but will take you longer. :)

  8. says

    Really great post, i activate streamline theme on my blog but i m having some problems like sidebar is not showing side bar, Newsletter address change option is not available.

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.