Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

First Wordpress theme from scratch help?

jackniksmith18
in Content Management Systems (CMS)

Featured Replies

Hi guys,

 

I have recently been tasked to redesign my dads very old website, he wanted to be able to change things without having to call me every time. So I decided to go with wordpress. I have very little experience with PHP so you can imagine I was a little lost, so far I have managed to do okay but have come stuck. Can you Help

 

1. Being a website and not a blog, I would like to be able to have a homepage with a slideshow just on that page and no others. I have managed to add a slideshow but obviously its stuck to all pages.

 

2. When using a Wordpress custom menu, it loses all styling that was applied to the original navigation.

 

HEADER.PHP

 

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>
<?php wp_title (); ?>
</title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php
/* 
 * 	Add this to support sites with sites with threaded comments enabled.
 */
if ( is_singular() && get_option( 'thread_comments' ) )
	wp_enqueue_script( 'comment-reply' );

wp_head();

wp_get_archives('type=monthly&format=link');
?>
</head>
<body>

<div id="wrapper">
<div id="header">
	<a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('template_directory'); ?>/images/oakslogo.png" border="0" alt="XXX" /></a>
</div>

 <?php wp_nav_menu( array('menu' => 'Navigation' )); ?>

 

 

STYLE.CSS

 

/*
Theme Name: OaksFlooring
Theme URI: http://oaksflooring.co.uk
Description: CMS theme for wordpress
Author: Jack Smith
Author URI:
Version: 1.0
*/


body{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
background: #7B766D;
color: #000000;
}

a:link, a:visited{
text-decoration: none; 
color: #000000;
}

a:hover{
color: #5f5f5f;
}

h1 {
font-size: 54px;
}

h3 {
font-size: 24px;
}

#wrapper {
margin-top:10px;
width:980px;
height:auto;
background-color:#FFF;
margin:auto;
}

#header {
position:relative;
left:785px;
top:40px;
}

#navigation{
position:relative;
top:-122px;
background-color:#625F57;
width:940px;
height:32px;
text-align:center;
font-family:trebuchet ms;
text-decoration:none;
font-size:13px;
display:block;
}

.nav ul{
list-style:none;
}

.nav li{

position:relative;
text-align:center;
display:inline-block;
}

.nav a{
display:block;
text-decoration:none;
color:#fff;
padding:0 15px 10px 0;
font-size:13px; 
font-weight:bold;
}

.nav ul ul{
display:none;
position:absolute;
top:100%;
left:0;
float:left;
z-index:99999;
background: #212121;
}

.nav ul ul ul{
top: 30%;
left:100%;
background: #343434;
}

.nav ul ul a{
height:auto;
line-height:1em;
padding:10px;
width:130px;
}

.nav li:hover > a,.nav ul ul:hover > a{
color:#ccc;
}

.nav ul li:hover > ul{
display:block;
}


#blog{
width:700px;
height:auto;
background-color:#CBC9BC;
position:relative;
right:-50px;
box-shadow:4px 4px #999;
}

#blogwrap {
padding-top:20px;
padding-left:100px;
padding-right:100px;
padding-bottom:20px;
font-size: 12px;
}

#slideshow {
width:980px;
height:271px;
background-color:#b0c4de;
}

.sidebar{
float: left;
width: 200px;
margin: 0 0 0 10px;
font-size: 14px;
list-style: none;
}

#footer{
clear: both;
width:982px;
height:50px;
background-color:#625F57;
position:relative;
top:50px;
left:-101px;
font-size:10px;
}

#footertext{
padding-top:10px;
font-size:10px;
font-family:trebuchet ms;
position:relative;
right:-25px;
color:#CCCCCC;
line-height: 12px;
}

#footersocial {
position:relative;
left:855px;
top:-35px;
}

.gravatar{
float: right;
}

.comments-template{
margin: 10px 0 0;
padding: 30px 0 0;
}

.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
}

.comments-template ol li{
margin: 10px 0 0;
line-height: 18px;
padding: 0 0 10px;
border-bottom: 1px solid #ccc;
}

.comments-template textarea{
width: 500px;
}

.wp-caption {
 background-color: #f3f3f3;
 border: 1px solid #ddd;
 -khtml-border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px; /* optional rounded corners for browsers that support it */
 margin: 10px;
 padding-top: 4px;
 text-align: center;
}

.wp-caption img {
 border: 0 none;
 margin: 0;
 padding: 0;
}

.wp-caption p.wp-caption-text {
 font-size: 11px;
 line-height: 17px;
 margin: 0;
 padding: 0 4px 5px;
}

 

PAGE.PHP

<?php get_header(); ?>

<div id="slideshow">
<?php wowslider(3); ?>
</div>
<div id="blogwrap">
<div id="blog">
	<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

	<div class="post">
	<h3><a href="<?php the_permalink(); ?>"></a></h3>

<div id="blogwrap">
		<div class="entry">
		<?php the_content(); ?>



		</div>
		</div>

	</div>

<?php endwhile; ?>

<div class="navigation">
	<?php posts_nav_link(); ?>
</div>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>	
<?php get_footer(); ?>

 

Any advice you guys could give me would be most appreciated.

 

I have attached a images to show what im talking about :D

 

Thanks alot

Jack

post-30249-0-86652100-1333826284_thumb.png

Why not take a look at using Drupal - You may find this an easier cms for your father to add content to. You can also easily create custom blocks (you will need to create a custom views block) where you can also specify which pages the blocks show by default, ie <front> (frontpage) or /myslideshowpage

Edited by mylocaltrades

    • Author

    Why not take a look at using Drupal - You may find this an easier cms for your father to add content to. You can also easily create custom blocks (you will need to create a custom views block) where you can also specify which pages the blocks show by default, ie <front> (frontpage) or /myslideshowpage

     

    Hi thanks mate, im going to take a look at drupal in the morning see if its any easier :D

    • Author

    u need to make separate template for homepage and add slider to it

     

    like home.php

     

    Hi, if i was to create a home.php how exactly would I go about linking it? im a complete novice in PHP.

     

    Thanks

    Jack

    I tend to use front-page.php for Wordpress home template. All you gotta do mate is duplicate whatever template you are currently using, I presume that's index.php, and name it front-page.php. You can now remove the slider markup from the original template, and if all goes well the slider will now only be on the front page.

     

    Edit: http://codex.wordpress.org/Template_Hierarchy

    Edited by roothost

    I tend to use front-page.php for Wordpress home template. All you gotta do mate is duplicate whatever template you are currently using, I presume that's index.php, and name it front-page.php. You can now remove the slider markup from the original template, and if all goes well the slider will now only be on the front page.

     

    Edit: http://codex.wordpress.org/Template_Hierarchy

     

    Great advice! Just to add to this, so you can always revert back to your original front-page.php file, I would create a copy of the file and rename the original file : old.front-page.php

     

    If you need to revert things back you simply delete your custom file and rename the old.front-page.php back to front-page.php

    • Author

    I tend to use front-page.php for Wordpress home template. All you gotta do mate is duplicate whatever template you are currently using, I presume that's index.php, and name it front-page.php. You can now remove the slider markup from the original template, and if all goes well the slider will now only be on the front page.

     

    Edit: http://codex.wordpress.org/Template_Hierarchy

     

    Hi mate cheers for that awesome advice just what I was looking for. :D

    • Author

    Also, why the heck are you writing it from scratch? If you really have to use Wordpress, there are tons of skelton themes for you to start from. To be honest, creating a child theme from the default twenty tweleve theme would speed things up massively (Don't, and I repeat, don't, edit the defualt wordpress theme directly!)

     

    Hi, sorry for the confusion I did start with just a barebones/skeleton theme. Cheers for the advice :D

     

    Jack

    • Author

    Hi guys, okay i have managed to create the front-page.php as described earlier, but have ran into another problem and for the life of me cant figure out what I have done wrong. On the home page the footer and article div's are fine all in place etc. But on every other page they are all off center?

     

    asdassva.png

     

    Were could this mistake of happened?

     

    Thanks

    Jack

    Edited by jackniksmith18

    • Author

    u need to style the wpnav

    use firebug

     

    can u show live link?

     

    Hi mate sorry no live link atm, I will try and get one sorted ASAP, firebug? never used it, will look into it now :D

    thanks

    You just need to add 2 new pages (eg home and blog) in Wordpress admin panel, then under settings > reading select static page: home for homepage and blog for posts page. That way the homepage content will only appear on the homepage. Or am I just reading this wrong?

     

    Firebug is an addon for Firefox, it took me a long time to realise it existed, makes life much easier!

     

    If you are editing a main theme, you need to create a child theme with at least a stylesheet. Otherwise if your dad ever upgrades Wordpress all of your customisations will be lost.

    • Author

    You just need to add 2 new pages (eg home and blog) in Wordpress admin panel, then under settings > reading select static page: home for homepage and blog for posts page. That way the homepage content will only appear on the homepage. Or am I just reading this wrong?

     

    Firebug is an addon for Firefox, it took me a long time to realise it existed, makes life much easier!

     

    If you are editing a main theme, you need to create a child theme with at least a stylesheet. Otherwise if your dad ever upgrades Wordpress all of your customisations will be lost.

     

    Hi, thanks for the reply, I somehow fixed my own problem not how lol :D, creating a child theme? sorry would you be able to explain to me what you mean by this or how I would go about creating one. Thanks alot to you all for helping me out here :D

     

    Jack

    Create an account or sign in to comment
    Go to topic listing

    Account

    Navigation

    Search

    Search

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.