Hi there,

I'm completely new to styling in wordpress, so any help is greatly appreciated.

Basically, I'm working on the following website: www.rjt-online.com/home.php

And for it's Blog page I wanted to style Wordpress to look and function the same as the site. Is it possible to incorporate all the functionality and look of the header (the area from the top of the page to the bottom of the nav buttons) into Wordpress, including the Javascript and CSS that controls the changing colours and moving buttons?

If so, can someone give me some pointers on how to do this easily?

In an ideal world I'd also like the footer of my website to appear too.

Cheers!

Recommended Answers

All 13 Replies

Well, to start, styling wordpress is ALOT easier then it seems, right down to putting the header/footer/JS that YOU want into it. The trick to it, is that you have to open the PHP files, IN the wordpress ADMIN panel. When you open these up, header.php/footer.php, and I forget the main one offhand, you have to read through the PHP, and see where everything is situated IN the PHP. Its fairly easy to read, and all you have to do is cut and paste the JS/HTML in the appropriate places within the PHP files, and the CSS goes in the style.css file, also opened in the admin panel. It sounds complicated, and at first when I started doing it I was pretty intimidated by it. But, just get in there and play with it, its the best thing you can do is alot of trial and error on the placement.

One important thing tho~~~ BACKUP THE ORIGINAL PHP FILES BEFORE ALTERING THEM!!!!!!!! I apologize if you really didn't need to know that, but better safe then sorry. You can preview the changes as you make them in the PHP files, so you will know if you are getting things pasted right.

I hope this helps, and is easy enough to understand. Good luck with your endeavor.

Thanks!

I have managed to get a good chunk of it done.

However, could you tell me how I could fix a few things....

http://www.rjt-online.com/wp/

needs to display like this.... www.rjt-online.com/blog.php

As you can see the header is in place and working, but I can't figure out why the content of the blog is left justified? Also, where is the style that will change the background colour purely behing the content so it's white. I need it to look exactly like the blog.php page

/sigh, ok reposting again, more condensed version. It looks to me like you don't have your page body HTML wrapped around the body PHP code. What you need to do is at the top of your main php file, underneath the nav bar and get_header.php scripts is where you start the body HTML, and its going to mostly just be opening your div. When you close the div, you have to have it quite close to the bottom, just above the get_footer.php script command.

I hope that helps.

Cool. I'll look into that first thing in the morning. I seem to have fixed it to an extent (it's working as is on all browsers but Firefox). It's pretty complicated with all these php files.

I know exactly what you mean, when I started working with it I spent countless hours reading up on different tutorials on it, all of which made no sense whatsoever to me lol. But after playing with it enough, I finally figured it out, and basically taught myself how to manipulate wordpress into what i wanted it to be. A lot of CSS, with a bit of HTML, and putting everything in the right php files and wrapped around the script so it worked. Anyways, best of luck, if you have anymore questions/problems I'll do my best to answer them.

Hey,

I was wondering if it is possible in WordPress to display a different Header.php file and Footer.php depending on which page you're on.

For example, here is my Home page (work in progress)... http://www.rjt-online.com/wp

As you can see the header section uses Javascript and displays the Home Button in white to highlight the page you're on. And the footer says Home.

Now, I have made a Blog page (http://www.rjt-online.com/wp/blog/) and would like a different header and footer for this page (highlighting the Blog button and having Blog in the footer).

I apologise if this is really easy and I'm wasting your time :)

From what I've looked at, and thought about, you simply use a different template for each page. The trick however, is to implement your customized HTML/CSS/JS into those new templates; in theory anyways. I haven't actually had a chance to play with that enough to know for certain if that will work or not. The other thing I would consider is changing your JS to call in the current page, rather then making the JS unique on each one; if that makes sense.

Cheers for the reply.

I'm working away at this but no doubt over the next few hours I'm going to have some questions! :)

well, I make no promises, but I'll do my best to help out as best I can.

The main question I'm looking for an answer to is, is it possible to have Archives that are specific by category? For example, on this page (www.rjt-online.com/wp/blog) where it says Blog Archive, I want it to link only to entries posted in the Blog category. Is this possible?

I'm pretty sure you can do that. I actually think that its in the normal functions of wordpress. I would look into the wordpress manuals and such for the answer to that one. I haven't actually played with that aspect yet.

Hey Hindu times...

I'm also a novice in all the programming languages but managed to create my own custom wordpress theme.... so it can be done! Just take you time.

I wanted to do a very similar thing, I wanted a different image to display no matter what page was clicked on. The code below is what I used. Just change the image path to reflect where the images are (for mine its in a folder called headers in images).

<div id="header"><?php
$curdir=getcwd(); chdir(get_template_directory() . "/images/headers");
$files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
chdir($curdir);
$file=$files[array_rand($files)];
?>

Hopefully this will help you?

This post looks like an interview between both of you guys.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.