1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Sample WordPress Theme Design

Discussion in 'WordPress' started by webmastersb, Jan 24, 2015.

0
  1. #1
    Open themes folder by ftp : wp-content/themes

    1) make a theme name folder for example : "mytheme"
    2) make a file whit this name "style.css" . minimum content of this file
    /*
Theme Name: mytheme
*/
    Code (markup):
    3) make a file with this name "index.php" in your theme folder ..

    congratulation you make first your WordPress theme ! , you must enable it on your appearance section of admin dashboard ( siteaddress/wp-admin/themes.php )

    now you must design your theme . it show a completely white page on your home "siteaddress" if you active the theme . don't worry about that . go to step 5 !

    5 ) now open "index.php" file with notepad or notepad++ and edit it
    
<?php get_header(); ?>

<?php get_footer(); ?>
    Code (markup):
    6) now you can make these files in mytheme folder "header.php" and "footer.php"
    header.php content :
    
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <title><?php wp_title( '|', true, 'right' ); ?></title>
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
        <?php wp_head(); ?>
    </head>
<body <?php body_class(); ?>>
   <div class="wrap">
    <div id="wrap-inner">
        <header id="header">
            <h1 class="site-name">
                <a href="<?php bloginfo(url); ?>" title="<?php sprintf( __( 'Permanent Link to %s', 'sadegh' ), the_title_attribute( 'echo=0' ) ); ?>">
                    <?php bloginfo( 'name'); ?>
                </a>
            </h1>     
            <div class="description"> <?php bloginfo( 'description'); ?> </div>
        </header>
    Code (markup):
    footer.php content :
    
        <footer id="footer">
            <p>Copyright &copy; <?php echo date("Y"); ?> All Rights Reserved. Theme By <a href="perfectwebhost.com">PerfectWebHost</a></p>
        </footer>
      
     </div> <!-- wrap-inner -->
  </div> <!-- warp -->

<?php wp_footer(); ?>

</body>
</html>
    Code (markup):
    7) now edit "index.php" file like this :
    
<?php get_header(); ?>
    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">

        <?php
            if ( have_posts() ) :
                // Start the Loop.
                while ( have_posts() ) : the_post();
                    get_template_part( 'content');
                endwhile;
            else :
                _e( 'Nothing Found', 'mytheme' );
            endif;
        ?>

        </div><!-- #content -->
    </div><!-- #primary -->
</div><!-- #main-content -->

<?php get_footer(); ?>
    Code (markup):
    8) now you must make a files "content.php" in mytheme folder :
    content.php content :
           
        <!-- Article -->
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <div class="inner raw">
                <header>

                    <!-- Post Thumbnail -->
                    <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                        <div class="post-image">
                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php the_post_thumbnail('custom-size'); // Declare pixel size you need inside the array ?>
                            </a>
                        </div>
                    <?php endif; ?>
                    <!-- /Post Thumbnail -->

                    <!-- Display a comma separated list of the Post's Categories. -->
                    <p class="cat"><?php __( 'Posted in' , 'mytheme' ); ?> <?php the_category( ', ' ); ?></p>

                        <!-- Post Title -->
                        <h2 class="post-title">
                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                        </h2>
                        <!-- /Post Title -->
          
                    <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
                      
                </header>

                      
                <div class="entry-content">
                    <?php the_content(); // Build your custom callback length in functions.php ?>
                    <?php wp_link_pages(); ?>
                              
                </div>


                <footer class="entry-meta bottom">

                    <?php if (! is_page()): // Check if Not be Single page ?>
                        <!-- Post Details -->
                        <div class="post-authorbox">
                            <span class="entry-author"><?php _e( 'Published by', 'mytheme' ); ?> <?php the_author_posts_link(); ?></span>
                            <span class="entry-comments"><?php comments_popup_link( __( 'Leave your thoughts', 'mytheme' ), __( '1 Comment', 'mytheme' ), __( '% Comments', 'mytheme' )); ?></span>
                        </div>
                        <!-- /Post Details -->
                    <?php endif; ?>
                    <?php edit_post_link(); ?>
                      
                </footer>

                      
                <?php if ( $show_comment ): ?>
                    <?php if ( comments_open() || get_comments_number() ) { comments_template(); } ?>
                <?php endif; ?>

            </div>
        </article>
        <!-- /Article -->
    Code (markup):
    Please wait ,
    we should edit the "style.css" file to make the better theme style :)
    new style.css file content :

    
/*
Theme Name: mytheme
*/

/* -------------------------------------------------------------------------------- */
/*    0. CSS Reset
/* -------------------------------------------------------------------------------- */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block; }
    body {
        line-height: 1; }
    ol, ul {
        list-style: none; }
    blockquote, q {
        quotes: none; }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none; }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

body {
    min-width:800px;
}


/* -------------------------------------------------------------------------------- */
/*    1. General Styles
/* -------------------------------------------------------------------------------- */

body, html                                     { height: 100%; }
body    { font:12px Garamond, 'Adobe Garamond Pro', 'Apple Garamond', 'ITC Garamond', Georgia, Times, 'Times New Roman', serif; }

img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
}
hr {
  width: 100px;
  height: 1px;
  margin: 2rem auto;
  background-color: #eee;
  border: 0;
}

abbr {
  background-color: #eee;
  display: inline-block;
  padding: 3px;
  font-size: 13px;
  font-weight: bold;
  color: #555;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  border-radius: 3px;
}

code, pre {
  font-family: Menlo, Monaco, "Courier New", monospace;
}
code {
  padding: .15em .3em;
  font-size: 90%;
  font-style: normal; /* Prevent inheritance from em */
  font-weight: normal; /* Prevent inheritance from strong */
  color: #d44950;
  background-color: #fbeeef;
  border-radius: .15em;
}
pre {
  display: block;
  margin: 0 0 1rem;
  font-size: .875rem;
  line-height: 1.4;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
}
pre code {
  padding: 0;
  color: inherit;
  background-color: transparent;
}
.highlight {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background-color: #f5f5f5;
  border-radius: .15rem;
}
.highlight pre {
  margin-bottom: 0;
  font-size: .875rem;
}

button,
input,
select,
textarea {
    font-size: 100%; /* Corrects font size not being inherited in all browsers */
    margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
    vertical-align: baseline; /* Improves appearance and consistency in all browsers */
    *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
button,
input {
    line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    line-height: 1;
    margin: 0 0 1.25em;
    position: relative;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    padding-top: 0.65em;
    padding-right: 1.5em;
    padding-bottom: 0.7125em;
    padding-left: 1.5em;
    font-size: 1em;
    background-color: #fbfbfb;
    border-color: #ccc;
    color: #333;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-
    transition: background-color 300ms ease-out;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa #bbb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}
button:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
textarea:focus {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    outline: 0;
      outline: thin dotted \9;
    background: #ffffff;
    border-color: #aaaaaa;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
    padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
    -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
    -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
    -moz-box-sizing:    content-box;
    box-sizing:         content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    border: 0;
    padding: 0;
}

/* LIST
================================================ */
ul, ol {
    margin: 1em 0 2.5em 24px;
    padding: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
    margin-bottom: 1em;
}
li {
    margin: 0 0 .5em 0;
    padding: 0;
}
ul.border,
ul.check,
ul.cross {
    margin-left: 0;
}
.border li,
.check li,
.cross li {
    border-top: 1px #f2f2f2 solid;
    padding: .9em 0 .9em 2em;
    list-style: none;
    margin: 0;
    text-indent: -2em;
    line-height: 1.8em;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.check li:first-child,
.cross li:first-child {
    border-top: none;
}
.check li:before,
.cross li:before {
    font-size: .875em;
    margin-right: 1em;
}
.check li:before {
    content: "\e805";
}
.cross li:before {
    content: "\e800";
    font-size: 1em;
}
ul.rule,
ol.rule {
    padding: 20px 0 40px;
    margin: 0;
}
.rule li {
    list-style: none;
    padding: .6em 0;
    margin: 0;
    border-bottom: 1px #eee solid;
}

/* border reset */
.noborder {
    border: none !important;
}


/* HEADINGS
================================================ */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.4em;
    margin: 20px 0 .5em;
    color: #000;
    font-weight: 100;
}
h1 {
    font-size: 3.2em;
    margin: 0 0 .75em;
    line-height: 1.2em;
    letter-spacing: -1px;
}
h2 {
    font-size: 1.35em;
    line-height: 1.6em;
    color: inherit;
    margin: 0 0 2.6em;
}
h3 {
    font-size: 1.9em;
    font-weight: 300;
    margin: 1.7em 0 .6em;
}
h4 {
    font: 400 1.3em/1.4em 'Montserrat', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    margin: 2.1em 0 .55em;
}
h5 {
    font-size: 1.2em;
}
h6 {
    font-size: 1em;
}

.author-avatar img { -webkit-border-radius: 95px; -moz-border-radius: 95px; border-radius: 95px; }


/* Paragraph & Typographic */
p { font-size: 16px; line-height: 28px; margin-bottom: 25px; }

.centered { text-align: center; }

/* Links */
a {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    color: #1abc9c;
    transition: color 0.1s ease-in, background 0.1s ease-in;
    word-wrap: break-word;
}

a:hover,
a:focus { color: #7b7b7b; outline: 0; text-decoration: none; }

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
}

.clear                                         { clear:both; }
.clearfix:after                             { content: "."; visibility: hidden; display: block; height: 0px; clear: both; }
.hide {display:none!important}
.show{display:block!important}

/*----- Page Structure & Resuables -----*/
.wrap                                         { margin: 0 auto; padding: 0 0 27px 0; position: relative; }
p.dots                                         { color:#8e8e8e; font-size:1.5em; letter-spacing:1px; line-height:5px; }
.navigation                                    { overflow: hidden; margin: 0 0 25px 0; }
.navigation a                                { text-decoration: none; color: #666; text-transform: uppercase; }

/* Assistive text */
.skip-link {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}
.screen-reader-text a.assistive-text:active,
.screen-reader-text a.assistive-text:focus {
    background: #eee;
    border-bottom: 1px solid #ddd;
    color: #1982d1;
    clip: auto !important;
    font-size: 12px;
    position: absolute;
    text-decoration: underline;
    top: 0;
    left: 7.6%;
}

.hovered{
    background: #483D8B;
}

/* -------------------------------------------------------------------------------- */
/*    2. STRUCTURE Styles
/* -------------------------------------------------------------------------------- */

.wrap {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
#wrap-inner {
    width: 71%;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------------- */
/*    3. Header Styles
/* -------------------------------------------------------------------------------- */

#header {
    margin:0px auto;
    padding:0px;
  
}

#header h1.site-name {
    text-align:center;
    font-size:4em;
    font-weight:700;
    padding:20px;
    text-transform:uppercase;
}
#header h1.site-name a {
    color:#3b3b3b;
    text-decoration:none;
}
#header h1.site-name a:hover { color:#111; }
#header .description {
    text-align:center;
    font-size:2em;
    color:#8e8e8e;
    font-style:italic;
    margin-bottom:40px ;
}

/* -------------------------------------------------------------------------------- */
/*    4. General post Style
/* -------------------------------------------------------------------------------- */

.post .entry-content {
    color:#717171;
    padding:20px 0px 0px;
    font-size:1.5em;
    line-height:21px;
    text-align: justify;
}
.post .entry-content:first-line                     { font-size:1.2em; color:#555; }
.post .entry-content h2                             { font-size:1.8em; margin:20px 0px 10px; color:#525252; }
.post .entry-content h3                             { font-size:1.3em; margin:20px 0px 10px; font-weight:bold;
                                             text-transform:uppercase; color:#525252; }
.post .entry-content h4                             { font-size:1.65em; margin:20px 0px 10px; font-style:italic; color:#525252; }
.post .entry-content h5                             { font-size:1em; margin:20px 0px 10px; text-transform:uppercase; letter-spacing:3px; }
.post .entry-content p                                 { margin-bottom:20px; }
.post .entry-content ul, .post .entry-content ol             { margin:0px 0px 15px 50px; }
.post .entry-content ul li                             { list-style:disc outside; }
.post .entry-content ol li                             { list-style:decimal outside; }
.post .entry-content ol ol li                         { list-style:lower-alpha outside; }
.post .entry-content a                                 { color:#525252; text-decoration:underline; }
.post .entry-content a:hover                         { text-decoration:none; }
.post entry-content blockquote {
    border-left-style: solid;
    border-left-width: 7px;
    padding-left: 20px;
    margin-bottom: 1em;
    margin-right: 1em;
    font-size: 16px;
    line-height: 1.5em;
}


/* Blog List style */

article.post {
    text-align: center; 
    border-top: none;
    padding: 60px 150px 60px 180px;
    border-top:1px dashed #b4b4b4;
}

article.post header {
    padding-bottom: 27px;
    text-align: center;
}

article.post header h2.post-title {
    font-family: ff-tisa-web-pro,Arial,sans-serif;
    font-size: 30px;
    line-height: 36px;
    padding-top: 5px;
    padding-bottom: 9px;
}

article.post h2 a, article.post h1 {
    font-size: 30px;
    color: #000;
    letter-spacing: 4px;
    font-weight: 400;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
}

article.post header .date {
    font-family: "Open Sans",sans-serif;
    font-size: 10px;
    font-style: italic;
    color: #939393;
    text-transform: uppercase;
    letter-spacing: 1px;
}

article.post .cat a {
    display: inline-block;
    margin-bottom: 12px;
    font-family: "Open Sans",sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

article.post .post-image img {
    max-width: 100%;
    margin:0 auto;
    height: auto;
}


article.post .post-image {
    width: 100%;
    height: 252px;
    max-height: 252px;
    text-align: center;
    background-color: #131418;
    background-position: center;
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom:18px;
}


article.post footer.entry-meta {
    color: #bcbcbc;
    clear: both;
}

article.post footer.entry-meta .entry-author {

}
article.post footer.entry-meta .entry-comments {

}

article.post footer.entry-meta.bottom a,
article.post footer.entry-meta.bottom span {
    line-height: 1.6;
}

article.post .entry-content p:last-child { text-align:center; }
article.post a.more-link:link, article a.more-link:visited {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #7f7e7e;
    border: 1px solid #555555;
    color: #FFFFFF;
    font-family: some-font;
    font-style: italic;
    margin: 0;
    padding: 5px 10px;
    text-decoration: none;
}

article.post a.more-link:hover {
    background:#cc0000;
}

/* -------------------------------------------------------------------------------- */
/*    5. Footer Style
/* -------------------------------------------------------------------------------- */

#footer  p{
    text-align:center;
    color: #6b6a6a;
    font-size: 11px;
}
    Code (markup):
    by perfectwebhost.com
     
    webmastersb, Jan 24, 2015 IP
  2. webmastersb

    webmastersb Well-Known Member

    Messages:
    346
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    130
    #2
    to be continued
     
    webmastersb, Jan 24, 2015 IP