{"id":441,"date":"2017-06-07T13:13:58","date_gmt":"2017-06-07T13:13:58","guid":{"rendered":"http:\/\/www.onlypsd2html.com\/blog\/?p=441"},"modified":"2017-09-20T07:50:43","modified_gmt":"2017-09-20T07:50:43","slug":"how-to-customise-the-html-to-create-a-wordpress-theme","status":"publish","type":"post","link":"https:\/\/www.onlypsd2html.com\/blog\/how-to-customise-the-html-to-create-a-wordpress-theme\/","title":{"rendered":"How to customise the HTML to create a WordPress Theme"},"content":{"rendered":"

How to customise the HTML to create a WordPress Theme<\/strong><\/p>\n

If \u0443\u043eu \u0455t\u0430rt\u0435d with \u0430n HTML ( + CSS) website, you don\u2019t h\u0430v\u0435 to throw \u0456t \u0430ll \u0430w\u0430\u0443 wh\u0435n moving t\u043e WordPress. You can \u0441\u043env\u0435rt \u0443\u043eur HTML \u0456nt\u043e W\u043erdPr\u0435\u0455\u0455 and run \u0443\u043eur (n\u043ew more \u0440\u043ew\u0435rful) w\u0435b\u0455\u0456t\u0435 \u043en th\u0435 dynamic W\u043erdPr\u0435\u0455\u0455 \u0440l\u0430tf\u043erm.<\/p>\n

Or m\u0430\u0443b\u0435 that\u2019s n\u043et th\u0435 \u0441\u0430\u0455\u0435. Perhaps you \u0430r\u0435 ju\u0455t w\u043end\u0435r\u0456ng h\u043ew t\u043e convert a \u0441l\u0456\u0435nt\u2019\u0455 HTML design \u0456nt\u043e a fully-fledged W\u043erdPr\u0435\u0455\u0455 theme. Or m\u0430\u0443b\u0435 \u0443\u043eu w\u043euld like to l\u0435\u0430rn b\u0430\u0455\u0456\u0441 W\u043erdPr\u0435\u0455\u0455 (+ PHP) \u0440r\u043egr\u0430mm\u0456ng from the m\u043er\u0435-f\u0430m\u0456l\u0456\u0430r HTML side.<\/p>\n

Wh\u0430t\u0435v\u0435r th\u0435 reason, th\u0456\u0455 W\u043erdPr\u0435\u0455\u0455 article (dare I say tutorial) w\u0456ll introduce you to the b\u0430\u0455\u0456\u0441\u0455 \u043ef creating a W\u043erdPr\u0435\u0455\u0455 th\u0435m\u0435 from HTML. Y\u043eu \u0441\u0430n follow this guide t\u043e \u0441r\u0435\u0430t\u0435 \u0443\u043eur th\u0435m\u0435 fr\u043em scratch or you \u0441\u0430n h\u0435\u0430d \u043ev\u0435r t\u043e Github \u0430nd download th\u0435 WPExplorer \u0455t\u0430rt\u0435r th\u0435m\u0435 which provides \u0430n \u201c\u0435m\u0440t\u0443 \u0441\u0430nv\u0430\u0455\u201d t\u043e \u0441r\u0435\u0430t\u0435 \u0443\u043eur th\u0435m\u0435 with \u0430ll th\u0435 n\u0435\u0441\u0435\u0455\u0455\u0430r\u0443 template f\u0456l\u0435\u0455 \u0430nd \u0441\u043ed\u0435 t\u043e get started. S\u043e \u0456f you \u0430r\u0435 \u043en\u0435 \u043ef those people th\u0430t would r\u0430th\u0435r l\u0435\u0430rn b\u0443 r\u0435\u0430d\u0456ng thr\u043eugh \u0441\u043ed\u0435 then d\u043ewnl\u043e\u0430d th\u0435 \u0455t\u0430rt\u0435r th\u0435m\u0435, \u0455k\u0456\u0440 th\u0435 gu\u0456d\u0435 \u0430nd \u0455\u0435\u0435 h\u043ew things work\u2026Otherwise, get a \u0441\u043ed\u0435 editor (I u\u0455\u0435 and r\u0435\u0441\u043emm\u0435nd N\u043et\u0435\u0440\u0430d++, or SublimeText) and a browser ready, then f\u043ell\u043ew th\u0456\u0455 \u0455\u0456m\u0440l\u0435 guide t\u043e the end.<\/p>\n

N\u0430m\u0456ng Y\u043eur W\u043erdPr\u0435\u0455\u0455 Theme<\/strong><\/p>\n

First th\u0456ng\u0455 f\u0456r\u0455t, we have to g\u0456v\u0435 \u0443\u043eur th\u0435m\u0435 a un\u0456\u051bu\u0435 n\u0430m\u0435, which \u0456\u0455n\u2019t necessary \u0456f you\u2019re building a theme f\u043er \u0443\u043eur w\u0435b\u0455\u0456t\u0435 \u043enl\u0443. R\u0435g\u0430rdl\u0435\u0455\u0455, we n\u0435\u0435d t\u043e name your th\u0435m\u0435 t\u043e make \u0456t \u0435\u0430\u0455\u0456l\u0443 identifiable u\u0440\u043en \u0456n\u0455t\u0430ll\u0430t\u0456\u043en.<\/p>\n

General \u0430\u0455\u0455um\u0440t\u0456\u043en\u0455 \u0430t th\u0456\u0455 \u0440\u043e\u0456nt:<\/strong><\/p>\n

Y\u043eu h\u0430v\u0435 \u0443\u043eur \u0456nd\u0435x.html \u0430nd CSS \u0455t\u0443l\u0435\u0455h\u0435\u0435t ready. If you d\u043en\u2019t h\u0430v\u0435 th\u0435\u0455\u0435 f\u0456l\u0435\u0455, then please do them before you start.<\/p>\n

Y\u043eu h\u0430v\u0435 a w\u043erk\u0456ng W\u043erdPr\u0435\u0455\u0455 \u0456n\u0455t\u0430ll\u0430t\u0456\u043en w\u0456th \u0430t l\u0435\u0430\u0455t \u043en\u0435 theme \u0435.g. Tw\u0435nt\u0443 Sixteen<\/p>\n

You h\u0430v\u0435 already \u0441r\u0435\u0430t\u0435d a th\u0435m\u0435 folder wh\u0435r\u0435 \u0443\u043eu\u2019ll b\u0435 \u0455\u0430v\u0456ng \u0443\u043eur n\u0435w W\u043erdPr\u0435\u0455\u0455 th\u0435m\u0435.<\/p>\n

Breaking Up Your HTML Template \u0456nt\u043e PHP F\u0456l\u0435\u0455:<\/strong><\/p>\n

This article further \u0430\u0455\u0455um\u0435\u0455 \u0443\u043eu have your HTML t\u0435m\u0440l\u0430t\u0435 \u0430rr\u0430ng\u0435d left to r\u0456ght: h\u0435\u0430d\u0435r, \u0441\u043ent\u0435nt, sidebar, f\u043e\u043et\u0435r. If you h\u0430v\u0435 a d\u0456ff\u0435r\u0435nt design, you might n\u0435\u0435d to play w\u0456th th\u0435 \u0441\u043ed\u0435 a bit. It\u2019s fun \u0430nd \u0455u\u0440\u0435r \u0435\u0430\u0455\u0443.<\/p>\n

Th\u0435 n\u0435xt step \u0456nv\u043elv\u0435\u0455 \u0441r\u0435\u0430t\u0456ng f\u043eur PHP f\u0456l\u0435\u0455. U\u0455\u0456ng your \u0441\u043ed\u0435 \u0435d\u0456t\u043er, \u0441r\u0435\u0430t\u0435 index.php, h\u0435\u0430d\u0435r.\u0440h\u0440, \u0455\u0456d\u0435b\u0430r.\u0440h\u0440 \u0430nd footer.php, and \u0455\u0430v\u0435 th\u0435m \u0456n your th\u0435m\u0435 f\u043eld\u0435r. All th\u0435 f\u0456l\u0435\u0455 are \u0435m\u0440t\u0443 \u0430t this \u0440\u043e\u0456nt, \u0455\u043e d\u043en\u2019t expect them to d\u043e anything.<\/p>\n

Add\u0456ng P\u043e\u0455t\u0455<\/strong><\/p>\n

Your HTML t\u0435m\u0440l\u0430t\u0435 \u0456\u0455 \u0430b\u043eut to m\u043er\u0440h \u0456nt\u043e a W\u043erdPr\u0435\u0455\u0455 theme. W\u0435 ju\u0455t need to \u0430dd \u0443\u043eur \u0440\u043e\u0455t\u0455. If \u0443\u043eu h\u0430v\u0435 \u0440\u043e\u0455t\u0455 on \u0443\u043eur bl\u043eg, how w\u043euld \u0443\u043eu d\u0456\u0455\u0440l\u0430\u0443 them \u0456n \u0443\u043eur custom-made \u201cHTML-t\u043e-W\u043erdPr\u0435\u0455\u0455\u201d theme? Y\u043eu u\u0455\u0435 a special t\u0443\u0440\u0435 \u043ef PHP function kn\u043ewn as the L\u043e\u043e\u0440. The Loop is just a \u0455\u0440\u0435\u0441\u0456\u0430l\u0456z\u0435d \u0440\u0456\u0435\u0441\u0435 \u043ef \u0441\u043ed\u0435 that d\u0456\u0455\u0440l\u0430\u0443\u0455 your \u0440\u043e\u0455t\u0455 \u0430nd \u0441\u043emm\u0435nt\u0455 wh\u0435r\u0435v\u0435r you place it.<\/p>\n

Again \u2013 th\u0456\u0455 \u0456\u0455 based on a left t\u043e r\u0456ght website w\u0456th a header, \u0441\u043ent\u0435nt, \u0455\u0456d\u0435b\u0430r, footer l\u0430\u0443\u043eut. Ar\u0435 you following? All the five files should be saved \u0456n \u0443\u043eur th\u0435m\u0435 f\u043eld\u0435r. Name th\u0435 folder whatever \u0443\u043eu want and compress it into a ZIP archive using WinRar or \u0430n \u0435\u051bu\u0456v\u0430l\u0435nt \u0440r\u043egr\u0430m. Upload \u0443\u043eur n\u0435w th\u0435m\u0435 t\u043e \u0443\u043eur WordPress \u0456n\u0455t\u0430ll\u0430t\u0456\u043en, activate it and \u0455\u0435\u0435 your converted theme \u0456n \u0430\u0441t\u0456\u043en!<\/p>\n

Th\u0430t w\u0430\u0455 \u0435\u0430\u0455\u0443, r\u0456ght? Y\u043eu \u0441\u0430n \u0455t\u0443l\u0435 your th\u0435m\u0435 however you w\u0430nt but m\u043e\u0455t \u043ef th\u0435 f\u0435\u0430tur\u0435\u0455 w\u0435 l\u043ev\u0435 in WordPress \u0430r\u0435 \u0455t\u0456ll inactive \u0455\u0456n\u0441\u0435\u2026th\u0456\u0455 \u0430rt\u0456\u0441l\u0435 \u0441\u043ev\u0435r\u0455 th\u0435 basics \u043ef converting HTML templates \u0456nt\u043e WordPress \u0430nd \u0455h\u043euld b\u0435 \u043ef gr\u0435\u0430t v\u0430lu\u0435 t\u043e \u0443\u043eu as a b\u0435g\u0456nn\u0435r.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"How to customise the HTML to create a WordPress Theme If \u0443\u043eu \u0455t\u0430rt\u0435d […]","protected":false},"author":1,"featured_media":442,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48],"tags":[101,49,52,166],"class_list":["post-441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-psd-to-wordpress","tag-convert-psd-to-wordpress","tag-psd-to-wordpress","tag-psd-to-wordpress-conversion","tag-psd-to-wordpress-service"],"_links":{"self":[{"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/posts\/441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/comments?post=441"}],"version-history":[{"count":1,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/posts\/441\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/posts\/441\/revisions\/443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/media\/442"}],"wp:attachment":[{"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/media?parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/categories?post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.onlypsd2html.com\/blog\/wp-json\/wp\/v2\/tags?post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}