WordPress Help?

[AmyAllen]

I'm working on a website for a family member who requested I create something for them based around the WordPress(.org) CMS. This is my first time working with WordPress, and I have a couple of basic questions.

First of all: Is it possible to upload your own HTML file, or edit an HTML file on WP? Or can you only edit the CSS of a pre-existing theme?

Can I design from scratch on WP without having to know PHP?

Can I design anything for WP that I could design from scratch? Or are my layout options limited?

For someone fluent in HTML/CSS - how much time am I going to have to invest in learning how to use WP to be able to design around it? My brother-in-law needs his site up in the next month or so, so if the learning curve is significant - I might have to go another way.

Thanks in advance for the help! -Amy

[Patrysha]

Yeah, I think learning what you need and applying it in under a month in a way that you will be satisfied with will be a huge challenge. Poke around the Wordpress Codex and see how easy you think it will be to grasp based on what you already know. Go take a peek at the source code of some wordpress sites. And see if you think it's doable to learn within a month.

I personally have never messed with making my own theme from scratch (though I do have a full course on how to do such things that I've read through...it truly just seemed like to much work for me for what I need to accomplish...it's easier to just buy a theme that is close enough to what I want and fiddle with it to make it exactly what I want.

[vangogh]

Actually I think a month is doable, especially since you have a few WordPress experts here who will gladly help. Let me answer your questions and then I'll add a few more thoughts.

1. You don't upload your own html to WordPress. You can replace the css file in the theme with one of your own though naturally knowing the html WordPress is putting out will make it easier to write the css.

2. You don't need to know php to work with WordPress themes, though it certainly helps. If you can at least recognize when php is being used and understand how php includes one file in another you'll know more than enough. Both of those are very easy to explain too if they aren't familiar to you. Just say the word and I'll be happy to offer the explanation. WordPress uses something called template_tags so you don't need to understand php. Template_tags are technically php, but from your perspective you just need to know what the template_tag does and there's only a few you'll absolutely need to be familiar with.

3. Your layouts aren't limited at all. I've yet to see something I couldn't do with WordPress. The only limits will be your understanding of how to work with themes, so it's possible there's something you may not know how to do, but even then I'm sure it could be done.

It took me about a week to build my first theme. I learned by reading through the codex. At the time I knew very little about what a blog was and read most everything you see there. The main section you'll want is the one on design and layout. There is a lot of reading and some of it will be confusing at first, but there's a lot of good information there. There are also several good tutorials online on building a theme. They should be easy to search, but if you can't find any let me know. I've probably bookmarked a few or will be able to find some without too much trouble.

When I build a theme now I start by developing a single page in html and css. Once the html and css is set it's mainly about copying and pasting the right parts into the right WordPress theme files. Several of the WordPress theme files are very similar too so they require the same few changes.

You'll want to start with a copy of the default theme or one of the themes other developers have made freely available. Themes are a group of files. Some like style.css are used everywhere. Others like archive.php only control how different archives of posts look.

Themes contain a header.php file, a footer.php file, and a sidebar.php files. These three files are generally included in all the other files. This is where understanding how includes work comes in handy. For example to include the footer file WordPress has this at the bottom of most files.

<?php get_footer(); ?>

That's the opening and closing tag for php and in between is a WordPress template_tag to include the contents of footer.php in place of that code. It's similar for header.php and sidebar.php.

Beyond that WordPress has a file called single.php which is used for individual blog post, page.php for pages outside the blog, index.php which is the main blog page and the default home page. Inside each file is what's called the WordPress loop. It's a handful of template_tags which are used to grab content from the database and display it on the page. The loop is a mixture of template_tags and html. You can modify the code, but it can be a little daunting to look at if you're not familiar with WordPress or php. You'll just want to be a little careful, but you can edit the html parts.

One other thing to mention is you can develop what's called a child theme. Basically it's just developing the css file and leaving everything else as is for the patent theme. Any theme can serve as a parent theme so if you find one with a similar layout you could just create the stylesheet. It's a way to ease you into WordPress theme development.

I won't go into the rest of theme development here, but I thought I'd give you some idea of what's involved to help you decide if you want to take on the challenge. I do think a month is doable. It took me about a week, but I was familiar with php at the time and was using it in my non-WordPress sites. Now it takes me a lot less time. If we imagined your portfolio site was a 10 page site that looked similar across all pages for the most part I could probably have a theme developed in an afternoon or two, including developing the initial html/css.

It will take you some time to learn, but you do have some resources here to help. You might want to read this page from the codex on theme development to help decide if you want to try.

[AmyAllen]

Thank you so much for that breakdown, Vangogh!

Both of those are very easy to explain too if they aren't familiar to you. Just say the word and I'll be happy to offer the explanation.

That would be awesome - I know enough to recognize PHP, but not enough to know what it's doing.

When I build a theme now I start by developing a single page in html and css. Once the html and css is set it's mainly about copying and pasting the right parts into the right WordPress theme files.

So it is more about editing one of the existing themes than starting from scratch? I read that if themes get updated, you can lose your edits - Is that true of self-hosted WordPress as well?

You can replace the css file in the theme with one of your own though naturally knowing the html WordPress is putting out will make it easier to write the css.

So are you saying the html is found in "the loop" - is that a single file that uses php to pull in all the pieces? or is it a group of files?


Thanks again for all the help!

[vangogh]

The opening and closing tags for php in an an html document are

<php ?>

Anything you see in between is php code. What you'll find in WordPress and most php driven web pages is php being turned on and off a lot. For example here are a few lines from the page.php file.

<div class="entry-content">
  <?php the_content(); ?>
  <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
  <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->

The first and last lines are ordinary html. The 3 in between are php, though you'll recognize some html inside it. In your first attempt you probably don't want to change the parts inside the php tags, but over time you'll be comfortable doing just that. With at first line though you can add an id or another class or change the whole thing from a div to a span and then change the closing tag at the end.

In the beginning don't worry too much about what everything is doing. Just know it works. As you feel more comfortable start searching the codex or general search engines for some of the template_tags you see. For example in the code above you might search for the_content(). The name itself gives you some clue about what it's doing. It displays the content of a blog post or page. Searching though will give you some clues about how to use it and how you might alter it's behavior a little. In the beginning though you can just trust that it displays the content of your page. You can though look at the html source that gets put out. For example the_content will display html tags along with the content. You can still style those tags with css. What will be more difficult is changing the html that is produced.

So it is more about editing one of the existing themes than starting from scratch?

You can start from scratch. It's more that you'll find it easier in the beginning to modify an existing theme until you feel more comfortable with what all the template_tags are doing.

The loop is a few lines of php template_tags that grab and display the content of posts and pages from the database. It's not a separate file. The code will be present inside several files. Generally any time you want to have post and page content displayed in a page the loop will be present.

I hope I answered all your questions. Feel free to ask more. The best way to learn this by the way is to have WordPress set up somewhere and play around with the theme files. Have a backup of the theme just in case and then started editing the files to see what happens. The more you work in the WordPress code the easier it will be to understand what's going on. You won't figure out everything over night, but you will figure out enough within the month to be able to work with themes.

[Harold Mansfield]

I read that if themes get updated, you can lose your edits - Is that true of self-hosted WordPress as well?

If you perform custom edits to a theme, they are only going to work for that theme. If you change themes, it's a new slate and you have to make your customizations to the new one.
If you update a theme to a new version, you will likely loose any customizations as well.

However.
A lot of designers are now creating "Child Themes" along with the main theme, which allow you to make custom edits and not lose them if you need to upgrade to a newer version of the same theme.

You can avoid completely losing your edits by backing up your files. Even if you have to reapply them, it still makes it easier since you have a framework to go on.
Also, all updates don't replace all files. Many designers are aware of people making custom edits and only update core functions. Each situation is different. There is no across the board Wordpress rule that all developers follow in that matter.

[AmyAllen]

Thanks for all the information. I'm leaning towards just getting the site up with regular old HTML/CSS this weekend, and then maybe I'll move it over to WP in a few months. It seems like there's quite a bit to learn to be able to design for WP effectively.

P.S. Vangogh: You should make yourself a digital tip jar! Your posts are always so 'above and beyond'. Thanks for your help.

[vangogh]

Glad to help and what you're planning is actually a good idea. You were going to need to start with the html/css anyway so why not get the site done first so it's live and then you can learn to turn it into a WordPress theme without the pressure of time. There's definitely stuff to learn and in the beginning the files will probably be on the confusing side, but I promise the confusion starts to go away as you work with themes.

I'll see if I can find a good started theme for you that has most of what you don't need stripped out. There are some out there. If not maybe I'll develop my own specifically to serve as a teaching tool.

Thanks for the compliments. You've given me an idea with the tip jar suggestion. I wonder if something like that could be set up for everyone. Maybe have an option where people could add a PayPal address so anyone can tip them. I'm always looking for ways we can reward the community in general.

Until then you can always click on the little star to the bottom left. It lets you add reputation points and leave a comment for anyone you want.

[Harold Mansfield]

I head someone mention money from the other side of the internet
I wouldn't even try to hack it. All you need is a linkable image in your sig or profile on the left, sort of how I have my Facebook page linked to the image in my sig.
You could easily place a donation button there that links to your Pay Pal account, or add it to your profile page on the back end so that people know where to donate to.

[vangogh]

I'm not sure it's something I would actually add, but I meant it as something of a button on the left like reputation. If people were to start adding it as a linkable image in their signatures they'd start finding they no longer have signature privileges. I don't want to encourage people to set up accounts just to they could add ask for donations. I'd rather it be something part of the forum software. It may seem like the same thing, but I think it would attract different types of members.

Maybe it's not a great idea in general. It's just that I'm always thinking of ways to give more back to the community.