[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 577
  • Last Modified:

WordPress Divs

Beginning WordPress and customization???
0
rhyno99
Asked:
rhyno99
  • 10
  • 9
1 Solution
 
OmniUnlimitedCommented:
Hi Rhyno!

You know, I use Outlook to receive my email messages, and Outlook always puts the most recent emails up at top.  My natural tendency is to look at the emails starting with the first one.  Since you posted this after you made your comment in the previous question, I clicked on this and read, "Beginning WordPress and customization???", and thought to myself, "What?".

HA! Anyway, I'm certain all the rest of the experts are thinking the same thing.  Now getting back to your previous question as to "How do I build an area?":

The default template (page.php) that I asked you to select for your home page contains four basic areas: the header (called in page.php by the PHP function get_header() which in turn dumps the contents of header.php to the screen), the content (recalled out of the database by the WordPress loop and reflects the content of the page you just set up), the sidebar (called by get_sidebar() which dumps sidebar.php to the screen), and the footer (called by get_footer() which dumps footer.php to the screen).

If you look at your website, observescience.org, you can visually divide the screen into these same components.  The header would consist of the logo, the social media links and the menu.  The content would be the area where "Welcome to Observe Science!" appears.  The sidebar would be your ad, and your footer would contain the ad and site links.

First off, it should not be necessary to make any changes to the default template at any time.  If you want to make some changes, copy the default template and name it something else and there make your changes.  All page templates must have the following comments appear at the beginning of the file:
 
<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
/*
Template Name: (name of template)
*/

Open in new window


You can change Default_Theme to the name of your current theme (no spaces), and substitute the name of your new template for "(name of template)".

When you look at the files I gave you, you will notice that on all files that generate output to the screen you will see PHP code (surrounded by the PHP delimiters <?php and ?>) and HTML code.  This is something new to you and something you will need to get used to as essentially the file is running two different types of code at the same time.  You need to ensure (and as I am sure you will find that you make this mistake from time to time) that all PHP code is enclosed within its delimiters and that the HTML is not.

Also, you need to know that there is a lot going on to set up your site before any HTML is displayed.  HTML is not appropriate for any files outside of those files that specifically output to the screen.  Fortunately, all the PHP files I gave you for the default theme are meant for output to the screen.

Now, having said all this, let's get into the creation of your theme.

As I mentioned earlier, WordPress is really good about breaking your web page down into individual components, each of which you can customize and reprogram.  You can have as many, or as few components as you wish, just remember that the final output must be in legitimate HTML.  If you have not done so already, before you make any changes to the theme files I gave you, I would make a copy of them for your use again in the future.

Now let's get in and analyze one of the component files.  Let's begin with the header.  The code for the header is located in the header.php file.  The header.php file begins with PHP comments identifying the file:
 
<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>

Open in new window


Note the enclosure of the comments by <?php and ?>.  Next follows HTML interspersed with PHP that make up the <head></head> section of your document:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php 	wp_enqueue_script( 'jquery' );
		wp_enqueue_script( 'default-ajax-request', get_cur_theme_uri() . '/default.js', array( 'jquery' ) );
		wp_localize_script( 'default-ajax-request', 'DefaultAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ))); 
		if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
		wp_head(); 
?>
</head>

Open in new window


Where you can see the HTML code interrupted by PHP as in the following example:

href="<?php bloginfo('stylesheet_url'); ?>"

is where PHP is actually accessing memory or the database and obtaining the information to fill in the missing information between the quotes.

There is a block of PHP code near the bottom of this section:
 
<?php 	wp_enqueue_script( 'jquery' );
		wp_enqueue_script( 'default-ajax-request', get_cur_theme_uri() . '/default.js', array( 'jquery' ) );
		wp_localize_script( 'default-ajax-request', 'DefaultAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ))); 
		if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
		wp_head(); 
?>

Open in new window


I will break this down individually so you understand what all of this is doing.

The function wp_enqueue_script() is WordPress' way to safely incorporate javascript into your site.  The first function wp_enqueue_script( 'jquery' ) incorporated jQuery into the site.  Next comes wp_enqueue_script( 'default-ajax-request', get_cur_theme_uri() . '/default.js', array( 'jquery' ) ); which sets up a custom javascript file (in this case default.js) for access and for use with AJAX technologies (I tell you there is no limit to what you can do with WordPress).

The wp_localize_script() function directs our AJAX calls to the ajax-admin.php file, which is really neat because it saves us the bother of setting up individual customized AJAX response pages, and breaks it down to the use of a simple function call.

The if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); activates an advanced 'comment-reply' script if the page you are looking at is a single blog post.

Finally the wp_head(); function is a function that plugins can tie into to add more links and scripts to the <head></head> section.

Are you starting to see possibilities with PHP?  Can you begin to grasp how limitless you can take your programming to?

OK, getting back to your original question, "How do I build an area?":

All components already have divs assigned to them.  The header has <div id="header">.  The content has <div id="content">, the sidebar <div id="sidebar">, and the footer <div id="header">.

You could pretty much copy and paste all the HTML from between the <body></body> tags of your old site to the new one.  Set the header HTML between the <div id="header"></div> tags (don't worry about the menu code for now) and the footer HTML between the <div id="footer"></div> tags.  You can basically erase all the code between the <div id="sidebar"></div> tags as that deals with dynamic sidebars and widgets which are not important for your first project, and replace that code with the code for your ad banner.  Now take the rest of the HTML from your home page and place it in the HTML page editor for the home page of your new site.

You can style all the elements by placing CSS in the style.css file.  Once you have done all that, then we can talk about setting your menu.
0
 
OmniUnlimitedCommented:
I just added this line to Part II of my recent article:

There is a custom function in the functions.php file which you will need to update as well.  On line 33 is the function get_cur_theme_uri().  You will need to update the first line where it says, $cur_theme_dir = "/default"; by changing "default" to the name of the folder for your theme.
0
 
rhyno99Author Commented:
Omni,
Wow! Thank you so much for your help. I just read through your response and can't wait to get started. I'm totally excited to work through what you wrote more carefully though it will need to be tomorrow. I guess you noticed that I left the question a bit hazy. I thought it might make others move on and not answer. I'd feel bad if someone is trying to help but it is not needed or not quite what we're talking about. :)
 
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
rhyno99Author Commented:
Many, many thanks
0
 
OmniUnlimitedCommented:
HA!  No problem, I kinda gathered that was your intent when even I didn't understand your meaning.

I share in your enthusiasm, WordPress can be very exciting.  I'm glad that you chose to walk this path.  This is the path that will give you some of the greatest results.

Remember, you are still getting into a very complicated, very technical, area.  So don't feel bad if things don't work out as you thought.  We just need to tackle one issue at a time, and things will begin to flow pretty readily after you get a good foundation of knowledge.

Thanks again for the points!
0
 
rhyno99Author Commented:
Hey Omni,
I have been playing with the files. I have been very careful to not disrupt links and only change areas which you specified. It seems that the CSS is not linking though. I'm using Dreamweaver, and I think that I have the testing server configured, but it doesn't seem right.
The "page" always shows "read the rest of the page... and ends with the 'number"));?> Is there something that I am doing? I didn't move or rename any of the files. I just pasted new code for the CSS and only worked in the specified header area.

Is my testing server not right?
Thanks for your help.
0
 
OmniUnlimitedCommented:
Hi Rhyno,

Can you upload the page.php, header.php, sidebar.php, and footer.php files for me?  Also, can you take a screenshot of the page editor for the home page from your WordPress Dashboard?
0
 
rhyno99Author Commented:
Hi Omni,
I'm sorry. I have been trying to figure this out but it sounds like I am way off. On my original message I was working with the default files in dreamweaver only (without wordpress). I am used to just working with the files and forgot that this is supposed to work with WP (duh). Today, I have been working with wordpress, but can't seem to find how to use the default files with it. I guess my problem is that I don't understand how the files are supposed to work with WP. How do they work together?

BTW- Thanks again for your help. Sorry I have been a bit slower in responding lately. Life has been getting busier as my wife is appoaching her 6th month of preganancy. She and my 2 year old daughter are needing a bit more help and attention lately.  
Thanks,
rhyno
0
 
OmniUnlimitedCommented:
Hi Rhyno!

Hey, CONGRATULATIONS!!!  You and your wife must be very excited to be expecting your second little one.  Do you know if it's going to be a boy or a girl?

Listen, I totally understand.  You must be having a ton of distractions.  This is probably a bad time for you to try and start learning something new.  Not only that, I've given you a ton of material to go over.

I am totally able to wait until after the baby is born to continue to help you, if you desire.  But if you feel you want to give a go at it then I can see if I can help you learn to properly set up the files in WordPress.

Integrating the files I gave you into WordPress is covered in Part II of my Getting Started In WordPress series.  Pay close attention to the section entitled "Setting Up Your Theme".  Once you have done all this, instructions as to how to integrate the files into WordPress is covered in the section entitled, "WordPress Directory Structure".

In the second paragraph of that section, I explain how to prepare the default theme files by placing them (if they are not already) in a folder and naming that folder the name of your theme.  Instructions as to which subfolder to upload them, and how to activate them, are included in the rest of that section.

If these instructions are not sufficiently clear for you, let me know and I will try to explain them better.

Wishing you the best!
0
 
rhyno99Author Commented:
Thanks Omni,
This is fun for me so I want to keep going whenever I can. I just can't always do this as much as I want sometimes. We are having a boy. :) Thanks for your help, I will review that section and reread those docs.
I wish you the best as well!
0
 
rhyno99Author Commented:
Hey Omni,
I updated the info on each page and would like to upload the folder. I also updated line #33.  I am looking in wordpress and cannot find the wp-content folder to upload into the sub-folder. Where do I upload the default folder that I renamed and began to tweek (only as instructed)? I am looking at the instructions that I copy/pasted below.

WordPress Directory Structure

The root of your WordPress site contains fundamental core scripts used in the operation of WordPress as well as three main folders: wp-admin, wp-content, and wp-includes.  You should always try to limit your customizations to the wp-content folder because the other core files will get replaced (with a few notable exceptions) anytime you update WordPress.

The wp-content folder contains two main sub-folders: plugins and themes.  If the zip files are not already in a folder, you should place them in a folder and name the folder the name of your theme (avoid spaces in any of the folder and file names), then upload them to the themes sub-folder.

There is a custom function in the functions.php file which you will need to update as well.  On line 33 is the function get_cur_theme_uri().  You will need to update the first line where it says, $cur_theme_dir = "/default"; by changing "default" to the name of the folder for your theme.

Once they have been properly uploaded to the themes sub-folder, you will be able to see it by clicking on the Appearance main link in the WordPress administrative backend.  The new theme won’t be active, so you will want to click the “Activate” link next to the theme.  You can then access your site url and see how your website looks with your new theme.

If you activate this default theme, you won’t see much.  This default theme is meant to simply give you a skeleton, a “drawing board” per say, for you to show your creativity in design.

From here, you will need to set up your pages and posts, and modify your theme files as needed and upload them to the server.  You can repeat this process as often as you like, "tweeking" and refining your site until you have exactly the look and operation you desire.
0
 
OmniUnlimitedCommented:
Hi Rhyno!

Wow, a little baby boy!  Someone you can teach baseball to and who one day will probably be better than you at the computer.  Have you thought of a name? (you don't have to post it if you don't want to).  You and your wife must be very excited.

Well, I'm glad this is enjoyable to you because starting out it will seem more like chess than checkers.  It sounds like you have followed my instructions to the "T", but it concerns me that you are not able to find the wp-content folder.  You never answered my question, "Just where did you install WordPress?".
0
 
rhyno99Author Commented:
Hey Omni,
Yeah its pretty exciting. I've heard that life is much different with two kids vs. one. Wish me luck. I put WordPress on a site called ObserveMath.org. I figured I could use that as a sandbox before I replace anything that I care about. I just figured I would put everything on live. Hope this is what you were thinking.
Thanks,
rhyno
0
 
OmniUnlimitedCommented:
Hi Rhyno!

You've got it.  I wish you luck!  But, to give advice from one that has run through five kids, family planning is very important.  It is in your best interest if you and your wife are going to have more kids that you put a couple years or three between them.  That way, your oldest kid can begin to help with the younger ones, and it will really begin to ease the burden on you and your wife.

I just looked at the url you gave me, and it appears that WordPress is loaded correctly.  You should find the three folders I described in the WordPress Directory Structure under the root directory of that site.

If you still have problems locating the wp-content folder, please let me know.

Best Regards,

Omni
0
 
rhyno99Author Commented:
Omni- Wow FIVE!
I should be saying congratulations to you. :)

I know it sounds silly, but I don't see a folder or directory structure anywhere on WordPress. I tried the URL observemath.org/wp-content/ and it just shows a completely blank page. Where do I find the three folders that you are talking about?
Thanks for your understanding,
rhyno
0
 
OmniUnlimitedCommented:
Hi Rhyno!

Yeah, good experience.  You learn a lot.

My check of observemath.org indicates that you are hosting this site with HostGator.  Does this sound familiar?  We need to set up some sort of file organizer with the HostGator server in order for you to see these folders.  Did you ever end up getting Dreamweaver?
0
 
rhyno99Author Commented:
Yes, I use HostGator. I have had Dreamweaver since I started this adventure. It has been helpful in editing the code of the files that you sent. What should I do with Hostgator to be able to see these files?
0
 
OmniUnlimitedCommented:
You DO have Dreamweaver?  Awesome!

Why don't you open a new question and I will work you through it step by step?

Tell me what version of DW you are using.
0
 
rhyno99Author Commented:
DW CS4
Sorry I didn't start a new question earlier. See:
DM, WP, Finding Files, and Raising Children

Thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 10
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now