How To Make Simple Basic WordPress Theme From Scratch For Beginner

Before you make wordpress theme from scratch. You must know basic about html , css , php and javascript.
Just know the basic only is enough for learning purpose. But if you still don’t know the basic , just try it first and try improve later.
Actually to make simple wordpress theme basic which work , you only need 2 files :
1. index.php
2. style.css
Because it’s only introduction for wordpress theme code for very beginner programmer .
So i only will make that 2 file .
First you need to make folder /wp-content/themes/mysimplebasic
and create 2 files index.php and style.css
Just file index.php like this :

<?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            echo '<div class="msb-post">';
                the_title(
                    '<header class="entry-header"><h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">',
                    '</a></h3></header>'
                );
                echo '<div class="entry-summary">';
                    the_excerpt();
                echo '</div>';
            echo '</div>';
        endwhile;
	the_posts_pagination();
    else :
        echo "There is no post";
    endif;
?>

And create style.css like this :


/*
Theme Name: MySimpleBasic
Theme URI: http://wpamanuke.com/how-to-make-simple-basic-wordpress-theme-from-scratch-for-beginner/
Description: Very Simple Basic WordPress Theme For Beginner
Author: WPAmaNuke
Author URI: http://www.wpamanuke.com/
Version: 1.0.1
Tags: one-column
Text Domain: mysimplebasic
Domain Path: /languages/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

That’s it. You just create very basic wordpress theme.

Secret Tools For Web Developer For Perfect Pixel Website Design

Because i’m a web developer , i didn’t too notice pixel perfect from the design ( just like padding , size , margin etc) So often website which i have developed get protest from website designer / client because it’s not pixel perfect. So after some year and get more experience, Here are some tools which i use to make website which  perfect pixel with website design :

  • PixelSake : It’s a tool to measure 2 element in screen automatically using mouse , save object to png and color picker . So you can save hours than measure 2 element manually. You can see the video here :
  • PerfectPixel  Add Ons (It’s available in Chrome and Firefox). It will load your website design to your live website and you can do comparison if it has been pixel perfect lively
  • ColorZilla Add Ons (Availabe in Chrome and Firefox) for pick color
  • PixelZoomer Add Ons (Availabe in Chrome and Firefox) for measure manually and it also have pick color too.
  • Firefox Web Developer Inspector. You can use default Firefox Inspector for measure manually, just use Tools -> Web Developer -> Inspector , Click Toolbox Options (it’s an icon in the bottom right (usually icon number three from right)) , Available Toolbox Buttons and Just check   Measure Portion of a Page
  • Dimension Add Ons (Available in Chrome) for Measure Automatically , It’s suitable if the image / screen has no gradient color.

That’s all tool which i use to make better wordpress theme pixel perfect .
 

HCJ Code Editor WP Plugin for Test your JavaScript, CSS, HTML online

HCJ Code Editor WordPress Plugin is a plugin which  allows you to write HTML, CSS, and JavaScript in realtime and preview the results on the same page. It’s almost same as JSFiddle or Codepen , but more simple. I made it for my collection HTML , CSS , JS Code and practicing my programming. Also i want to organize my simple code based on category and modify the theme.
I suggest if you want to use it , just using in your localhost only and not in production hosting. Because it allow execute javascript
Because it allow output and execute javascript , i think it will not be approved in wordpress.org repository so i upload it in my github.
If you want to download. Just through my github here.
From making this plugin , i learn about


add_filter('single_template','plugin_function_name');

to make custom template theming from plugin , create custom post and how to use ace editor.

Resume CV WordPress Plugin

Create Resume / CV easily with WordPress. Perfect way tools that help you to make positive impression. This minimal and modern design will highlight your most relevant features to get you noticed and create a consistent voice of your personal brand in all communications. To use this plugin :

  • Create a Page and choose Template : Resume CV Template
  • In the admin area . Click Resume CV and do modification than save
  • Just go to page url to see the resul

Features :

  • Profile
  • Contact
  • Qualification
  • Experience
  • Education
  • Hobby
  • Skill

You can download resume cv plugin from wordpress.org.
And you can see the demo here : resume template demo

Free NYSU Magazine WordPress Theme

NYSU WP Theme is a wordpress magazine theme with SEO Schema. I still experiment with this.
Here is some Schema which i use :

  • WebPage
  • WebPageElement
  • SiteNavigationElement : for menu from wp_nav_menu
  • Brand : Logo and Web URL
  • WPSideBar : Sidebar
  • BreadCrumbList : for menu on single
  • Organization : for social network link
  • Comment

For Microformat

  • hatom
  • hentry
  • hcard

Here are some features which i have addded :

  • 1 column / 2 column
  • fullwidth / box
  • slider using owlcarousel
  • ticker news using marquee

Notes

For Slider and Widget Sliders only posts with featured images which will be shown. Post without images will be ignored. So make sure the post has featured images if you want to use sliders

HOW TO INSTALL  :

  1. Just download NYSU Magazine WordPress Theme
  2. Login to your wordpress admin panel
  3. From Appearance -> Themes -> Add New -> Upload Themes
  4. Just choose the zip file and follow the instruction

HOW TO USE SPECIAL Widget NYSU Magazine Theme

  1. Add New Page and Give Title
  2. On Template (on the right) choose Magazine Template than Save
  3. Click Appearance -> Widgets
  4. Just Drag the Special Widget , For Example : NYSU Block 1 – Mag (12/12) is for Mag (12/12) .. Just see the number sequence for good result.
  5. See Page which you have made


HOW TO USE Site Origin Page  Builder with this theme :

  • Install Site Origin Page Builder from wordpress.org
  • Install NYSU SOPB Fix Pluginnysu-sopb-fix to handle excerpt widget problem when using Page Builder By SiteOrigin
  • Just add Page or Post
  • Choose Template which have SOPB (Site Origin Page Builder)
  • Save the Page or Post

 

How To Add Adsense Code on the header :

  • Click Appearance -> Widgets
  • Add Custom HML Widget to Header Ads
  • Just Paste your adsense code and save it

Flat CMS

Flat CMS is CMS which doesn’t use database. So the file is saved as text file. Here is some Flat CMS based on PHP which i have found which support MarkDown Format :

  • Grav : It is modern flat file CMS which is good , I just explore this a little . I’m still searching how to do pagination. And the file is big about >4 MB without admin and 15 MB for admin (in zip file) . So it’s not suitable for my web hosting
  • PicoCMS : another flat CMS. It’s good but not found yet about pagination yet for many text files
  • HTMLy : I think it’s the most suitable for my website. It support pagination and easy to make theme. It has twentyeleven wordpress theme too. Only one problem about handling $date_format not initialize. So i just add $date_format = “%d %M %Y”; if there is error in the code.

So if you want to use Flat CMS in PHP. My suggestion is using HTMLy

Experiment Create WordPress Theme To Submit WordPress.Org in 2018

Here is my experiment in 2018 to develop wordpress theme which is free which will be uploaded to wordpress.org.  This year (2018)  ,  i success upload my first Coming Soon WP Plugin AmaUCP ( a plugin to show underconstruction / coming soon page ) in wordpress.org which take only 3 days for approvement. I want to try upload a free wordpress theme, because my my plugin not succesfull only 3 download in a week :))  ( Just like my 2012  plugin which i had forgotten the password for uploading, so this year  i make a new account ) . Although it’s fail,  but it’s ok , it’s just a hobby project.  I want to make 6 – 12 free small high quality programs in a year which i hope can be usefull and have many users. It can be WordPress related or Android App or Any Programming Related Project .
So before theme development  some months ago, i have made some research . And here is i think some free themes / plugin which can become base for my magazine theme :

  • MH Magazine Lite : I have compared some free themes and i like the coding of MH Magazine , it’s very structure and i really like the code. It’s unussual code because using many do_action but after i see it, I now understand why it’s very success .
  • Stargazer : this theme has social menu which can become menu social icon. After i see it , the social icon menu just using css based on the url. Another wow. I have never thought about this trick.  Here is the sample css of Stargazer :
    #menu-social li a[href*="pinterest.com"]::before {
     content:'\f210';
     color:#c8232c
    }
  • News Portal : this theme has repeater social icon and news ticker. I don’t know yet what what repeater field will be used for in customizer. But i like the concept of repeater programming because i have not seen it before except when using kirki plugins.
  • Simple Category Posts Widget : this plugin can make multiple categories selection in widget
  • Loco Translate : It can make po file for translation.

And here my requirement for my theme :

  • Using Bootstrap for responsive screen
  • It must support Site Origin Page Builder  : I like the page builder , it can include the widget  too in the builder column.
  • SEO Friendly
  • Using WordPress Coding Standard
  • Simple and Fast

Some notes. Free Themes which are uploaded in wordpress.org must be tested using :

  • Theme Check : to check the standard code in theme
  • Theme Sniffer. ( Just download Option 1 : Easy . There is a zip file for releases code . If you download using Clone/Download you must install node and do the hardway )
  • Query Monitor
  • Debug Bar
  • Log Deprecated Notices
  • Monster Widget
  • WordPress Beta Tester
  • Regenerate Thumbnails

I thinks those theme will be good concept for my magazine theme.  I have made it 50% and i think it will be completed in some weeks.
Update :
I have uploaded my theme version 1.0.0 on 5 Febuary 2018 . Just using https://wordpress.org/themes/upload/
After i upload it, the website directly ask to reupload with version 1.0.1 , so which i must do only change style.css with version 1.0.1.
After that show scan message :

Just need some weeks to know if it’s approved or not

Here is the result (16 April 2018):

  • First upload 5 Febuary 2018 . Get Open Status.
  • After wait 8 weeks , get review 29 March 2018 , need 3 days to fix error and requirement. Get Reviewing Status
  • After that still wait 7 days (not finished yet) to talk about license. It seem because i have portfolio in themeforest and preview which link  to 404 error page my free theme (  i move web server and themeforest html template which was made 4 years ago link to 404 error page ,because i forget to upload the html template) . Another problem, i have PSD which convert to theme by another user because i sell the copyright license (4 years ago ) , so i have been asked about relation with the another user ,  just still waiting (7 April 2018) . I think the license problem is the most retiring lol . ( I think , i more prefer make wordpress plugin than theme lol , it’s easier. So if you have any ideas about plugins just give me inputs in the comment form ) . Finally it get status approved (7 April 2018)  and now enter Final Review: Approved Themes Not Yet Live  for another testing review
  • So before you upload themes in wordpress.org just make sure if you sell WordPress Theme which have GPL License in your website / marketplace. Because GPL License it’s about pilosophy  . And make clear about license in readme.txt about license javascript , images with url , inspiration theme etc .
  • Finally my free themes live approved (26 April 2018) . You can see here : NYSU Magazine on WordPress.org
  • So here the process
    • 5 Febuari 2018 : First Upload (Status : Open)
    • 29 March 2018 : (Status : Reviewing)
    • 7 April 2018 : (Status : Approved)
    • 26 April 2018 : (Status: Live)
    • Take 12 weeks to get wordpress theme live for newbies like me.
    • For update theme which has status live , it will be auto approved by themetracbot

Anyway here are some references which i have found , for you who want to upload theme to wordpress.org

Hope it’s usefull

Best Review Themes For Sale

Ponzi is newspaper wordpress theme  is very suitable for blog and review. the theme is a responsive website design theme. Ponzi newspaper wordpress theme was built using Twitter Bootstrap, a popular front-end framework. It has a fully responsive design and is cross-browser compatible. There is also localization support enabling you to reach a multilingual audience. Google fonts which are used Oswald and Open Sans. It’s based on bootstrap 3 Ponzi  Theme is made for clean , minimalist magazine and modern design. This newspaper template support Boxed and full layout. This theme makes it easy for you to set up and customize your site to match the look and functionality you want, without the need for a lot of technical knowledge. The theme’s demo showcases a “hot news” scrolling ticker on the homepage, which adds a breaking news feel to the site.
This theme gives you a variety of customization options, with page layouts that can be set up with wide or narrow sidebars in and different combinations. It also includes a number of page templates, such as an alternate homepage layout, four different blog layout styles, portfolio page

10 Plugins WordPress You must know as WP Theme Developer

As WP Theme developer , here is some plugins which you must know for develop your creativity on theme

  • Simple Page Sidebar : This plugin is to show multiple sidebar on your page or post. It’s easy to add or delete custom page sidebar.
  • Custom Category Templates : Use this to choose Category Template (just like Page Template). If you want to make the category is different layout, just use this template
  • WP Custom Post Template : You can use Post template on your post (just like Page Template)
  • Event Manager : just make sure your theme support event manager , because based on my experience many user who use this plugin.
  • WPML : WordPress multilingual Plugin. You can translate any page/post on your blog
  • RTL Tester : just use RTL Tester to make sure your theme support RTL. Don’t forget theme to support RTL , you can use is_rtl() to use different css and javascript for RTL theme. A usefull for converting LTR to RTL is http://cssjanus.commoner.com/
  • Codestyling Localization : This plugin to generate mo/po for your theme for easy localization from wordpress admin area. You can translate directly from your wordpress admin area
  • Titan Framework : if you want to make admin area for plugins or theme. Just use this framework, It’s easy to use. The lack only it doesn’t support repeater group. But i think it’s powerful enough if you want to make plugin/theme without repeater support
  • Redux Framework : This is powerfull wordpress admin framework  for theme. For metabox support you can use addons
  • Vafpress Framework : This is powerfull for wordpress admin framework for theme admin and metabox and support repeater group. The lack only it’s not support include the javascript the right way on admin area as wordpress standard. So if you submit your theme which use Vafpress Framework in the wordpress.org , it will be probably rejected. But i think it’s the most powerfull framework.
  • Theme Check : You can use this plugin to check you theme has passed the test wordpress standard theme or not.
  • Update Notifier : If you program premium wptheme which is not hosted in wordpress.org just give notifier with this code  http://wplift.com/notify-your-theme-users-about-updates-in-their-dashboard

AMANUKE FREE HTML UNDER CONSTRUCTION PAGE

Amanuke is new Under Construction / Work in Progress HTML template to show the progress of your web development.
It use countdown timer and circle progress bar to show how many percents in days the launching date.
It use social icons for contact , ajax subscribe form and ajax contact form. It has 13 pattern to change the background image. It also has twitter ticker in the bottom.
It is my first html underconstruction page.

  •  JQuery
  • Twitter Widget Ready
  • Count Down Timer
  • Icon Social – Subscribe Form
  • Contact Form – Twitter Ticker
  • Light and Dark Template
  • 3Color Combination with Pattern

And here is the complete free download amanuke under construction page .