- Multiple loops
- Theme styling
- Get posts
Friday, February 10, 2012
Header.php broken down for Wordpress...
header.php broken down...Notice the important HTML and PHP commands here:
- <div id="page-wrap"> starts in your header.php file but will end in yourfooter.php file.
- <link rel="stylesheet..."> calls on your CSS stylesheet, javascript, and profile like a normal xhtml file would
- <div id="banner"> or <div id="header"> styles a webpage as you normally would.
- Unique Wordpress attributes include <body <?php body_class(); ?> >which allows Wordpress to identify and tag pages using an array attribute.
Index.php, Broken down into a Visual Guide
A visual layout of a Wordpress page. The code for this page may be in a file calledindex.php where the following code grabs content for the webpage:
<? php get_header(); ?>
<? php get_template_part(); ?>
<? php get_sidebar(); ?>
<? php get_footer(); ?>
Getting Started with Wordpress
For newer designers and users that want customization and dynamic websites Wordpress is the go-to resource for collaborative innovation.
However, if you're anything like me the preceding sentence didn't make much sense to you.
The answer is actually pretty simple: usability. With Wordpress, you can design a framework for a website and pass it onto a new user who can then upload their own content, tweak the details and customize it to suit their needs, all without having to dig into the different elements of coding and design.
In this series on Wordpress we'll be looking at the different opportunities that become accessible to novice users and the refreshing elements available to experienced designers and how Wordpress manages to unite both of these interests using themes and the powerful scripting commands of PHP.
Before we begin, you should be sure to familiarize yourself with Wordpress itself.
There are two websites available where you can get all of the answers that you need straight from the horse's mouth:
www.wordpress.org - The free resource where you can create an account, upload or download themes and create your own website.
and
www.wordpress.com - The official corporate website where you can also create an account and talk to wordpress developers who may answer your questions about building a website on wordpress, especially working with PHP.
There are also numerous independent resources offered by coders and developers delving into Wordpress everyday, looking to make their own mark in design.
Very shortly, I'll be posting some visual guides to getting started with Wordpress.
However, if you're anything like me the preceding sentence didn't make much sense to you.
- Customization?
- Dynamic?
The answer is actually pretty simple: usability. With Wordpress, you can design a framework for a website and pass it onto a new user who can then upload their own content, tweak the details and customize it to suit their needs, all without having to dig into the different elements of coding and design.
In this series on Wordpress we'll be looking at the different opportunities that become accessible to novice users and the refreshing elements available to experienced designers and how Wordpress manages to unite both of these interests using themes and the powerful scripting commands of PHP.
Before we begin, you should be sure to familiarize yourself with Wordpress itself.
There are two websites available where you can get all of the answers that you need straight from the horse's mouth:
www.wordpress.org - The free resource where you can create an account, upload or download themes and create your own website.
and
www.wordpress.com - The official corporate website where you can also create an account and talk to wordpress developers who may answer your questions about building a website on wordpress, especially working with PHP.
There are also numerous independent resources offered by coders and developers delving into Wordpress everyday, looking to make their own mark in design.
Very shortly, I'll be posting some visual guides to getting started with Wordpress.
Design Elements with Javascript
JQuery is the go-to library for designers utilizing JavaScript in their web pages, but you should also be careful not to over-use it and frankly, should avoid use of it when you can because many web browsers now come with features that can block JavaScript, like Firefox and Google Chrome.
For this reason, you should only use JavaScript in special cases and in a fashion where redundancy won't hurt the look or feel of your design. I used it to show brief overviews of a company's services, but also provided separate sections that were readable in browsers that accepted CSS/HTML standards.
Here is a sample of the small accordion I made using JavaScript and the JQuery library:
For this reason, you should only use JavaScript in special cases and in a fashion where redundancy won't hurt the look or feel of your design. I used it to show brief overviews of a company's services, but also provided separate sections that were readable in browsers that accepted CSS/HTML standards.
Here is a sample of the small accordion I made using JavaScript and the JQuery library:
 |
| A simple accordion stylized using the Jquery library. |
Latest Designs (VINGRAM Enterprises, LTD)
These are some screen captures from my latest project, a full web re-design for VINGRAM Enterprises LTD.
Design Elements:
Design Elements:
- Careful Attention to Space
- Readability
- Clean, Modern Look
- Conformity to Brand Standards
 |
| CSS3 and HTML, with a bit of class in between... |
Some Comments on Modern Scripting Languages...
What types of things can you do with CSS? More than you can possibly imagine!
Designers new to coding might assume that most elements in a webpage are created using graphic editing software, but the gurus over at 1st Web Designer or Onextrapixel will tell you that anything you can create in a design program like Fireworks or Illustrator, a great coder can recreate with the wonders of CSS3.
The best part about this is, new scripting languages are making it easier and easier for novice coders to make clean, readable and attractive websites.
For example, HTML5 simplifies commonly complicated design elements like tables using modifiers like <section> </section> and getting rid of unnecessary closing tags. CSS3 allows for greater customization of divs, the backbone of modern webpages.
When I first started designing websites in High School, most of the fun clean looking elements that are common in websites today were made using graphic editors. Want corners on that table? Better create a background image with corners! Oh, and don’t forget to manually design the size and shape of each table, copying the code directly into the <table> and <td> tags.
Now with CSS, you can simply create design standards for every table in your webpage, modifying one slice of code without combing through the entirety of your *.html file. HTML5 is now catching up with this shift in design and coding simplification.
It will be interesting to see what designers create without having to rely on a separate code guy or gal in-between.
-Doni
Subscribe to:
Posts (Atom)