Support » Themes and Templates » How To Create A Responsive Theme From Scratch

  • Hello,

    After using wordpress from a long time now i decided to create my own theme, as responsive themes are very popular today so i want to create a Responsive theme.

    Can you plz tell me any tutorial or guide which help me to make a Responsive theme from scratch.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Emil Uzelac

    (@emiluzelac)

    No need to go there, just do this http://underscores.me/ instead!

    bigmike828

    (@bigmike828)

    Simple yet very effective:
    HTML

    <div id="wrapper">
       <div id="header">
          <h1>Your Site Title</h1>
       </div><!-- end header -->
       <div id="main">
          <div id="content">
             <h2>Your Content Title</h2>
             <p>Your content blah blah...</p>
          </div><!-- end header -->
          <div id="sidebar">
             <p>Your sidebar content...</p>
          </div><!-- end sidebar -->
       </div><!-- end main -->
       <div id="footer">
          <p>Your footer content...</p>
       </div><!-- end footer -->
    </div><!-- end wrapper -->

    CSS

    #wrapper {
       max-width: 1200px;
       width: 95%;
       margin: 0 auto;
    }
    
    #header, #main, #footer {
       width: 100%;
    }
    
    #content {
       width: 65%;
       float: left;
    }
    
    #sidebar {
       width: 35%;
       float: left;
    }
    
    #footer {
       clear: both;
    }

    The main thing here is to use the “max-width” and “width” on the wrapper (or whatever did you have wrapping the content).

    I’m using this style of coding on my website:
    [Signature removed]

    @decentguy49
    Have you found a good reference yet? I’m starting to look around at responsive designs & there is loads of material around for general sites and I suspect most of the principles can be implemented/applied to a WordPress theme.

    @dbeja
    Thanks for the link

    @bigmike828 aka @bestwpdesigner
    Surely you mean HTML5 ?!…..

    Your site doesn’t have to use HTML5 tags to be responsive.

    Underscores theme is a good way to start your own theme. But if you want to make your existing theme responsive then you have to make changes to the stylesheet so that the elements responds as per the devide width.

    I want to use my exisiting theme responsive. Any idea for good tutorials?

    What is for underscrore.me Emil Uzelac

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How To Create A Responsive Theme From Scratch’ is closed to new replies.