{"id":12221,"date":"2021-03-05T00:00:00","date_gmt":"2021-03-04T16:00:00","guid":{"rendered":"https:\/\/fgchen.com\/wpedu2\/2021\/03\/05\/wordpress-theme-development-tutorial-step-by-step-vegibit\/"},"modified":"2026-03-30T14:38:58","modified_gmt":"2026-03-30T06:38:58","slug":"wordpress-theme-development-tutorial-step-by-step-vegibit","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2021\/03\/wordpress-theme-development-tutorial-step-by-step-vegibit\/","title":{"rendered":"\u5f9e\u96f6\u958b\u59cb\u5efa\u7acbWordPress\u4e3b\u984c"},"content":{"rendered":"
This is going to be a fun tutorial where we inspect how to create your own WordPress Theme from scratch. In fact, we’ll begin with absolutely zero files and zero lines of code. The only way to understand how WordPress Themes work, is to really jump in at a low level and do every single\u2026<\/blockquote>\n\n\u5167\u5bb9\u51fa\u8655: WordPress Theme Development Tutorial Step By Step \u2013 Vegibit<\/a><\/em>\n\n \n\n

Step 1: Create a folder to hold your theme files<\/h2>\n\n\u5728wp-content\u4e0b\u7684theme\u5efa\u7acb\u4e00\u500b\u65b0\u8cc7\u6599\u593e\uff0c\u4f8b\u5982\uff0cmytheme\n\n

Step 2: Create style.css and index.php in your theme folder<\/h2>\n\n\u5efa\u7acb style.css<\/a>\n\n
\/*\nTheme Name: mytheme\nAuthor: Wells\nAuthor URI: https:\/\/fgchen.com\nVersion: 1.0\n *\/<\/pre>\n\n
<\/h4>\n\n
\u5efa\u7acb index.php<\/h4>\n\n
<h1>Custom Theme!<\/h1>\n<\/pre>\n\n \n\n
Step 3: Activate your theme from the WordPress Dashboard<\/h2>\n\n \n\n
Step 4: Add Code to Output The Post Title and Post Text<\/h2>\n\nindex.php\u4fee\u6539\u6210\u5982\u4e0b\u7684\u7a0b\u5f0f\u78bc\uff1a\n\n
<?php\n \nif ( have_posts() ) :\n  while ( have_posts() ) : the_post(); ?>\n \n        <h2><?php the_title() ?><\/h2>\n    <?php the_content() ?>\n  \n  <?php endwhile;\n \nelse :\n  echo '<p>There are no posts!<\/p>';\n \nendif;\n \n?><\/pre>\n\n \n\n
Step 5: Add a Link To Each Post \u70ba\u6bcf\u4e00\u5247\u8cbc\u6587\u52a0\u4e0a\u8d85\u9023\u7d50(\u6253\u958b\u6bcf\u4e00\u5247\u8cbc\u6587)<\/h2>\n\n \n\n
<?php\n \nif ( have_posts() ) :\n  while ( have_posts() ) : the_post(); ?>\n \n        <h2><a href=\"<?php the_permalink() ?>\"><?php the_title() ?><\/a><\/h2>\n  <?php the_content() ?>\n  \n  <?php endwhile;\n \nelse :\n  echo '<p>There are no posts!<\/p>';\n \nendif;\n \n?><\/pre>\n\n \n\n
Step 6: Add a Header and Footer To The Custom Theme<\/h2>\n\n \n\n ","protected":false},"excerpt":{"rendered":"
This is going to be a fun tutorial where … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[266],"tags":[],"class_list":["post-12221","post","type-post","status-publish","format-standard","hentry","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/comments?post=12221"}],"version-history":[{"count":1,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12221\/revisions"}],"predecessor-version":[{"id":13500,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12221\/revisions\/13500"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=12221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=12221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=12221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}