|
|||||||
|
|
Run your site on WP the ultimate guide to wordpressifying your site. this is an interactive tutorial so you can learn firsthand how to run your site on wordpress. there are a lot of steps you must take before customizing wordpress, like installing it. that's a whole different story. but once it's been installed, you can work from there to make a wordpress site. Tips before usage:- If you have a domain, i suggest you install wordpress in a seperate directory and not root Download layout I have a layout here ready for you. Girly, I know, but you're learning how to wordpress your site, not make your own layout lol. download the layout here: Download the premade Then, upload the images to your site. I prefer you to upload it into your wordpress folder, but anywhere is fine actually as long as you know the full URL to where you uploaded them. that's important.Uploading you are to upload the images wherever you want. As for the stylesheet, create a new folder in wp content > wp-themes called custom and upload the stylesheet there. ChMod your stylesheet to 666 or 777.Anatomy of stylesheet you are very lucky that I have made a stylesheet for you. Open up the stylesheet in the premade layout and here are some of the terms and sections explained:ALL WORDPRESS THEMES MUST HAVE THIS HEADER. It is a definate must. This is how Wordpress knows that this stylesheet is for your wordpress layout and not for something else. It is pretty much self explanatory, you fill in the name of the theme, where you uploaded it, your own description, etc. This appears at the top of any/all of your wordpress stylesheet, or style.css. If you have more than one theme, make sure that you've named and addressed all of your themes differently, or else wordpress will be confused and will make them both into one theme or elminate one of them. There is a section in the above code called Template. This is an optional field. If you use multiple skins, you don't need this at all. But the template field asks for what Wordpress premade theme you want your custom theme to mimic. You either put classic or default. I choose default because it has more options and you can write pages with default. In classic, you cannot customize pages. This also saves you a lot of time from having to make multiple pages inside of your new theme. Note: remember to chmod all of the files in your theme templates. go into Wp-content > themes and go into both the classic and default folders and write everything to 666 or 777, do not chMod the directories themselves. Most everything else in the stylesheet is basic, but this may not look familiar: The layout I have given you is a divs layout. These are the positions of the divs. Menu is the position of your navigation/sidebar and content is the position of your content, pretty easy. If you have more than two divs in your layouts, you can add another class like #menu2 (make sure the # sign is in front of it) and put in its position and width as well. You would code it like so in your header template (or wherever else):
Images: When using images in a layout, like this one for instance, be sure to use the full address to any and every image you use. like for headers1 and 2 i have put: background-image:url('http://www.fractured-beauty.net/wordpress/13/header.jpg'); you have to know where you uploaded your image. if you want to avoid doing this, i suggest you upload your images where you uploaded your stylesheet. Activating the new theme Activate a new theme by going to Presentation > Themes and click select by the new custom layout you've added to activate it on your site Now go to Theme editor (also under presentation) and begin editing your templates. The first thing that should come up is the stylesheet for your custom theme. to the right of the editor is a list of files similar to this:
Editing Angel's premade Wordpress codes I've provided a help file with premade wordpress templates, fully customized for you. Here are the details: I have crossed out any of the files that I do not use when wordpressifying a site. These are the files that I did not recode or edit, aka, files you don't have to worry about: StylesheetArchives Comments Template Footer Template Header Template Main Template Page Template Sidebar Template Post Template Just use my help files and paste the codes in the appropriate places.I've named them so you can tell which is which. If you want to use any of the functions I have taken out of the themes, you're on your own there, I've just done what is commonly used for blogs. Purposes I have left out the files I don't think are relevant, but here are the purposes of the files that I've left you with: ArchivesIf you archive your posts, your posts will appear in this way, you don't need to do much editing on this one unless you use different header classes than i do, which you shouldn't be because then you wouldn't be following my tutorial very well! Comments template This is the comments on your site, i leave them in the same window because if it were in a popup window, when you leave a comment you see the index page again. In a popup window (which is about 350 by 550 pixels), it's kinda pointless to have it when it redirects back to the index. it's also easier to skin this way and you don't have to bbe paranoid about colors and background images, it matches the layout perfectly. No editing needed here. Footer template What you want to appear at the bottom of all pages. i just put spaces. no editing needed. Header Now this one requires some editing, unless you use divs all the time and you name your images main all the time and always use bg.jpg as your background image... now that would be creepy, but if that were true, no editing necessary. But initially, you will need to change your stylesheet URL in header template. it's towards the top of the page and looks like this: Just put in the full URL to the stylesheet I have given you. If you've been following along, it is www.yourdomain.com/wordpress/wp-content/themes/custom/style.css. you could have named wordpress as wp or custom as something else, so that's not completely accurate. Also do the same with your images (unless you uploaded your images in the default theme folder, which i doubt you did and i don't advise it because you might lose stuff). Put the entire URL to the images i put in for you wherever you uploaded it. All you have to do is change: URL TO bg.jpg URL TO main.jpg Angel, why did you put bg.jpg in the header when you could have easily put it in your CSS? Because if you chose to use popup comments, there won't be a stupid ugly background. So recap: - Replace URLs to stylesheets and images in Header.php. also, I have marked the beginning and end of this particular layout in header.php for you, so if you want to replace it with different coding, you just delete from BEGIN to END and replace it with your own coding. this makes it so that you don't acidentally delete something important. Main template This is the template to the index of your posts, or the latest, non archived posts on your blog/site. No editing required here unless you use different headers than me, which, again, you shouldn't have. And also if you use a comment plugger, it would also go in this section. Page template This is why i made you choose default instead of classic. In the classic theme, you are not allowed to edit pages or change the look of them, but you are allowed to in default. No editing required, I took off the comments and everything for you. Sidebar template This is your navigation or that div id="menu" part of your CSS stylesheet. Customize this to your liking to fit the navigation of your site. It's just like your average, every day sidebar navigation. Post This is what a single post looks like, so if you linked to one single post, this is your template, or when you are putting in a comment, you only see one post, and this is what it looks like. No need for editing here either. Conclusion So now you have installed your own custom layout into wordpress. You can now write pages and such and get your blog on.Now you can make your own layouts, reposition the divs and change around header a bit and voila! You have successfully wordpressified your site. If ever you want to change your navigation, you know what to do. It's a lot like PHP includes. Actually, it is PHP includes, but wordpress style. here is a checklist: - Did you upload the stylesheet in its own folder in wp-content?- Is your stylesheet written correctly and different from the rest? - Are your images linked correctly? - Did you position your divs correctly? - Did you remember to chMod? - Did you remember to fill out the template area of your stylesheet? If you have any questions, please feel free to ask. this is a very experimental tutorial that is still in its early stages so it will be changed frequently. |
||||||
|
|
|||||||
