Bài 3 : Cấu trúc file của Theme WP – Chuyển Template(code tĩnh) thành Theme WP

Lợi Trương - Admin Follow Author

Ở bài trước mình đã hướng dẫn các bạn cách cài WordPress để tạo 1 website cơ bản, sử dụng các theme miễn phí trong cộng đồng theme WP. Hôm nay, mình sẽ hướng dẫn các bạn cách chuyển từ 1 bộ source Tĩnh => Thành 1 Website Động với CMS WordPress.

Đây là Template chúng ta sẽ chuyển thành Theme WordPress , các bạn có thể download tại đây.

Bắt Đầu Chiến thôi!!

Các bạn vào thư mục wp-content/themes trong thư mục wordpress đã làm ở bài 2 để thêm mới một Folder có tên là new24h.

Tiếp theo các bạn copy source code template vừa download ở link google drive trên vào Folder theme new24h

Sau đó các bạn tạo 12 file :

404.php , archive.php , comments.php , footer.php , functoins.php , header.php , index.php , page.php , search.php , sidebar.php , single.php , style.css

Chức năng các file bạn xem ảnh dưới nhé :

404.php : File giao diện trang 404 , là khi url không tồn tại.
archive.php : Giao diện của các trang category, tag, custorm post type…
comments.php : Giao diện phần comment

Add code file header.php

mình tách phần này là header vì ở page nào cũng xuất hiện

Các bạn vào file index.html (file template) copy đoạn mã của phần header (từ đầu file -> tag <header>) dán vào file header.php

Sau đó, các bạn phải thêm đoạn code : <?php wp_head(); ?> vào trước thẻ đóng </head> . Chức năng như để khẳng định đây là Header.

Quan trọng : bạn thêm đoạn mã sau vào những tag link như : <?php bloginfo(‘template_directory’)?> src trong tag <img/> và <script> , href trong tag <link/> …. Chức năng là lấy đường dẫn của server đến thư mục theme : http://localhost:8080/antoan/wp-content/themes/new24h

File header sau khi hoàn thiện sẽ như thế này :

&lt;!doctype html&gt;
&lt;html class="no-js" lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;meta name="description" content="Construction is ultimate responsive construction html template which include 3 homepage demos."&gt;
&lt;title&gt;News24 - Responsive News Template&lt;/title&gt;

&lt;link rel="shortcut icon" type="image/x-icon" href="img/favicon.png"&gt;

&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/themify-icons.css"&gt;

&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/animate.min.css"&gt;

&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/elegant-line-icons.css"&gt;

&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/bootstrap.min.css"&gt;

&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/owl.carousel.min.css"&gt;

&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/meanmenu.css"&gt;

&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/swipebox.min.css"&gt;

&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/main.css"&gt;
&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_directory') ?&gt;/css/responsive.css"&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/modernizr-2.8.3.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	
&lt;div id='preloader'&gt;
&lt;div class='loader'&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/loading.gif" width="200" alt=""&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;header id="header" class="header sticky-header"&gt;
&lt;div class="top-header bg-dark"&gt;
&lt;div class="container"&gt;
&lt;div class="col-md-6"&gt;
&lt;ul class="top-info"&gt;
&lt;li&gt;&lt;i class="ti-mobile"&gt;&lt;/i&gt; 983 592 88 52&lt;/li&gt;
&lt;li&gt;&lt;a href="http://html.dynamiclayers.net/cdn-cgi/l/email-protection#80ede1e9ecc0e4efede1e9eeaee3efed"&gt;&lt;i class="ti-email"&gt;&lt;/i&gt; &lt;span class="__cf_email__" data-cfemail="630e020a0f23070c0e020a0d4d000c0e"&gt;&#91;email&nbsp;protected]&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="col-md-6 text-right sm-text-left"&gt;
&lt;ul class="top-social"&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-google"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class="fz-13"&gt;Thousday July 4 , 2017&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="mid-header"&gt;
&lt;div class="container"&gt;
&lt;div class="site-branding full-left"&gt;
&lt;a href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/logo.jpg" alt="News24"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="banner pull-right"&gt;
&lt;a href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/banner.jpg" alt="News24 Banner"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="mainmenu-wrap bg-red"&gt;
&lt;div class="container"&gt;
&lt;div class="col-md-9 col-xs-6"&gt;
&lt;div class="menu-wrap mean-menu"&gt;
&lt;nav class="mainmenu"&gt;
&lt;ul id="navi-menu"&gt;
&lt;li class="current_page_item"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;a href="index.html"&gt;Home Right Sidebar&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="index-left.html"&gt;Home Left Sidebar&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="health-news.html"&gt;Health&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="entertainment-news.html"&gt;Entertainment&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="world-news.html"&gt;World&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="travel-news.html"&gt;Travel&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Page&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="news-single.html"&gt;News Single&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-3 col-xs-6"&gt;
&lt;form action="#" class="search-form"&gt;
&lt;input type="text" placeholder="Search news.."&gt;
&lt;button class="submit" type="submit"&gt;&lt;i class="ti-search"&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;div class="mobile-menu"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;

100

101

102

<!doctype html>

<head>

<title>News24 - Responsive News Template</title>

</head>

<body>

<img src="<?php bloginfo('template_directory') ?>/img/loading.gif" width="200" alt="">

</div>

<li><a href="http://html.dynamiclayers.net/cdn-cgi/l/email-protection#80ede1e9ecc0e4efede1e9eeaee3efed"><i class="ti-email"></i> <span class="__cf_email__" data-cfemail="630e020a0f23070c0e020a0d4d000c0e">[email protected]</span></a></li>

</ul>

</div>

<li class="fz-13">Thousday July 4 , 2017</li>

</ul>

</div>

</div>

<a href="#"><img src="<?php bloginfo('template_directory') ?>/img/banner.jpg" alt="News24 Banner"></a>

</div>

<ul>

<li><a href="index.html">Home Right Sidebar</a></li>

<li><a href="index-left.html">Home Left Sidebar</a></li>

</ul>

</li>

<li><a href="health-news.html">Health</a></li>

<li><a href="entertainment-news.html">Entertainment</a></li>

<li><a href="world-news.html">World</a></li>

<li><a href="travel-news.html">Travel</a></li>

<ul>

<li><a href="news-single.html">News Single</a></li>

</ul>

</li>

</ul>

</nav>

</div>

</form>

</div>

</div>

</header>

Add code file footer.php

Tương tự như file header , nhưng file footer các bạn sẽ thêm code <?php wp_footer();?> vào trước thẻ body đóng </body> . File footer hoàn thiện :

&lt;footer class="footer-wrapper bg-dark"&gt;
&lt;div class="footer-widgets padding"&gt;
&lt;div class="container"&gt;
&lt;div class="col-md-4 col-xs-6 sm-padding"&gt;
&lt;div class="single-widget"&gt;
&lt;a href="#" class="footer-logo"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/logo-light.png" alt="News24"&gt;&lt;/a&gt;
&lt;p class="text-light no-margin"&gt;News24 is a Clean Responsive HTML News-paper, Magazine, News and Blog template. with good feature that allow you to completely customize your website to your needs.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-4 col-xs-6 sm-padding"&gt;
 &lt;div class="single-widget"&gt;
&lt;h3&gt;Most Viwed&lt;/h3&gt;
&lt;div class="footer-posts"&gt;
&lt;div class="footer-post"&gt;
&lt;span class="date"&gt;Oct 28, 2016&lt;/span&gt;
&lt;h4&gt;&lt;a href="#"&gt;Success is not a good teacher failure makes you humble&lt;/a&gt;&lt;/h4&gt;
&lt;/div&gt;
&lt;div class="footer-post"&gt;
&lt;span class="date"&gt;Oct 28, 2016&lt;/span&gt;
&lt;h4&gt;&lt;a href="#"&gt;Success is not a good teacher failure makes you humble&lt;/a&gt;&lt;/h4&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-4 col-xs-12 sm-padding"&gt;
&lt;div class="single-widget"&gt;
&lt;h3&gt;Most Viwed&lt;/h3&gt;
&lt;ul class="tag-list"&gt;
&lt;li&gt;&lt;a href="#"&gt;Worlds&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Entertainment&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Health&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Football&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Fasion&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Health&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Western Foods&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Western Foods&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Race&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Football&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Foods&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="footer-copyright ptb-40"&gt;
&lt;div class="container"&gt;
&lt;div class="col-xs-6 xs-padding xs-text-center"&gt;
&lt;p class="no-margin fz-13 text-light"&gt;© Copyright Crackthemes 2017, All Rights Reserved&lt;/p&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 xs-padding"&gt;
&lt;ul class="footer-social text-right xs-text-center"&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-google"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="ti-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/footer&gt;
&lt;a data-scroll href="#header" id="scroll-top" class="scroll-to-top"&gt;&lt;i class="ti-angle-up"&gt;&lt;/i&gt;&lt;/a&gt;

&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/waypoints.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/wow.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/jquery.nicescroll.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/owl.carousel.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/jquery.meanmenu.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/smooth-scroll.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/jquery.counterup.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/jquery.swipebox.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/vendor/jquery.newsTicker.min.js"&gt;&lt;/script&gt;
&lt;script src="&lt;?php bloginfo('template_directory') ?&gt;/js/main.js"&gt;&lt;/script&gt;
&lt;?php wp_footer(); ?&gt;
&lt;/body&gt;
&lt;/html&gt;

<a href="#" class="footer-logo"><img src="<?php bloginfo('template_directory') ?>/img/logo-light.png" alt="News24"></a>

<p class="text-light no-margin">News24 is a Clean Responsive HTML News-paper, Magazine, News and Blog template. with good feature that allow you to completely customize your website to your needs.</p>

</div>

<h3>Most Viwed</h3>

<h4><a href="#">Success is not a good teacher failure makes you humble</a></h4>

</div>

<h4><a href="#">Success is not a good teacher failure makes you humble</a></h4>

</div>

<h3>Most Viwed</h3>

<li><a href="#">Worlds</a></li>

<li><a href="#">Entertainment</a></li>

<li><a href="#">Health</a></li>

<li><a href="#">Football</a></li>

<li><a href="#">Fasion</a></li>

<li><a href="#">Health</a></li>

<li><a href="#">Western Foods</a></li>

<li><a href="#">Football</a></li>

<li><a href="#">Foods</a></li>

</ul>

</div>

</div>

</ul>

</div>

</footer>

<?php wp_footer(); ?>

</body>

</html>

Add code file index.php

Phần ở giữa còn lại dĩ nhiên là giao diện của Trang chủ – file index.php rồi . Copy code phần còn lại từ file template : index.html vào file index.php

Bạn phải thêm 2 đoạn code <?php get_header(); ?> <?php get_footer(); ?> vào đầu và cuối file index.php . Công dụng là sẽ call 2 file header và footer cộng vào file index.php

&lt;?php get_header(); ?&gt;
&lt;section class="main-wrapper mb-40"&gt;
&lt;div class="container"&gt;
&lt;div class="featured-wrap"&gt;
&lt;div class="col-md-5 col-sm-12"&gt;
&lt;div class="post-carousel owl-carousel"&gt;
&lt;div class="featured-post" style="background-image: url(&lt;?php bloginfo('template_directory') ?&gt;/img/slider-post-1.jpg);"&gt;
&lt;div class="post-info"&gt;
&lt;a href="#" class="cat-name tt-u"&gt;World&lt;/a&gt;
&lt;h3 class="fw-6 fz-16"&gt;&lt;a href="#" class="text-white"&gt;Michel Brown Talks About American People.&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured-post" style="background-image: url(&lt;?php bloginfo('template_directory') ?&gt;/img/slider-post-1.jpg);"&gt;
&lt;div class="post-info"&gt;
&lt;a href="#" class="cat-name tt-u"&gt;World&lt;/a&gt;
&lt;h3 class="fw-6 fz-16"&gt;&lt;a href="#" class="text-white"&gt;Michel Brown Talks About American People.&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-3 col-sm-6"&gt;
&lt;div class="post-carousel owl-carousel"&gt;
&lt;div class="featured-post" style="background-image: url(&lt;?php bloginfo('template_directory') ?&gt;/img/slider-post-2.jpg);"&gt;
&lt;div class="post-info"&gt;
&lt;a href="#" class="cat-name tt-u"&gt;Sports&lt;/a&gt;
&lt;h3 class="fw-6 fz-16"&gt;&lt;a href="#" class="text-white"&gt;Improve Your Health And Stamina With Cycling.&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured-post" style="background-image: url(&lt;?php bloginfo('template_directory') ?&gt;/img/slider-post-2.jpg);"&gt;
&lt;div class="post-info"&gt;
&lt;a href="#" class="cat-name tt-u"&gt;Sports&lt;/a&gt;
&lt;h3 class="fw-6 fz-16"&gt;&lt;a href="#" class="text-white"&gt;Improve Your Health And Stamina With Cycling.&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-4 col-sm-6"&gt;
&lt;div class="top-wrap mb-10"&gt;
&lt;div class="post-carousel owl-carousel"&gt;
 &lt;div class="featured-post" style="background-image: url(&lt;?php bloginfo('template_directory') ?&gt;/img/slider-post-3.jpg);"&gt;
&lt;div class="post-info"&gt;
&lt;a href="#" class="cat-name tt-u"&gt;World&lt;/a&gt;
&lt;h3 class="fw-6 fz-16"&gt;&lt;a href="#" class="text-white"&gt;An Army or Ground Force is a Fighting Force That Fights Primarily On Land.&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured-post" style="background-image: url(&lt;?php bloginfo('template_directory') ?&gt;/img/slider-post-3.jpg);"&gt;
&lt;div class="post-info"&gt;
&lt;a href="#" class="cat-name tt-u"&gt;World&lt;/a&gt;
&lt;h3 class="fw-6 fz-16"&gt;&lt;a href="#" class="text-white"&gt;An Army or Ground Force is a Fighting Force That Fights Primarily On Land.&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="bottom-wrap"&gt;
&lt;div class="post-carousel owl-carousel"&gt;
&lt;div class="featured-post" style="background-image: url(&lt;?php bloginfo('template_directory') ?&gt;/img/slider-post-4.jpg);"&gt;
&lt;div class="post-info"&gt;
&lt;a href="#" class="cat-name tt-u"&gt;World&lt;/a&gt;
&lt;h3 class="fw-6 fz-16"&gt;&lt;a href="#" class="text-white"&gt;Alex Helis Confirms Mystery Pop Singer On New Music Album.&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="featured-post" style="background-image: url(&lt;?php bloginfo('template_directory') ?&gt;/img/slider-post-4.jpg);"&gt;
&lt;div class="post-info"&gt;
&lt;a href="#" class="cat-name tt-u"&gt;World&lt;/a&gt;
&lt;h3 class="fw-6 fz-16"&gt;&lt;a href="#" class="text-white"&gt;Alex Helis Confirms Mystery Pop Singer On New Music Album.&lt;/a&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="news-ticker-wrap"&gt;
&lt;span class="ticker-title tt-u"&gt;Breaking News&lt;/span&gt;
&lt;ul class="news-ticker"&gt;
&lt;li&gt;&lt;a href="#"&gt;Michel Brown Talks About American People.&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;An Army or Ground Force is a Fighting Force That Fights Primarily On Land.&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Alex Helis Confirms Mystery Pop Singer On New Music Album.&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Improve Your Health And Stamina With Cycling.&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="ticker-control"&gt;
&lt;i class="ti-angle-left" id="prev-ticker"&gt;&lt;/i&gt;
&lt;i class="ti-angle-right" id="next-ticker"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="main-content mt-20 ov-hidden"&gt;
&lt;div class="col-md-8 sm-padding"&gt;
&lt;div class="news-block padding-15 bg-white bd-grey mb-40"&gt;
&lt;h2 class="block-heading mb-40"&gt;Trending News&lt;/h2&gt;
&lt;div class="grid-posts"&gt;
&lt;div class="col-xs-6 padding-10"&gt;
&lt;div class="grid-post"&gt;
&lt;a href="#" class="mb-20"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/trending-1.jpg" alt="Tranding News"&gt;&lt;/a&gt;
&lt;div class="post-info padding-15 ptb-20 bd-grey"&gt;
&lt;h4 class="mb-15 fw-6"&gt;&lt;a href="#" class="text-dark"&gt;The future of possible innovation for business company.&lt;/a&gt;&lt;/h4&gt;
&lt;span class="date"&gt;&lt;i class="ti-timer"&gt;&lt;/i&gt; November 16 , 2017&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 padding-10"&gt;
&lt;div class="grid-post"&gt;
&lt;a href="#" class="mb-20"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/trending-2.jpg" alt="Tranding News"&gt;&lt;/a&gt;
&lt;div class="post-info padding-15 ptb-20 bd-grey"&gt;
&lt;h4 class="mb-15 fw-6"&gt;&lt;a href="#" class="text-dark"&gt;The future of possible innovation for business company.&lt;/a&gt;&lt;/h4&gt;
&lt;span class="date"&gt;&lt;i class="ti-timer"&gt;&lt;/i&gt; November 16 , 2017&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 padding-10"&gt;
&lt;div class="grid-post"&gt;
&lt;a href="#" class="mb-20"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/trending-3.jpg" alt="Tranding News"&gt;&lt;/a&gt;
&lt;div class="post-info padding-15 ptb-20 bd-grey"&gt;
&lt;h4 class="mb-15 fw-6"&gt;&lt;a href="#" class="text-dark"&gt;The future of possible innovation for business company.&lt;/a&gt;&lt;/h4&gt;
&lt;span class="date"&gt;&lt;i class="ti-timer"&gt;&lt;/i&gt; November 16 , 2017&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6 padding-10"&gt;
&lt;div class="grid-post"&gt;
&lt;a href="#" class="mb-20"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/trending-4.jpg" alt="Tranding News"&gt;&lt;/a&gt;
&lt;div class="post-info padding-15 ptb-20 bd-grey"&gt;
&lt;h4 class="mb-15 fw-6"&gt;&lt;a href="#" class="text-dark"&gt;The future of possible innovation for business company.&lt;/a&gt;&lt;/h4&gt;
&lt;span class="date"&gt;&lt;i class="ti-timer"&gt;&lt;/i&gt; November 16 , 2017&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="news-block padding-15 bg-white bd-grey mb-40"&gt;
&lt;h2 class="block-heading mb-40"&gt;World News&lt;/h2&gt;
&lt;div class="two-col-posts"&gt;
&lt;div class="col-md-6 padding-10"&gt;
&lt;div class="post-item"&gt;
&lt;a href="#" class="mb-20"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/world-1.jpg" alt="World News"&gt;&lt;/a&gt;
&lt;div class="post-info padding-15 ptb-20 bd-grey"&gt;
&lt;h4 class="mb-15 fw-6"&gt;&lt;a href="#" class="text-dark"&gt;The future of possible innovation for business company.&lt;/a&gt;&lt;/h4&gt;
&lt;span class="date"&gt;&lt;i class="ti-timer"&gt;&lt;/i&gt; November 16 , 2017&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-6 padding-10"&gt;
&lt;div class="small-posts"&gt;
&lt;div class="sm-post-item"&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/world-2.jpg" alt="World News"&gt;
&lt;div class="sm-post-content bd-grey"&gt;
 &lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William braynt went to visit.&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="sm-post-item"&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/world-3.jpg" alt="World News"&gt;
&lt;div class="sm-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;White house press secretary Spicer briefs.&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="sm-post-item"&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/world-4.jpg" alt="World News"&gt;
&lt;div class="sm-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;Expert tips on how to get a pay rise business.&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="news-block padding-15 bg-white bd-grey mb-40"&gt;
&lt;h2 class="block-heading mb-40"&gt;Featured Videos&lt;/h2&gt;
&lt;div class="side-tab"&gt;
&lt;div class="col-md-6 padding-10"&gt;
&lt;div class="tab-content"&gt;
&lt;div class="tab-pane v-player fade in active" id="video-1"&gt;
&lt;iframe src="https://player.vimeo.com/video/39524612" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt; 
&lt;div class="tab-pane v-player fade in" id="video-2"&gt;
&lt;iframe src="https://player.vimeo.com/video/39524612" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt; 
&lt;div class="tab-pane v-player fade in" id="video-3"&gt;
&lt;iframe src="https://player.vimeo.com/video/39524612" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt; 
&lt;div class="tab-pane v-player fade in" id="video-4"&gt;
&lt;iframe src="https://player.vimeo.com/video/39524612" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt; 
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-6 padding-10"&gt;
&lt;ul class="video-thumbs"&gt;
&lt;li class="active"&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/video-1.jpg" alt="Featured Video"&gt;
&lt;a href="#video-1" data-toggle="tab"&gt;
&lt;div class="display-table"&gt;
&lt;div class="table-cell"&gt;
&lt;i class="ti-control-play"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/video-2.jpg" alt="Featured Video"&gt;
&lt;a href="#video-2" data-toggle="tab"&gt;
&lt;div class="display-table"&gt;
&lt;div class="table-cell"&gt;
&lt;i class="ti-control-play"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/video-3.jpg" alt="Featured Video"&gt;
&lt;a href="#video-3" data-toggle="tab"&gt;
&lt;div class="display-table"&gt;
&lt;div class="table-cell"&gt;
 &lt;i class="ti-control-play"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/video-4.jpg" alt="Featured Video"&gt;
&lt;a href="#video-4" data-toggle="tab"&gt;
&lt;div class="display-table"&gt;
&lt;div class="table-cell"&gt;
&lt;i class="ti-control-play"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="banner-in-content padding-15 bg-white bd-grey ov-hidden mb-40"&gt;
&lt;a href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/banner.jpg" alt="Banner AD"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="news-block padding-15 bg-white bd-grey"&gt;
&lt;h2 class="block-heading mb-40"&gt;Sports News&lt;/h2&gt;
&lt;div class="news-items"&gt;
&lt;div class="col-xs-12 padding-10"&gt;
&lt;div class="list-post-item"&gt;
&lt;a href="#" class="img-thumb"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/sports-1.jpg" alt="Sports News"&gt;&lt;/a&gt;
&lt;div class="post-info padding-15 ptb-20 bd-grey"&gt;
&lt;h4 class="mb-15 fw-6"&gt;&lt;a href="#" class="text-dark"&gt;The future of possible innovation for local business company.&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-13"&gt;Stay focused and remember we design the best WordPress News and Magazine Themes. It’s the ones closest to you that want to…&lt;/p&gt;
&lt;span class="date"&gt;&lt;i class="ti-timer"&gt;&lt;/i&gt; November 16 , 2017&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-3 col-xs-6 padding-10"&gt;
&lt;a href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/sports-2.jpg" class="img-full" alt="Sports News"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-3 col-xs-6 padding-10"&gt;
&lt;a href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/sports-3.jpg" class="img-full" alt="Sports News"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-3 col-xs-6 padding-10"&gt;
&lt;a href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/sports-4.jpg" class="img-full" alt="Sports News"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-md-3 col-xs-6 padding-10"&gt;
&lt;a href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/sports-5.jpg" class="img-full" alt="Sports News"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;aside class="col-md-4 sm-padding"&gt;
&lt;div class="sidebar-wrap"&gt;
&lt;div class="single-sidebar bd-grey bg-white"&gt;
&lt;a href="#"&gt;&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/banner-2.jpg" alt="Sidebar Ad" class="img-w1"&gt;&lt;/a&gt;
&lt;/div&gt;
 &lt;div class="single-sidebar no-padding"&gt;
&lt;a href="https://www.accuweather.com/en/us/new-york-ny/10007/weather-forecast/349727" class="aw-widget-legal"&gt;

&lt;/a&gt;&lt;div id="awcc1499974479079" class="aw-widget-current" data-locationkey="" data-unit="c" data-language="en-us" data-useip="true" data-uid="awcc1499974479079"&gt;&lt;/div&gt;&lt;script data-cfasync="false" src="&lt;?php bloginfo('template_directory') ?&gt;/../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="&lt;?php bloginfo('template_directory') ?&gt;/../../../oap.accuweather.com/launch.js"&gt;&lt;/script&gt;
&lt;/div&gt;
&lt;div class="single-sidebar no-padding"&gt;
&lt;div class="side-tab"&gt;
&lt;ul class="tab-menu mb-15"&gt;
&lt;li class="active"&gt;&lt;a href="#recent" data-toggle="tab"&gt;Recent&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#popular" data-toggle="tab"&gt;Popular&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#comments" data-toggle="tab"&gt;Comments&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="tab-content bd-grey padding-15"&gt;
&lt;div class="tab-pane fade in active" id="recent"&gt;
&lt;ul class="list-post-items"&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-1.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the US.&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-2.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;Style icon angelina goes to take oscar.&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-3.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;How to become a wildlife photographer?&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-4.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;linin park singer is no more. he is top in the world.&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt; 
&lt;div class="tab-pane fade in" id="popular"&gt;
&lt;ul class="list-post-items"&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-1.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the grabl&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-2.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the grabl&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-3.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the grabl&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-4.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the grabl&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt; 
&lt;div class="tab-pane fade in" id="comments"&gt;
&lt;ul class="list-post-items"&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-1.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the grabl&lt;/a&gt;&lt;/h4&gt;
 &lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-2.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the grabl&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-3.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the grabl&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;img src="&lt;?php bloginfo('template_directory') ?&gt;/img/tab-4.jpg" alt="Image"&gt;
&lt;div class="list-post-content bd-grey"&gt;
&lt;h4 class="fz-14"&gt;&lt;a href="#"&gt;William Braynt went to visit the grabl&lt;/a&gt;&lt;/h4&gt;
&lt;p class="fz-12 fw-6 tt-u no-margin"&gt;national Octobar 2017&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt; 
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="single-sidebar"&gt;
&lt;h3 class="fw-8 fz-18 tt-u mb-30"&gt;News Category&lt;/h3&gt;
&lt;ul class="cat-list"&gt;
&lt;li&gt;&lt;a href="#"&gt;World&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Travel&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Foods&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Creative&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Sports&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Racing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Technology&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="single-sidebar"&gt;
&lt;h3 class="fw-8 fz-18 tt-u mb-30"&gt;Subscribe News24&lt;/h3&gt;
&lt;form action="#" class="subscribe-form"&gt;
&lt;input type="email" name="email" placeholder="Enter Your Email"&gt;
&lt;input type="submit" value="Subscribe"&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/aside&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;?php get_footer(); ?&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

<?php get_header(); ?>

<div class="featured-post" style="background-image: url(<?php bloginfo('template_directory') ?>/img/slider-post-1.jpg);">

<a href="#" class="cat-name tt-u">World</a>

<h3 class="fw-6 fz-16"><a href="#" class="text-white">Michel Brown Talks About American People.</a></h3>

</div>

<div class="featured-post" style="background-image: url(<?php bloginfo('template_directory') ?>/img/slider-post-1.jpg);">

<a href="#" class="cat-name tt-u">World</a>

<h3 class="fw-6 fz-16"><a href="#" class="text-white">Michel Brown Talks About American People.</a></h3>

</div>

<div class="featured-post" style="background-image: url(<?php bloginfo('template_directory') ?>/img/slider-post-2.jpg);">

<a href="#" class="cat-name tt-u">Sports</a>

<h3 class="fw-6 fz-16"><a href="#" class="text-white">Improve Your Health And Stamina With Cycling.</a></h3>

</div>

<div class="featured-post" style="background-image: url(<?php bloginfo('template_directory') ?>/img/slider-post-2.jpg);">

<a href="#" class="cat-name tt-u">Sports</a>

<h3 class="fw-6 fz-16"><a href="#" class="text-white">Improve Your Health And Stamina With Cycling.</a></h3>

</div>

<div class="featured-post" style="background-image: url(<?php bloginfo('template_directory') ?>/img/slider-post-3.jpg);">

<a href="#" class="cat-name tt-u">World</a>

<h3 class="fw-6 fz-16"><a href="#" class="text-white">An Army or Ground Force is a Fighting Force That Fights Primarily On Land.</a></h3>

</div>

<div class="featured-post" style="background-image: url(<?php bloginfo('template_directory') ?>/img/slider-post-3.jpg);">

<a href="#" class="cat-name tt-u">World</a>

<h3 class="fw-6 fz-16"><a href="#" class="text-white">An Army or Ground Force is a Fighting Force That Fights Primarily On Land.</a></h3>

</div>

<div class="featured-post" style="background-image: url(<?php bloginfo('template_directory') ?>/img/slider-post-4.jpg);">

<a href="#" class="cat-name tt-u">World</a>

<h3 class="fw-6 fz-16"><a href="#" class="text-white">Alex Helis Confirms Mystery Pop Singer On New Music Album.</a></h3>

</div>

<div class="featured-post" style="background-image: url(<?php bloginfo('template_directory') ?>/img/slider-post-4.jpg);">

<a href="#" class="cat-name tt-u">World</a>

<h3 class="fw-6 fz-16"><a href="#" class="text-white">Alex Helis Confirms Mystery Pop Singer On New Music Album.</a></h3>

</div>

<span class="ticker-title tt-u">Breaking News</span>

<li><a href="#">Michel Brown Talks About American People.</a></li>

<li><a href="#">An Army or Ground Force is a Fighting Force That Fights Primarily On Land.</a></li>

<li><a href="#">Alex Helis Confirms Mystery Pop Singer On New Music Album.</a></li>

<li><a href="#">Improve Your Health And Stamina With Cycling.</a></li>

</ul>

</div>

<h2 class="block-heading mb-40">Trending News</h2>

<a href="#" class="mb-20"><img src="<?php bloginfo('template_directory') ?>/img/trending-1.jpg" alt="Tranding News"></a>

<h4 class="mb-15 fw-6"><a href="#" class="text-dark">The future of possible innovation for business company.</a></h4>

<span class="date"><i class="ti-timer"></i> November 16 , 2017</span>

</div>

<a href="#" class="mb-20"><img src="<?php bloginfo('template_directory') ?>/img/trending-2.jpg" alt="Tranding News"></a>

<h4 class="mb-15 fw-6"><a href="#" class="text-dark">The future of possible innovation for business company.</a></h4>

<span class="date"><i class="ti-timer"></i> November 16 , 2017</span>

</div>

<a href="#" class="mb-20"><img src="<?php bloginfo('template_directory') ?>/img/trending-3.jpg" alt="Tranding News"></a>

<h4 class="mb-15 fw-6"><a href="#" class="text-dark">The future of possible innovation for business company.</a></h4>

<span class="date"><i class="ti-timer"></i> November 16 , 2017</span>

</div>

<a href="#" class="mb-20"><img src="<?php bloginfo('template_directory') ?>/img/trending-4.jpg" alt="Tranding News"></a>

<h4 class="mb-15 fw-6"><a href="#" class="text-dark">The future of possible innovation for business company.</a></h4>

<span class="date"><i class="ti-timer"></i> November 16 , 2017</span>

</div>

<h2 class="block-heading mb-40">World News</h2>

<a href="#" class="mb-20"><img src="<?php bloginfo('template_directory') ?>/img/world-1.jpg" alt="World News"></a>

<h4 class="mb-15 fw-6"><a href="#" class="text-dark">The future of possible innovation for business company.</a></h4>

<span class="date"><i class="ti-timer"></i> November 16 , 2017</span>

</div>

<img src="<?php bloginfo('template_directory') ?>/img/world-2.jpg" alt="World News">

<h4 class="fz-14"><a href="#">William braynt went to visit.</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

<img src="<?php bloginfo('template_directory') ?>/img/world-3.jpg" alt="World News">

<h4 class="fz-14"><a href="#">White house press secretary Spicer briefs.</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

<img src="<?php bloginfo('template_directory') ?>/img/world-4.jpg" alt="World News">

<h4 class="fz-14"><a href="#">Expert tips on how to get a pay rise business.</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

<h2 class="block-heading mb-40">Featured Videos</h2>

</div>

</div>

</div>

</div>

<img src="<?php bloginfo('template_directory') ?>/img/video-1.jpg" alt="Featured Video">

</div>

</a>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/video-2.jpg" alt="Featured Video">

</div>

</a>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/video-3.jpg" alt="Featured Video">

</div>

</a>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/video-4.jpg" alt="Featured Video">

</div>

</a>

</li>

</ul>

</div>

<a href="#"><img src="<?php bloginfo('template_directory') ?>/img/banner.jpg" alt="Banner AD"></a>

</div>

<h2 class="block-heading mb-40">Sports News</h2>

<a href="#" class="img-thumb"><img src="<?php bloginfo('template_directory') ?>/img/sports-1.jpg" alt="Sports News"></a>

<h4 class="mb-15 fw-6"><a href="#" class="text-dark">The future of possible innovation for local business company.</a></h4>

<p class="fz-13">Stay focused and remember we design the best WordPress News and Magazine Themes. It’s the ones closest to you that want to…</p>

<span class="date"><i class="ti-timer"></i> November 16 , 2017</span>

</div>

<a href="#"><img src="<?php bloginfo('template_directory') ?>/img/sports-2.jpg" class="img-full" alt="Sports News"></a>

</div>

<a href="#"><img src="<?php bloginfo('template_directory') ?>/img/sports-3.jpg" class="img-full" alt="Sports News"></a>

</div>

<a href="#"><img src="<?php bloginfo('template_directory') ?>/img/sports-4.jpg" class="img-full" alt="Sports News"></a>

</div>

<a href="#"><img src="<?php bloginfo('template_directory') ?>/img/sports-5.jpg" class="img-full" alt="Sports News"></a>

</div>

<a href="#"><img src="<?php bloginfo('template_directory') ?>/img/banner-2.jpg" alt="Sidebar Ad" class="img-w1"></a>

</div>

</a><div id="awcc1499974479079" class="aw-widget-current" data-locationkey="" data-unit="c" data-language="en-us" data-useip="true" data-uid="awcc1499974479079"></div><script data-cfasync="false" src="<?php bloginfo('template_directory') ?>/../../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="<?php bloginfo('template_directory') ?>/../../../oap.accuweather.com/launch.js"></script>

</div>

<li class="active"><a href="#recent" data-toggle="tab">Recent</a></li>

<li><a href="#popular" data-toggle="tab">Popular</a></li>

<li><a href="#comments" data-toggle="tab">Comments</a></li>

</ul>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-1.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the US.</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-2.jpg" alt="Image">

<h4 class="fz-14"><a href="#">Style icon angelina goes to take oscar.</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-3.jpg" alt="Image">

<h4 class="fz-14"><a href="#">How to become a wildlife photographer?</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-4.jpg" alt="Image">

<h4 class="fz-14"><a href="#">linin park singer is no more. he is top in the world.</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

</ul>

</div>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-1.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the grabl</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-2.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the grabl</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-3.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the grabl</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-4.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the grabl</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

</ul>

</div>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-1.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the grabl</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-2.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the grabl</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-3.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the grabl</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

<li>

<img src="<?php bloginfo('template_directory') ?>/img/tab-4.jpg" alt="Image">

<h4 class="fz-14"><a href="#">William Braynt went to visit the grabl</a></h4>

<p class="fz-12 fw-6 tt-u no-margin">national Octobar 2017</p>

</div>

</li>

</ul>

</div>

<h3 class="fw-8 fz-18 tt-u mb-30">News Category</h3>

<li><a href="#">World</a></li>

<li><a href="#">Travel</a></li>

<li><a href="#">Foods</a></li>

<li><a href="#">Creative</a></li>

<li><a href="#">Sports</a></li>

<li><a href="#">Racing</a></li>

<li><a href="#">Technology</a></li>

</ul>

</div>

<h3 class="fw-8 fz-18 tt-u mb-30">Subscribe News24</h3>

</form>

</div>

</aside>

</div>

</section>

<?php get_footer(); ?>

Vậy là Giao diện Trang chủ đã hoàn thiện :

Nếu có image nào hoặc file nào load lỗi các bạn nhớ thêm đoạn code này vào trước các link nhé : <?phpbloginfo(‘template_directory’) ?>

Bài viết sau mình sẽ hướng dẫn các bạn cách Get Data – Get bài những bài viết từ database lên giao diện , để website hoạt động một cách tự động. Các bạn có thể xem tiếp tại đây.