create account

How to do Wordpress Theme Development, part 2 - The Scipio Files #9 by scipio

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @scipio · (edited)
$58.14
How to do Wordpress Theme Development, part 2 - The Scipio Files #9
![wordpress_img.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514561637/jyxxofxsstchplsxjbpm.png)

# How to do Wordpress Theme Development, part 2 - The Scipio Files #9 
It's been a while since I published [Part 1 on How-to Do Wordpress Theme Development](https://steemit.com/utopian-io/@scipio/the-scipio-files-1-how-to-do-wordpress-theme-development-part-1), and now finally part 2 is live! So please enjoy this episode! ;-)

In part 1, we discussed the basic components of HTML (elements, attributes and values) and CSS (selectors, properties and values). We talked about how we can connect an HTML document to an external (non-embedded) CSS file functioning as its style sheet via the `<link>` element in within the `<head>` part of `index.html`. Today, in part 2 on how-to do Wordpress Theme Development, we expand on that, by creating a full-fledged (yet relatively simple) and OK-ish looking Theme / template, for now (again)  using only HTML and CSS.

Here's a short visualization showing you what we will build today:

![2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514563303/phvmbobuesdgjpnfidis.png)

### The Code
All the code that's needed to re-create yourself what I've just shown you above are two (newly created) code files (and you can add two more images, -1- the logo file - where I've just kindly borrowed the @utopian-io logo, and -2- any visual image containing enough pixels, but the one I used is found [here](https://static.pexels.com/photos/574077/pexels-photo-574077.jpeg)).

-a- The file `index.html` contains the following code:

```
<!DOCTYPE html>
<html lang="en">
<head>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> 
	<link rel="stylesheet" href="style.css" />
	<meta charset="UTF-8">
	<title>myTheme - Homepage</title>
</head>
<body>
	<section id="top">
		<div class="wrapper">
			<div id="top_holder">
				<div id="logo">
					<img src="images/logo-utopian.png" />
				</div>
				<div id="topnav">
					<ul>
						<li><a href="">Home</a></li>
						<li><a href="">Services</a></li>
						<li><a href="">News</a></li>
						<li><a href="">FAQ</a></li>
						<li><a href="">Contact us</a></li>
					</ul>
				</div>
			</div>
		</div>
	</section>
```
```
	<section id="slider">		
		<div class="slider">			
			<div style="background-image: url('images/visual1.jpg')"></div>
		</div>
		<div class="slide_cta">
			<div class="wrapper">
				<h1>Welcome to our website!</h1>
			</div>
		</div>
	</section>
```
```
	<section id="content">
		<div class="wrapper">
			<div id="content_holder">				
				<h2>We have really awesome services!</h2>
				<h3>Enjoy them, please! And tell everybody about them as well!</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ea, tenetur. Quaerat aperiam dicta veritatis voluptatum tempora magnam, facilis, ipsam fuga rerum officia, neque pariatur minima eveniet, tempore quasi at. Illo eos necessitatibus fugit, sapiente itaque magnam maxime ducimus labore alias laudantium nihil quis nam ad veniam, perspiciatis saepe aut possimus dignissimos et.
				</p>
				<p>
					Alias vitae autem, obcaecati corrupti, qui blanditiis recusandae laboriosam enim eum reiciendis molestias, ad iure doloremque. Assumenda laboriosam sapiente accusamus inventore rerum cupiditate temporibus repellat error cumque! Placeat odit vero recusandae necessitatibus, libero, iusto maiores deleniti, quasi voluptates deserunt maxime, explicabo voluptate sunt sit enim beatae at asperiores optio excepturi? Repudiandae quae eligendi debitis eaque ducimus vero illo eveniet hic deserunt, ab praesentium veritatis sunt corrupti dolore necessitatibus est odio eius.
				</p>
			</div>
		</div>
	</section>
```
```
	<section id="news">
		<div class="wrapper">
			<div id="news_holder">
				<div class="col">
					<h3>News item 1</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam.</p>
					<a href="" class="readmore">Read more</a>
				</div>
				<div class="col">
					<h3>News item 2</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, totam.</p>
					<a href="" class="readmore">Read more</a>
				</div>
				<div class="col">
					<h3>News item 3</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, hic.</p>
					<a href="" class="readmore">Read more</a>
				</div>
			</div>
		</div>
	</section>
```
```
	<section id="footer">
		<div class="wrapper">
			<div id="footer_holder">
				<h3>&copy; 2017</h3>
			</div>
		</div>
	</section>
</body>
</html>
```


And -b- the file `style.css` contains the following code:


```
/* colors used:
greyDark:	rgb(37, 37, 37)
white:		rgb(255, 255, 255)
purple:		rgb(143, 55, 142)
blue:		rgb(75, 125, 192)
*/
```
```
* { margin: 0; padding: 0; outline: 0; }
img { display: block; max-width: 100%; height: auto; }
```
```
body { font-family: 'Open Sans'; font-size: 16px; color: rgb(37, 37, 37); }
h1 { font-weight: 800; font-size: 48px; line-height: 1.0em; text-transform: uppercase; }
h2 { font-weight: 300; font-size: 32px; line-height: 1.8em; }
h3 { font-size: 20px; line-height: 1.4em; }
p { margin: 25px 0; line-height: 1.6em; }
```
```
div.wrapper { width: 960px; margin: 0 auto; }
```
```
section#top { padding: 40px 0; background-color: rgb(37, 37, 37);  }
section#top div#top_holder { overflow: auto; }
section#top div#logo { float: left; }
section#top div#topnav { float: right;  }
section#top div#topnav ul { list-style-type: none; }
section#top div#topnav li { display: inline-block; margin: 20px 15px 0 15px; }
section#top div#topnav a { color: rgb(255, 255, 255); text-decoration: none; text-transform: uppercase; font-weight: 600; }
section#top div#topnav a:hover { color: rgb(143, 55, 142); transition: 0.3s color; }
```
```
section#slider { height: 500px; position: relative; border-bottom: 6px solid rgb(75, 125, 192); }
section#slider div.slider     { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#slider div.slider>div { width: 100%; height: 100%; position: absolute; 
    background-position: center center; background-size: cover; background-repeat: no-repeat; }  
section#slider div.slide_cta { width: 100%; height: 80%; top: 30%; position: absolute; z-index: 10; text-align: center; }
section#slider h1 { width: 100%; line-height: 1.15em; font-size: 72px; font-weight: 700; color: rgb(255, 255, 255); text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8); margin-top: 20px; } 
```
```
section#content { padding: 40px 0; }
section#content div#content_holder { text-align: center; }
section#content h2 { color: rgb(143, 55, 142); }
```
```
section#news { padding: 60px 0; background-color: rgb(143, 55, 142); }
section#news div#news_holder { overflow: auto; }
section#news div.col { float: left; width: calc((100% / 3) - 20px); padding-right: 20px; }
section#news h3 { color: rgb(255, 255, 255); }
section#news p { color: rgba(255, 255, 255, 0.8); }
section#news a.readmore { display: inline-block; text-transform: uppercase; font-weight: 600; font-size: 14px; text-decoration: none; color: rgb(255, 255, 255); background-color: rgb(37, 37, 37); padding: 8px 15px; border-radius: 6px; border: 2px solid rgb(255, 255, 255); transition: 0.3s background-color; }
section#news a.readmore:hover { background-color: rgb(75, 125, 192); }

section#footer { padding: 40px 0; background-color: rgb(37, 37, 37); }
section#footer div#footer_holder { text-align: center; }
section#footer h3 { color: rgb(255, 255, 255); }
```
```
/* @media queries */
@media screen and (max-width: 980px) {	
	div.wrapper { width: 90%; }
}
```

### The code explained
This time, I will explain the code "top-to-bottom", mening you can follow along by looking at:
-1- the animated gif, displaying the webpage top-to-bottom,
-2- the `index.html` file, top-to-bottom,
-3- the `style.css` file, you guessed it, top-to-bottom as well.

At the top of the `index.html` file, you see the line 
```
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
```
What is happening here, is that I'm using an **externally hosted** stylesheet, on a Google url, containing the **font-face data** of the font `Open Sans`. You can freely choose a boatload of fonts for your own Wordpress Themes on https://fonts.google.com/, or using other font sources. Such an externally hosted repository (in this case containing fonts) to connect to from within your (locally) hosted Wordpress files is called a **CDN, a Code Distribution Network**. Oftentimes using a CDN is faster than locally hosting the data yourself, because in case a client browser already downloaded that same (in this case) `Open Sans` font, the browser doesn't have to re-load it, making the web page load faster.

In the `style.css` file, in the line 
```
body { font-family: 'Open Sans'; font-size: 16px; color: rgb(37, 37, 37); }
```
... I'm telling the browser to use the font `Open Sans` by default everywhere inside the `<body>` element (which is the entire web page in this case).

Inside `<section id="top">` you can see two sibling elements called `<div id="logo">` and `<div id="topnav">`, both held together as siblings inside their parent element `<div id="top_holder">`. Normally, those two logo / topnav `div`'s would get displayed above eachother, but in this case I wanted to place them next to eachother, side-by-side. How did I do that?

`style.css` contains the line 
```
section#top div#top_holder { overflow: auto; }
```
...  meaning that the element `<div id="top_holder">` needs to function as a "box" and its height should be just as big as the "tallest" child element.

```
section#top div#logo { float: left; }
``` 
and 
```
section#top div#topnav { float: right;  }
``` 
... state that the logo should be placed left, and the topnav at the right part of the screen. Because of the 
```
section#top div#top_holder { overflow: auto; }
``` 
statement, the height of `<div id="top_holder">` is now calculated correctly.

`<div id="topnav">` contains a `<ul>` element holding 5 `<li>` elements, each holding a `<a href="">` hyperlink: this is the way Wordpress by default wants a menu containing hyperlinks to be structured. The corresponding CSS-parts styling the menu are (hopefully) pretty self-explanatory, although you might want to fiddle around a bit with its properties and values (try to change the colors for example, or the font-size, font-weight, or hovering properties).

Then we get to `<section id="slider">`. 

Although the "slider" at this moment isn't "sliding" at all - we'll get to that in part 3 of my Wordpress Theme Development series using a bit of jQuery! - it's noteworthy to explain a bit how and why the visual is always displayed page-wide, regardless the available browser-width (big screens or small screens: the visual / slider always displays the visual image(s) in the right proportions!). 

This is achieved via the following CSS code:

```
section#slider { height: 500px; position: relative; border-bottom: 6px solid rgb(75, 125, 192); }
section#slider div.slider     { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#slider div.slider>div { width: 100%; height: 100%; position: absolute; 
   background-position: center center; background-size: cover; background-repeat: no-repeat; }  
```

I'm here telling the browser to make the image `500 pixels high`, where in the HTML file the background-file itself is placed 
```
<div style="background-image: url('images/visual1.jpg')"></div>
```
although I could have done that in the css file itself as well, but in that case it would have been much harder to "manipulate the DOM", which I will explain in part 3. In any case, the css line `background-size: cover;` is responsible to correctly "scale" the visual / slide image to the available browser-width.

In the News section `<section id="news">` I am again "floating" in this case 3 "columns" of data next to each other instead of the default "above" each other. This is achieved again in the css via `section#news div#news_holder { overflow: auto; }`, but this time, I'm using 3 times `{ float: left; }`, thereby "stacking" the floats from left to right in the order they appear in the HTML document, and therefore I need to force the width of each column via 
```
section#news div.col { float: left; width: calc((100% / 3) - 20px); padding-right: 20px; }
```
The `calc()` part is a neat CSS trick, where we can add a little bit of calculation functionality to an otherwise "static" CSS language.

Another interesting thing to add to this, is the line 
```
section#news a.readmore { display: inline-block; text-transform: uppercase; font-weight: 600; font-size: 14px; text-decoration: none; color: rgb(255, 255, 255); background-color: rgb(37, 37, 37); padding: 8px 15px; border-radius: 6px; border: 2px solid rgb(255, 255, 255); transition: 0.3s background-color; }
```

The 'readmore' links may appear as buttons, but in fact they're just another `<a href="">` hyperlink, dressed-up as if they were a button element!

The last line in the css file is also noteworthy, and I'll cover much more of code like that in future parts of this Wordpress Theme Development series: what you see here is a so-called `@media query`, and using it you can make your webpages / Themes behave "mobile friendly" of "fluid" or "responsive": regardless the browser-width (smartphones have less pixels available in portrait mode than a wide-screen 27" monitor for example), the content "scales" to match the size of the display any user uses at that moment.

Solutions like "Twitter Bootstrap" are pre-fab solutions to do the same thing, but I'll cover "responsive design" using "manually set break points" via "@media queries". In this case, it's a "Desktop-first" approach (the other one couild have been "mobile-first") where I'm telling the browser, that in case the browser-width is / becomes smaller than 980 pixels, then `div.wrapper` should - instead of the normal case 
```
div.wrapper { width: 960px; margin: 0 auto; }
``` 
... be only 90% of the container's width, therewith making the website (somewhat) "mobile-friendly" (the `div.wrapper` element now scales to 90% below 980px).

### Concluding
This time we covered a lot regarding Theme Development! In part 3 we will add some jQuery to the "slider" parts (using 3 visuals morphing into one another), in part 4 we will convert some parts of the HTML code to PHP where we can actually use it as a valid - full-fledged - Wordpress Theme, and in part 5 we will use a nice Wordpress Plugin called "Types" to make the "News" section / content dynamic instead of hardcoded, and the same will happen to the "jQuery slider" I just talked about.

Thank you for reading, have fun developing Wordpress Themes, and stay tuned for the following Wordpress Theme Development parts!
@scipio

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@scipio/how-to-do-wordpress-theme-development-part-2-the-scipio-files-9">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 25 others
properties (23)
authorscipio
permlinkhow-to-do-wordpress-theme-development-part-2-the-scipio-files-9
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"score":106.877594,"default_branch":"master","watchers":10298,"open_issues":3,"forks":5954,"license":{"url":null,"spdx_id":null,"name":"Other","key":"other"},"open_issues_count":3,"archived":false,"mirror_url":null,"forks_count":5954,"has_pages":false,"has_wiki":false,"has_downloads":true,"has_projects":true,"has_issues":false,"language":"PHP","watchers_count":10298,"stargazers_count":10298,"size":180064,"homepage":"https://wordpress.org/","svn_url":"https://github.com/WordPress/WordPress","clone_url":"https://github.com/WordPress/WordPress.git","ssh_url":"git@github.com:WordPress/WordPress.git","git_url":"git://github.com/WordPress/WordPress.git","pushed_at":"2017-12-28T11:35:02Z","updated_at":"2017-12-29T12:22:04Z","created_at":"2011-12-01T07:05:17Z","deployments_url":"https://api.github.com/repos/WordPress/WordPress/deployments","releases_url":"https://api.github.com/repos/WordPress/WordPress/releases{/id}","labels_url":"https://api.github.com/repos/WordPress/WordPress/labels{/name}","notifications_url":"https://api.github.com/repos/WordPress/WordPress/notifications{?since,all,participating}","milestones_url":"https://api.github.com/repos/WordPress/WordPress/milestones{/number}","pulls_url":"https://api.github.com/repos/WordPress/WordPress/pulls{/number}","issues_url":"https://api.github.com/repos/WordPress/WordPress/issues{/number}","downloads_url":"https://api.github.com/repos/WordPress/WordPress/downloads","archive_url":"https://api.github.com/repos/WordPress/WordPress/{archive_format}{/ref}","merges_url":"https://api.github.com/repos/WordPress/WordPress/merges","compare_url":"https://api.github.com/repos/WordPress/WordPress/compare/{base}...{head}","contents_url":"https://api.github.com/repos/WordPress/WordPress/contents/{+path}","issue_comment_url":"https://api.github.com/repos/WordPress/WordPress/issues/comments{/number}","comments_url":"https://api.github.com/repos/WordPress/WordPress/comments{/number}","git_commits_url":"https://api.github.com/repos/WordPress/WordPress/git/commits{/sha}","commits_url":"https://api.github.com/repos/WordPress/WordPress/commits{/sha}","subscription_url":"https://api.github.com/repos/WordPress/WordPress/subscription","subscribers_url":"https://api.github.com/repos/WordPress/WordPress/subscribers","contributors_url":"https://api.github.com/repos/WordPress/WordPress/contributors","stargazers_url":"https://api.github.com/repos/WordPress/WordPress/stargazers","languages_url":"https://api.github.com/repos/WordPress/WordPress/languages","statuses_url":"https://api.github.com/repos/WordPress/WordPress/statuses/{sha}","trees_url":"https://api.github.com/repos/WordPress/WordPress/git/trees{/sha}","git_refs_url":"https://api.github.com/repos/WordPress/WordPress/git/refs{/sha}","git_tags_url":"https://api.github.com/repos/WordPress/WordPress/git/tags{/sha}","blobs_url":"https://api.github.com/repos/WordPress/WordPress/git/blobs{/sha}","tags_url":"https://api.github.com/repos/WordPress/WordPress/tags","branches_url":"https://api.github.com/repos/WordPress/WordPress/branches{/branch}","assignees_url":"https://api.github.com/repos/WordPress/WordPress/assignees{/user}","events_url":"https://api.github.com/repos/WordPress/WordPress/events","issue_events_url":"https://api.github.com/repos/WordPress/WordPress/issues/events{/number}","hooks_url":"https://api.github.com/repos/WordPress/WordPress/hooks","teams_url":"https://api.github.com/repos/WordPress/WordPress/teams","collaborators_url":"https://api.github.com/repos/WordPress/WordPress/collaborators{/collaborator}","keys_url":"https://api.github.com/repos/WordPress/WordPress/keys{/key_id}","forks_url":"https://api.github.com/repos/WordPress/WordPress/forks","url":"https://api.github.com/repos/WordPress/WordPress","fork":false,"description":"WordPress, Git-ified. Synced via SVN every 15 minutes, including branches and tags! This repository is just a mirror of the WordPress subversion repository. Please do not send pull requests. Submit patches to https://core.trac.wordpress.org/ instead.","html_url":"https://github.com/WordPress/WordPress","private":false,"owner":{"site_admin":false,"type":"Organization","received_events_url":"https://api.github.com/users/WordPress/received_events","events_url":"https://api.github.com/users/WordPress/events{/privacy}","repos_url":"https://api.github.com/users/WordPress/repos","organizations_url":"https://api.github.com/users/WordPress/orgs","subscriptions_url":"https://api.github.com/users/WordPress/subscriptions","starred_url":"https://api.github.com/users/WordPress/starred{/owner}{/repo}","gists_url":"https://api.github.com/users/WordPress/gists{/gist_id}","following_url":"https://api.github.com/users/WordPress/following{/other_user}","followers_url":"https://api.github.com/users/WordPress/followers","html_url":"https://github.com/WordPress","url":"https://api.github.com/users/WordPress","gravatar_id":"","avatar_url":"https://avatars0.githubusercontent.com/u/276006?v=4","id":276006,"login":"WordPress"},"full_name":"WordPress/WordPress","name":"WordPress","id":2889328},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io","open-source","programming","wordpress","tutorial"],"users":["scipio","utopian-io","media"],"links":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1514561637/jyxxofxsstchplsxjbpm.png","https://steemit.com/utopian-io/@scipio/the-scipio-files-1-how-to-do-wordpress-theme-development-part-1","https://res.cloudinary.com/hpiynhbhq/image/upload/v1514563303/phvmbobuesdgjpnfidis.png","https://static.pexels.com/photos/574077/pexels-photo-574077.jpeg"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1514561637/jyxxofxsstchplsxjbpm.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1514563303/phvmbobuesdgjpnfidis.png"]}"
created2017-12-29 15:48:36
last_update2017-12-29 16:23:18
depth0
children14
last_payout2018-01-05 15:48:36
cashout_time1969-12-31 23:59:59
total_payout_value43.305 HBD
curator_payout_value14.835 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length15,126
author_reputation34,157,471,478,668
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,894,968
net_rshares5,458,690,780,689
author_curate_reward""
vote details (89)
@aaawee ·
$0.28
Nice posting.. I have know how to make theme development.
Thanks for sharing @scipio
👍  ,
properties (23)
authoraaawee
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t162341077z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["scipio"],"app":"steemit/0.1"}
created2017-12-29 16:23:51
last_update2017-12-29 16:23:51
depth1
children0
last_payout2018-01-05 16:23:51
cashout_time1969-12-31 23:59:59
total_payout_value0.220 HBD
curator_payout_value0.055 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length84
author_reputation570,194,482,083
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,900,839
net_rshares20,811,898,598
author_curate_reward""
vote details (2)
@ersulba · 
i've been developing more the back-end of wordpress plugins for almost a year, but this topic has always attracted and scare me and i don't know why, thanks for the tutorial

BTW, i like the way you are explaining the CSS here, most poeple made their tutorials around Bootstrap and Foundation, and i found that a little frustrating .
properties (22)
authorersulba
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t164108500z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-29 16:41:09
last_update2017-12-29 16:41:09
depth1
children0
last_payout2018-01-05 16:41:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length333
author_reputation509,741,329,281
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,903,746
net_rshares0
@fabiyamada ·
$1.38
Being able to build my first wordpress theme really made a * *before and after* in my design career :D I think your tutorials will make a difference in many people!

You are a very good sensei!

Note: * In spanish we say *parteaguas*, is there an expresion for that in English?
👍  
properties (23)
authorfabiyamada
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t170023116z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-29 17:00:06
last_update2017-12-29 17:00:06
depth1
children2
last_payout2018-01-05 17:00:06
cashout_time1969-12-31 23:59:59
total_payout_value1.034 HBD
curator_payout_value0.344 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length277
author_reputation55,606,801,081,779
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,907,112
net_rshares103,987,410,000
author_curate_reward""
vote details (1)
@scipio ·
$1.55
That's really nice of you to say! I'm glad you find my tutorials so helpful, career-changing even! :-)

PS, ref _parteaguas_: it can't be literally translated but you mean it's a **turning point** in your career ;-)
👍  ,
properties (23)
authorscipio
permlinkre-fabiyamada-re-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171231t111902721z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-31 11:19:03
last_update2017-12-31 11:19:03
depth2
children1
last_payout2018-01-07 11:19:03
cashout_time1969-12-31 23:59:59
total_payout_value1.172 HBD
curator_payout_value0.375 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length215
author_reputation34,157,471,478,668
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id26,198,818
net_rshares123,434,941,491
author_curate_reward""
vote details (2)
@fabiyamada · 
Yeah! i am pretty sure at least one person career will change with this! A very nice turning point!
properties (22)
authorfabiyamada
permlinkre-scipio-re-fabiyamada-re-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171231t225914468z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-31 22:59:00
last_update2017-12-31 22:59:00
depth3
children0
last_payout2018-01-07 22:59:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length99
author_reputation55,606,801,081,779
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id26,285,342
net_rshares0
@howo · 
Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/UCvqCsx).
**[[utopian-moderator]](https://utopian.io/moderators)**
properties (22)
authorhowo
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t160549439z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-12-29 16:05:36
last_update2017-12-29 16:05:36
depth1
children0
last_payout2018-01-05 16:05:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation511,962,302,102,641
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,897,748
net_rshares0
@muhammadkamal · 
This is very educational writing. Through the writing, we found out about html. Finding a concept about WordPress.
thanks for sharing @scipio
👍  
properties (23)
authormuhammadkamal
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t161856305z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["scipio"],"app":"steemit/0.1"}
created2017-12-29 16:18:54
last_update2017-12-29 16:18:54
depth1
children0
last_payout2018-01-05 16:18:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length141
author_reputation348,805,281,883
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,899,992
net_rshares335,039,870
author_curate_reward""
vote details (1)
@nirob · 
Thanks for sharing wordpress programming  tutorial. Its very helpful to learn.
properties (22)
authornirob
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t155803521z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-29 15:58:24
last_update2017-12-29 15:58:24
depth1
children0
last_payout2018-01-05 15:58:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length78
author_reputation5,761,400,530,708
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,896,538
net_rshares0
@rannon · 
I've always wanted to learn all this blogging jargon,but everytime i try to,all i get is my brain shutting itself up. Yuck!
properties (22)
authorrannon
permlinkre-scipio-20171229t164648332z
categoryutopian-io
json_metadata{"tags":"utopian-io","app":"esteem/1.4.6","format":"markdown+html","community":"esteem"}
created2017-12-29 15:52:33
last_update2017-12-29 15:52:33
depth1
children0
last_payout2018-01-05 15:52:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length123
author_reputation60,594,262,554
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries
0.
accountesteemapp
weight500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,895,655
net_rshares0
@rimon24 · 
thanks for sharing tutorial about wordpress.
properties (22)
authorrimon24
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t163021914z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-29 16:30:24
last_update2017-12-29 16:30:24
depth1
children0
last_payout2018-01-05 16:30:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length44
author_reputation176,043,416,429
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,901,948
net_rshares0
@sajib7 · 
Great learning article. Wordpress is most popular on this day. Thanks for sharing.
properties (22)
authorsajib7
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t163618673z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-29 16:36:21
last_update2017-12-29 16:36:21
depth1
children0
last_payout2018-01-05 16:36:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length82
author_reputation4,272,505,969,958
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,902,960
net_rshares0
@soufianechakrouf · 
Helpful post dear friend thank for sharing
properties (22)
authorsoufianechakrouf
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171230t001921838z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2017-12-30 00:19:27
last_update2017-12-30 00:19:27
depth1
children0
last_payout2018-01-06 00:19:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length42
author_reputation79,565,245,195,650
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,962,495
net_rshares0
@utopian-1up · (edited)
$0.76
<div class="pull-left">

![1UP-200h.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514394462/jjad0am4qyaokzb3ffzo.png)




</div>

<div class="text-justify">

<br>

You've got a <code>1UP</code> from the @utopian-1up curation trail. __43 Utopians__ have upvoted your quality contribution to the open source community. 

<code>[Join](https://steemit.com/utopian-io/@flauwy/steemy-ep-46-how-to-create-and-follow-a-curation-trail-with-steemauto) 1UP for better posts and high curation rewards.</code>

_1UP is neither organized nor endorsed by Utopian.io!_

</div>
👍  ,
properties (23)
authorutopian-1up
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171229t223104861z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"busy","app":"busy/2.2.0"}
created2017-12-29 22:31:12
last_update2017-12-29 22:31:33
depth1
children0
last_payout2018-01-05 22:31:12
cashout_time1969-12-31 23:59:59
total_payout_value0.758 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length571
author_reputation2,324,758,056,093
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id25,951,482
net_rshares76,571,106,264
author_curate_reward""
vote details (2)
@utopian-io · 
### Hey @scipio I am @utopian-io. I have just upvoted you!
#### Achievements
- WOW WOW WOW People loved what you did here. GREAT JOB!
- You have less than 500 followers. Just gave you a gift to help you succeed!
- Seems like you contribute quite often. AMAZING!
#### Suggestions
- Contribute more often to get higher and higher rewards. I wish to see you often!
- Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!
#### Get Noticed!
- Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
properties (22)
authorutopian-io
permlinkre-scipio-how-to-do-wordpress-theme-development-part-2-the-scipio-files-9-20171230t161939162z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2017-12-30 16:19:39
last_update2017-12-30 16:19:39
depth1
children0
last_payout2018-01-06 16:19:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,561
author_reputation152,955,367,999,756
root_title"How to do Wordpress Theme Development, part 2 - The Scipio Files #9"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id26,071,846
net_rshares0
Help/Feedback