1. While you are free to lurk, we welcome you to register for a (free) account so that you will be able to participate in forum discussions.

Make your own site/theme (basic and simple instructions)

Discussion in 'Web Design' started by ducklord, Dec 10, 2014.

  1. ducklord Member


    Heh, I design and code my own sites - themes. I don't like the restrictions of pre-made stuff. And you could too, if I let you in on a little secret: you DON'T need to "learn a language". By calling HTML and CSS "languages" we're doing a disservice to true languages.

    Think about it for a moment: how many words does a true language have? Hundreds. Thousands. And you have to learn transmutations of them, rules, combinations...

    Now, do you know how many "words" you have to know in the HTML "language" to make your first steps in web design?


    Don't believe me? Here it is:


    And you have to understand that you use it this way:

    With "<DIV>" you "start a section" of your site. With "</DIV>" (notice the slash) you end it. Simple? Let's put this sites name in its own section.

    <div>Web Directory Forum</div>

    That was it. Hard, eh? Gosh... You just learned the basic part of a language. That was it. Done. :)

    Now, let's add some proper HTML knowledge on top of that: in HTML you've got some "words" like "div" that differentiate your "site's sections" according to their role.

    Is it a HEADING? Replace "div" in our example with "h1". Is it a smaller heading? "H2". Smaller? "H3". Up to 5.

    Is it a PARAGRAPH? Replace "div" with "p". P for Paragraph. Like V for Vendetta :p

    There are other "words" as well, but those are fine for a start.

    Now, let's create our first theme. You'll have to copy (yes, copy) the "HTML definition" for your webpage, since you don't have to know that, for now, to create your own site. It's 'the bit that tells the browser that it reads an HTML document" and you'll usually find it at the top of an existing theme's Header.php. Just read it, it's the "HTML 5 or whatever blah-blah". Paste it on top of your own doc, in a blank doc. In NotePad.exe (Uber Advanced Web Editor For Winerz. Thanks Microsoft!).

    After that, add, for example:

    <H1>I'm the best!</H1>
    <div>This will show as a blockquote!</div>
    <p>Aaaand here's my main text. I'll add paragraphs upon paragraphs of text here! Really!</p>

    ...save it as "MySite.html" and load it in your browser. Nice? Nope. Needs some CSS.

    With CSS you "style" your theme. And, as with HTML, you'll just have to learn some words. Or, rather, to learn how to properly use some words YOU ALREADY KNOW and, as you'll see, are used in a purely logical way. "They do what you think they'd do". It may surprise you how easy it is. But first, another explanation.

    Let's say you have 25 paragraphs of text in a page. And you want to style the 18th differently - say, to have a red background and white letters. You'd have to "target" it through CSS by saying "Hey, I want the 18th paragraph to be red with white letters". Done. But what would happen if you wrote two more paragraphs before it? Then it would "move down", and a different paragraph would be highlighted. That would be a problem, wouldn't it? That's why we have Classes and IDs.

    Classes and IDs do the same thing: they give "names" to a sites elements, so as to be easy to style them through CSS. We have two for one basic reason: IDs are used on elements that are found ONCE in your page. Classes are used for elements that are found MANY TIMES in your page.

    Your sites logo exists how many times, exactly? One. ID.

    Your sites social button for twitter? One time. ID.

    Your site has how many paragraphs? Many. Class for the paragraphs, it is.

    Yes, but the twitter social icon is also "a social icon". Ah, good catch. You can ALSO add a Class to it.

    So, let's revisit our "code"...

    <div id="sitelogo">Image_Here</div>
    <H1>I'm the best!</H1>
    <div class="blockquote">This will show as a blockquote!</div>
    <p>Aaaand here's my main text. I'll add paragraphs upon paragraphs of text here! Really!</p>
    <p class="mommy">See, ma, I've written another paragraph! Well, it's actually two sentences, but...</p>
    <p>You know...</p>

    What we did here was:

    Added a div with the id "sitelogo", containing a placeholder for our sites logo.
    Added the class "blockquote" to our blockquote - to be able to style it.
    Added the class "mommy" for the same reason.

    We've used classes and not ids for the blockquote and "mommy paragraph" 'cause we may re-use the same style later in the post - by having more blockquotes or "mommy paragraphs". Why style them individually when we can style them all in one swoop?

    And now the styling.

    This is "CSS magic code", boys and girls. Tell me if you understand what it "says".

    #sitelogo {
    width: 200px;
    height: 100px;
    top: 0px;
    left: 0px;

    h1 {
    width: 100%;
    height: 30px;
    font-size: 20px;
    line-height: 25px;
    color: red;
    background: black;

    ...etc. Hard, wasn't it? :p

    "But...But... That's not a site!"

    Yes, but it CAN BE! The reason "that's not a site" is because we just created and "styled" four-five elements of a site. A site is comprised of hundreds of such "elements", and you have to style them all. "It just needs more work".

    What you can do to create your first site, exactly the way I did it, is keep adding stuff to the above. Create a full page "that looks like a site" to you. Add an image for a logo. Read how "floats' work (that's the hardest part to grasp at first, it will take you two-three hours of experimenting), but the rest is pure english language ("margin", "padding", "background-color"... yeah, that's "code" :-D ).

    And here's the AWESOME part.

    After all this, you'll have a static page. A simple page with specific content and text that you entered. DELETE IT. NOT "the code", but "the content". DELETE IT and REPLACE IT with shortcodes you'll copy from the WordPress Codex. Have you tried paying a visit there and especially at its "cheatsheet" page? Here's the thing: a WordPress theme you design is mainly comprised of those things:

    a "Loop". It's a piece of code you'll copy and paste exactly as it is, EXACTLY BEFORE the point where you want to start your posts showing.

    I'm sure you'll have created a site structure where at some point you have a <div class="post">. Put "the loop" EXACTLY BEFORE that. Did it? Good.

    Now, go to the WordPress Cheatsheet and copy and paste its codes to the appropriate "spots" in your theme. Let me explain again.

    In WordPress ThemeSpeak, there's a code like "<?php the_title; ?> " for every element of a site. This specific code "pulls" and "shows" the title of a post. Paste it where you want your posts title to show. Then, try pasting "<?php the_excerpt; ?> " where you want its "intro", its, as the code itself says, "excerpt" to show.

    Keep copying the codes you like to the spots you like. There are codes like "the_time" (guess what it does!) and stuff like that.

    And, you know what? Theme done, before you've even realized it! You'll have to add more stuff, ofcourse, style more elements through CSS, maybe clean-up your HTML a bit, but that's what "learning" is all about. The point is that, after this post here, you now know the basics of web development. You CAN build a basic web page and I guess you understand how to make the next step.

    Did I help? :)

    toradrake, jblogger and Converse like this.
  2. SimplySidy Member


    if et all doing the websites of today was as simple ;)

    Nevertheless, it is a great tutorial for starters

  3. ducklord Member


    Hehe... Yep, I just wanted to make clear that it's not some kind of "obscene knowledge for a privileged cadre of alien hiveminds", or something, but something ANYONE can do if he decides to read and work a bit.

  4. Alunny Member


    I think since you're aiming this tutorial at a beginner you should assume they're beginners and show them the code, as well as showing them how to compare the same pages with their own code so that they have what they want where they want and know what is actually on that page normally. That's what always slowed me down as a beginner when starting from scratch - knowing what to put in/back and how it was put there in the first place. Good tutorial though.

    The one thing that I hate about building my own themes is when you want to not use divs in favour of <section> <aside> <header> <footer> <article> <content> etc and the software won't let you. I tried this in Drupal and it gave me hell. I also couldn't use it with some frameworks (skeleton), even though they had the same classes.

    I reckon that's a real pain in the butt and to be honest it's one of those little things that makes me procrastinate before trying to make my own style. I think I am going to try using Wordpress' Foundation Framework theme to make a new design...hopefully that turns out well!

  5. ducklord Member


    @Alunny Great idea, it would work great as a "step two" after this one - fully building a site with HTML and CSS, later followed by a part 3 where we add PHP and turn it into a theme. Hmmm... :)

    As for the how-do-you-call-them <sections> and stuff, yeah, they look strange and I've never used them, but WP is supposed to not have any problem if you use those instead of DIVs - since you can "style" them the same way with CSS. Or that's what I think from what I've read up to now about them.

  6. toradrake Member


    What?! Are you serious? You mean the voices in my head are not from the hive? LOL

    Excellent idea, coding can be very intimidating to a newbie. showing them the tags and such may help to ease their minds a bit.

    jblogger likes this.
  7. ducklord Member


    Okays, okays, I'll do a second part whenever I find some more time! Geesh, you people! :-D

    Why don't we also make it a "live project"? Does anyone have any space to spare on his host, to keep the files there "live" for whomever would like to see the project as it would be built from the ground up?

  8. toradrake Member


    No, but I know where you can put it for free. Here is a list of free places you can set this up at. They all have design tools, but some of them (can't remember which ones) allow you to code or ftp.

    Biz.nf (PHP, MySQL, WordPress, Joomla, Free .co.nf domain, No ads)
    Free Hosting EU (Blog / Site builder, No ads, Free .eu.pn domain)
    Wix.com (Easy Website builder: html5, Flash, mobile, blogs, etc.)
    AwardSpace.net (PHP, MySQL, Email Sending, No Ads, Free subdomain)
    Biz.ly (Website & Blog builder, Photo album, Free .biz.ly domain)
    ByetHost.com (PHP, MySQL, PHPbb, SMF, Wiki, Free subdomain)
    Host-ed.net (PHP, MySQL, 1-click Scripts, No Ads, Free subdomain)
    x10Hosting.com (Support cPanel, PHP, FTP, No ads, Free subdomain)
    Yola.com (Visual website builder, add videos, photos, shopping cart)
    Webs.com (Easy site builder, blog, forms, polls, Free subdomain) (this is the one I used in the past and liked)

    Could serve your purpose without having to spend any dough on it.

  9. SimplySidy Member


    Though I am not a Drupal Guy, but I think the version of Drupal in question was not HTML5 Savvy. As such I would try using the HTML5Shim from Google (or even the Farackas - I know this is wrong spelling, but I dont remember the correct one at this moment - New Year Bash Hangover, I guess :D) and this inclusion should fix the issue.

    Okay, I am open to this - as my website is about website consulting. In case you need, I can also alter the robots.txt file to prevent bots from crawling this tutorial

  10. ducklord Member


    @SimplySidy Okays... Can you create a "demo WordPres installation" over there, under some test address, so as to start building a "live" theme and documenting the procedure as we go? It could also work in combination with "the other stuff we've talked about" ;-)

  11. SimplySidy Member


    Sure, I confirm this. I have initiated the process. As I dont have a paid hosting account (I got my hosting free because of a deal between me and them), I could not get another Database or another Wordpress installed. I have received a confirmation from them (my host) a few minutes back that this would be made available to me sometime during this weekend. So I hope by Monday we would have a sub domain with Wordpress access available. Once I have the access, I will PM you the access details for the dashboard.

    I have also asked access to the Robots.TXT file such that I can block the Search Engines from accessing and indexing our testing sub-domain.

    Hope that would be fine to start with.

    Oh yes, there are a few restrictions they have - no curl (and GD) or similar features on PHP are available.

  12. simplecan New Member


    I read your post and thought, "Oh why bother I will never be able to make something as nice looking as those pre-fixed Wordpress themes...!"
    But then I realized that this was probably the attitude I could also have had before learning to knit or to cook. Just that with coding pages, I just gave up too early. Tried learning it a few times through CodeAcademy.com. It teaches not as fast as your post, but seeing the interactive screen give you a view of your page as you write is pretty neat!

    The cheat codes for themes are interesting, I had no idea such a thing existed. But if someone has no idea at all about coding, how is trying to do it from scratch more beneficial than choosing a free theme and then tweeking the CSS on Wordpress?

  13. ducklord Member


    @simplecan Funny thing is... they're not actually "cheat codes"! We just treat them as such until we feel more proficient with both HTML and PHP. Think of it this way: a structure of a typical WordPress theme (or at least "its core files") is like HTML+PHP+HTML+PHP+... blah-blah-blah. PHP is a full-blown programming language, and as such it's harder to learn than HTML - which is actually a scripting language like I've explained. With HTML you just "mark things up" so that the browser "knows how to display them". You use codes that "tell" the browser "this is a paragraph", "this is a title", "this should be displayed as an image". But it's simple to "get".

    So, if you learn the basics in HTML - something done in just hours - you already know how to build a "static" site. What would be needed to build a "dynamic" one, based on WordPress, where its contents would constantly update and change? You already know how to set up your pages, to mark correctly your titles, paragraphs, whatever. What you don't know is how to make them auto-change, but, fortunately, in WordPress that's done with simple php "shortcodes" (I don't know if the term is correct).

    So, if you knew BOTH HTML and PHP, you'd create a site by starting with your HTML, adding some PHP, continuing with your HTML, just as I mentioned before. If you're a noob (like I still am), you do it the simple way: you write the HTML (which you "got" easily) and you copy bits and pieces of ready-made PHP code. Like I did. But while you do it, you notice that this "code" is actually no more than 1, 2 or 3 lines at a time, and as such also easy to "get" - when put in the context of your existing HTML code.

    It's a bit hard to explain, so I'll try to also put it like this: it's one thing writing "<h3><?php the_title( $before, $after, $echo ); ?> </h3>" from the top of your head, it's a different one copying a shortcode from the WordPress Codex and pasting it in your "<h3>PASTE_TITLE_SHORTCODE_HERE</h3>" HTML :-D

    And by doing it once, twice, thrice, "you're already a programmer" and you didn't even realize it. 'cause THAT's "advanced web codez" :p

    simplecan likes this.
  14. SimplySidy Member


    You said it yourself dear. The catch is - "if someone has no idea at all about coding..."

    If someone has no idea, s/he will never realize how difficult it can get trying to understand the 1000s of lines of codes (CSS or PHP or whatever) on the theme. The tweaks will be on the CSS only so maybe you can get some different look and feel, but you will never be able to add new functionality to the theme.

    The biggest pain Coders can face is - when they are asked to change the codes written by someone else to suit the new requirements.

  15. ducklord Member


    @SimplySidy Eeeexactly. And that's cause it's one thing creating a solution "that does something" from scartch, it's another trying to FIX something that already exists, so that "it does something", while at the same time making sure it won't "STOP doing something" due to your "fixes"!

    In the first case, when writing something from scratch, you have to put some thought into it and then you just have to do it. In the second case, you are constrained by what the people before you did, and you have to work within set parameters, making it harder to "dodge bullets" - meaning the problems that could creep into each project due to you meddling with it.

    A three minute job of "changing the colors of the links" in one site can end up taking hours, 'cause the former developer had the swell idea to set the color individually for almost each and every type of link on a page, according to "where it's displayed" and, at the same time, set dynamically the color to especially two of them not with CSS but through JavaScript. And there you are, "changing the color of the links", seemingly a simple three minute job, still punishing you after 3:00 in the morning :-D

  16. xTinx New Member


    I'm not that adept at CSS and HTML yet but I do know it's basic structure and the site's I've designed thus far as as minimalist as possible. Here's a simple sample code structure I was able to learn just recently using external CSS (I don't use inline and internal as they're not very ideal), so anyone can use it to design their own theme:

    <!DOCTYPE html>
    <title>Title of Site You'd Like to Appear in the Browser</title>
    <meta name="description" content="What's the site all about?">

    <link rel="stylesheet" href="css/normalize.css">

    <!-- Custom CSS make your own stylesheet and link it with the site! -->
    <link rel="stylesheet" href="css/styles.css">

    <script src="js/modernizr.js"></script><!-- use this so your CSS will work in older browsers -->

    <div class="container">
    <div id="My Story" class="clearfix">
    <h1>Hey, it's a Fairy Tale!</h1>
    <p class="lead">Jump into my world and see what it's like.</p>

    <div id="story-snippet">
    <p>Mixtape plaid Brooklyn, bespoke pour-over Helvetica banh mi 3 wolf moon jean shorts. IPhone mumblecore heirloom, sriracha kitsch ennui migas Blue Bottle synth. Scenester Pinterest viral biodiesel mlkshk. Lumbersexual ennui chillwave Tumblr, Neutra McSweeney's artisan shabby chic. Small batch pop-up retro Kickstarter ugh viral selfies typewriter disrupt. Cray swag fashion axe, occupy flannel whatever Pitchfork chia skateboard distillery lomo tousled crucifix plaid semiotics. Jean shorts health goth listicle gastropub, distillery hashtag before they sold out salvia asymmetrical Brooklyn. <a href=" ">Read more about our story here</a>.</p>
    </div> <!-- end story-snippet; text from Hipster Ipsum -->

    <div id="beautiful-me">
    <h3>Look at How Beautiful I am!</h3>
    <p>Am I or am I not beautiful? Say it out loud!</p>

    </div> <!-- end beautiful-me -->
    </div> <!-- story-snippet -->

    <div id="about-me" class="clearfix">
    <div id="articles">
    <h2>What I like about me...</h2>
    <article class="news">
    <h3>The world as I see it</h3>
    <time datetime="2015-01-15>January 15, 2015"</time>

    <section class="snippet">
    <p>Roof party Godard kitsch health goth, meditation 3 wolf moon selfies polaroid deep v. Fingerstache whatever brunch distillery you probably haven't heard of them, listicle kale chips pop-up slow-carb mlkshk. Odd Future selfies High Life swag, PBR&B hashtag authentic Kickstarter 90's pour-over umami VHS ennui bespoke. <a href=" ">Read more &rarr;</a>.</p>

    Posted under <a href=" ">Growing Pains</a>

    <article class="party">
    <h3>Why My Life's a Party</h3>
    <time datetime="2015-02-14>February 14, 2015"</time>

    <section class="snippet">
    <p>Roof party Godard kitsch health goth, meditation 3 wolf moon selfies polaroid deep v. Fingerstache whatever brunch distillery you probably haven't heard of them, listicle kale chips pop-up slow-carb mlkshk. Odd Future selfies High Life swag, PBR&B hashtag authentic Kickstarter 90's pour-over umami VHS ennui bespoke. <a href=" ">Read more &rarr;</a>.</p>

    Posted under <a href=" ">Life's a Party!</a>
    </div> <!-- end articles -->

    <div id="feature-image">
    <img src="images/1234.png" alt="My rockin' beach bod I'm sure you're dying to have!">
    </div> <!-- end feature-image -->
    </div> <!-- end about-me -->

    </div> <!-- end container -->

    <footer class="main" class="clearfix">
    <div class="container" class="clearfix">
    <div id="copyright">

    <p>&copy; 2015 ________</p>
    <p>Don't get anything from this site without permission or you'll be dead.</p>
    </div> <!-- end copyright -->

    <div id="credits">

    <p>Coded with all my heart and soul <a href=" ">Whatchamacallit</a>. </p>

    </div> <!-- end credits -->

  17. ducklord Member


    Man, that's some AWESOME SEO you've got right there! I mean, not in the theme as a theme, but... er... its... eh...ergh... "content"..!

    Who wouldn't want to bookmark a "Lumbersexual ennui chillwave Tumblr"?!

    And I REALLY need to buy a "Cray swag fashion axe" :-D

    I mean, I'm crying right now from laughing that hard while reading your code. That's some crazy Lorem Ipsum you got there! :p

    Here's another idea for a site: essays on Lorem Ipsum's! We pick pieces of nonsensical Lorem Ipsum and try to make stories out of it, just like if we were criticizing proper literature.

    Nah, it probably wouldn't work. We'd need at least "3 wolf moon selfies" to pull it off :-D

  18. xTinx New Member


    Hipster Ipsum's got all the crazy artisanal filler text you need. Lorem Ipsum's too mainstream for my psychedelic instructor so he told us to, for a change, head over to the site if we want some funny filler text while designing a website.

  19. ducklord Member


    Hipster Ipsum, hah, nice find! I see you and I raise you, though, since no matter how much I like it, it doesn't hold a candle to what a friend showed me. I don't have a link and I'm bored to heck to find and provide one now, so just do a search for it: Samuel Jackson Ipsum..! And pay attention to NEVER show any serious client ANY preview of a site you're working on with "ipsum" like that - except if you do, indeed, call each other a... er... "mofo"... You know... :-D

  20. thzfsdhdty Member


    Website: bannhagovap.vn
    Hotline: 0937133389 - 0989 441 737 ( anh Mạnh Hùng)
    Thời gian làm việc 24/7.- TẬN TÂM - UY TÍN - NHIỆT TÌNH


Share This Page