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 :
Just login to your wordpress admin panel
From your WordPress admin panel click Apperance -> Customize
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 :
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 ) :
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 :
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 :
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 .