Showcase Theme Preview Reloaded

For some days i am looking for showcase theme preview plugin in wordpress.org for showing my future themes Finally i found WordPress Theme Showcase Plugin in wordpress.org , but it was 8 years old and not updated. So i just modify it a little to meet my needs. The plugin is simple and just like my expectation so i add javascript to make it work in post , page and category.

Beside using shortcode  [theme_showcase] , you can use Theme Preview widget on sidebar / footer to choose theme preview which you want

I upload it to wordpress.org so it’s usefull for anybody and can be modified as they need. This plugin is usefull for wordpress theme developer showcase their simple themes.

You can see the demo here : http://reviews.wpamanuke.com/theme-preview/

 

Random Theme WordPress Plugin

After long not programming , finally i get idea to make random theme wordpress plugin

The idea is simple . In wordpress plugin there are a lot of random wordpress plugin just like random post , banner , image , gallery etc but not exist random theme.

So i make it based on another plugin.

After 3 days research and programming  finally i can make it .

I call it Random Theme .

It will display random theme when visitor come to your website. So just choose nice themes for your website at least 2 themes.

You can see the demo here : http://reviews.wpamanuke.com/

Free Blogpedia MultiPurpose Blog WordPress Theme

After 1 month coding . Finally i can release blogpedia, a free wordpress theme for blog. It based on bootstrap 3, owlcarousel , fontawesome. It just wordpres code for my practice coding skill , so the content is simple. I have plan to submit it in wordpress.org after my first theme approved. It has been approved in wordpress.org . You can download blogpedia wordpress theme .
It still have many lack features , like styling color , widget , etc . But i have plan for iteration to make it better.  Blogpedia is my second theme this year. So just wait my another free wordpress theme. If you have any ideas what type theme / plugins which you want , just comment on this post. I have less ideas what type theme / plugins lol.

How To Use Slider in Home :

  1. Just login to your wordpress admin panel
  2. From your WordPress admin panel click Apperance -> Customize 
  3. Click Theme Options -> Magazine Template -> Header Slider -> Enable
  4. Just choose Category and Post Count

How To Use Top Slider in Home :

  1. From your WordPress admin panel click Apperance -> Customize 
  2. Click Theme Options -> Magazine Template -> Top Feature -> Enable
  3. Than choose category and number of post count which you want

If you want to use menu with social icons and top menu , just choose Theme Options -> Layout -> Header Type -> Type 1.

If you want to customize background color than just choose Theme Options -> Layout -> Layout Type -> Boxed

Simple HTML Tutorial

HTML is the standard markup language for creating Web pages. Before you code wordpress theme, first you must learn html and css. HTML is the standard markup language for creating Web pages. Because HTML describe structure of web pages using markup and the markup is element to build html block.
The most basic html document is like this :

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>

NOTES

  • The <head> element contains meta information about the document
  • The <body> element contains the visible page content

Here is simple standard HTML Document

    <!DOCTYPE html>
    <html>
    <head>
        <title>My Title</title>
    </head>
    <body>
        <h1>My Heading</h1>
        <p>My Paragraph.</p>
    </body>
    </html>

The output above html will be like this :

Because the output still plain , you need to styling the html with css. Styling here means coloring , font-size , padding etc.
Here the sample styling with embedded css ( using style ) :

    <!DOCTYPE html>
    <html>
    <head>
        <title>My Title</title>
        <style>
            h1 {
                color: #ff0000;
                font-size: 50px;
                text-transform: uppercase;
            }
            p {
                color: #0000ff;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <h1>My Heading</h1>
        <p>My Paragraph.</p>
    </body>
    </html>

And here is the output

I hope this simple html tutorial help you to know very basic HTML and CSS

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