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 © <?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