WordPress › Support » Completely custom WP design

Anonymous
Unregistered
Posted 1 year ago #

Alright. I just installed WordPress and I've been trying to match the theme of the blog with the rest of my website, but I am having no luck. I've tried following the guides provided, but still am making no progress. I quite honestly have no idea what to do and I'm ready to give up.

Essentially what I'm trying to do is replace the header with a CSS navigation bar that utilizes CSS Sprites (which is also used on all of the other pages), and then match the body design and backgrounds with the rest of the pages. I was trying to do this to eliminate the need to use Dreamweaver to post news updates, but at this point I'm ready to just toss WP since its giving me so much trouble. Is there any way for the theme to be designed in HTML/CSS and then transferred over to PHP?
whooami
Member
Posted 1 year ago #

Essentially what I'm trying to do is replace the header with a CSS navigation bar that utilizes CSS Sprites (which is also used on all of the other pages), and then match the body design and backgrounds with the rest of the pages.

Is there any way for the theme to be designed in HTML/CSS and then transferred over to PHP?

Thats all a wordpress theme is, is XHTML and CSS, sprinkled with the PHP bits that provide the "content".
Anonymous
Unregistered
Posted 1 year ago #

I guess what I meant to say is that I really don't know any PHP, and all of my attempts to add the elements using CSS resulted in a less-than appealing look. I'm still not quite understanding the interaction between the CSS, HTML, and PHP. I'm very familiar with both CSS and HTML, but I don't know enough PHP to make the them look like I want it to. Is there any way to insert the WP elements into a table in the pre-existing HTML layout?
whooami
Member
Posted 1 year ago #

Is there any way to insert the WP elements into a table in the pre-existing HTML layout?

Yes.

I guess what I meant to say is that I really don't know any PHP

You dont have to "know" PHP, you just have to know how to copy and paste. :) Youre not rewriting PHP, youre using what WordPress already has available to you

--

It sounds like youre not grasping how everything ties together.

You have structure and style.

structure is accomplished using the XHTML and the PHP. Style, ought to be, completely reliant on the CSS.

I suggest reading some of the documentation (again, perhaps)

http://codex.wordpress.org/WordPress_Lessons#Designing_Your_WordPress_Site
Anonymous
Unregistered
Posted 1 year ago #

Okay so lets say I want to insert the main blog posts of WP (no sidebar, no header, no anything except for the blog posts and their related links), how would I go about doing that?

I found a few articles on the web, but none of them were all that helpful.

Is it just a matter of copying and pasting, or is there something special I need to do so that WP itself only publishes the blog posts into the table that I define?

(I'm sorry I'm so needy, I just really am having a hard time grasping how all of this stuff works together)
uplink
Member
Posted 1 year ago #

JBlair,
Stick with it! When you can get a handle on WP, you will be amazed at how powerful your site will become - it really is a superb blog and CMS platform!

Is it just a matter of copying and pasting, or is there something special I need to do so that WP itself only publishes the blog posts into the table that I define?

I'm not sure, but I think you may have the order in your head a little backwards of how WordPress works. You won't be calling WordPress to just stick in stuff to your existing site. Instead, you will adapt your current site layout to WordPress, and WordPress will use that to publish your blog entries.

The links that whooami gave you are really good ones, I would recommend reading through them a couple times (I still do ocassionally, there's a lot of stuff there). If you are very familiar with CSS/XHTML, then you could read through Matt Brady's Theme Guide.

A quick primer: index.php is the main structure - if you don't want a sidebar for example, remove <?php get_sidebar(); ?> from it, and it won't call for your sidebar. header.php is probably where you will stick your CSS nav bar. single.php will be used to display individual blog posts, make sure to edit that one as well.

The learning curve might be a bit steep, but I would definitely encourage you to stick it out, and you will realize the potential rather quickly.
Anonymous
Unregistered
Posted 1 year ago #

I guess my question then is is it possible to take my XHTML/CSS-based website design and (for lack of a better term) wrap it around the wordpress elements? The key about that, though, is if there is an easy way to do this. I still have a large chunk of the site left to do, and I haven't really found any tutorials that would make the process of applying my layout to WP easy enough to be worth it.

In all of your experiences with customizing WP have any of you come across with some easy (or even moderately difficult) tutorials that would aid me in this process?
Anonymous
Unregistered
Posted 1 year ago #

Oh, and I'm still at a loss for how to insert my CSS and image driven navigation menu into WP. It utilizes Image sprites and an unordered list stylized by CSS, but I don't know how to directly insert that into the template files and get the sprites to still work.
Anonymous
Unregistered
Posted 1 year ago #

http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-1-143/
Anonymous
Unregistered
Posted 1 year ago #

i used that link to design my site http://joshua.jolawnandkevan.com

I still have to iron out some formatting kinks, but as far as converting my photoshop design into a wordpress theme, I'm coming along
Anonymous
Unregistered
Posted 1 year ago #

Ok so I found a tutorial and got everything put in correctly, but for some reason when I upload it it is telling me that the style sheet is missing. I think the problem is that its not finding the style sheet on the index.php page in this part of the code:

<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?>);
</style>

Does this automatically find the page, or do I need to put the URL for it in? (If so, in what format)
Anonymous
Unregistered
Posted 1 year ago #

Okay I added it to the header.php (like it should have been) but its still not working for some reason.
Anonymous
Unregistered
Posted 1 year ago #

This is what the top of header.php looks like.

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<style type="text/css" media="screen">
@import url( <?php bloginfo("Style.css"); ?>);
</style>

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
Anonymous
Unregistered
Posted 1 year ago #

Wow so this is frustrating.

The style sheet is now attached, but now it says the template file is missing. What does that mean?
RoseCitySister
Member
Posted 1 year ago #
What do you have at the top of your stylesheet? It should look something like this:
```
/*
Theme Name: WordPress Default
other theme info here
*/
```

Anonymous
Unregistered
Posted 1 year ago #

The style sheet thing is working now, but now it is telling me that the template (index.php) is missing.

Is this what the code is supposed to look like?

<div id="contentcontainer">
<div id="content">
<img src="Images/Content Header.png" width="875" height="10">
<img src="Images/NewsHeader.png" width="875" height="50" />
<?php
get_header();
?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php the_date('','<h2>','</h2>'); ?>

<div class="post" id="post-<?php the_ID(); ?>">
	 <h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
	<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_tags(__('Tags: '), ', ', ' — '); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>

	<div class="storycontent">
		<?php the_content(__('(more...)')); ?>
	</div>

	<div class="feedback">
		<?php wp_link_pages(); ?>
		<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
	</div>

</div>

<?php comments_template(); // Get wp-comments.php template ?>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

<?php posts_nav_link(' — ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>

<?php get_footer(); ?>
</div></div>

Anonymous
Unregistered
Posted 1 year ago #

Alright, I figured out that problem as well, but now when the page loads NONE of the styles on my CSS sheet load. It just comes up with the content but without any of the images and without pretty much anything except white backgrounds and no text styling.

the page is http://www.hillsdalesigmachi.org/news

Any advice.

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

Completely custom WP design (17 posts)

Topic Closed

About this Topic

Tags

Code is Poetry