WordPress.org

Ready to get started?Download WordPress

Forums

[closed] How To Create A Responsive Theme From Scratch (9 posts)

  1. decentguy49
    Member
    Posted 1 year ago #

    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.

  2. David Beja
    Member
    Posted 1 year ago #

  3. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

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

  4. bigmike828
    Member
    Posted 1 year ago #

    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]

  5. richardpd
    Member
    Posted 1 year ago #

    @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 ?!.....

  6. bigmike828
    Member
    Posted 1 year ago #

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

  7. Mahesh
    Member
    Posted 1 year ago #

    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.

  8. pallavi.chanodia
    Member
    Posted 1 year ago #

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

  9. Ali Siddique
    Member
    Posted 1 year ago #

    What is for underscrore.me Emil Uzelac

Topic Closed

This topic has been closed to new replies.

About this Topic