Fashion and technology resource pages

Amy Marsh Is A Fashion Technologist In Training

fashion resources

 

Hello, the #30daysofcoding may be over but did you really think you would be rid of me?! (Or that I would want to stop!)

 

Each Thursday I will be giving a tutorial on a new piece of code I have added to the blog so make sure to check them out! Today I am attending a blogger’s event with Chloé which I am so excited about! We will be giving advice to bloggers on how to ensure there blog is as engaging to their readers as possible as well as answering any other questions they might have for us regarding their blog.

 

For this post however, I will be showing you how to add resource pages to your site. This will allow you to share and celebrate other resources you read and follow with your readers.

 

Let’s get started!

 

 

First let’s start by creating our pages, select ‘Pages’ in the left hand side of your wordpress admin page and add your page. I have decided to add four pages, one is the main resources page which has links to the three resource pages I will be creating. The pages I have added are ‘resources’, ‘fashion resources’, ‘fashion technology resources’ and ‘technology resources’.

 

I have added in an image for each of the ‘fashion resources’, ‘fashion technology resources’ and ‘technology resources’ pages which I will then link to the corresponding pages. These images are:

fash-resourcesfashtech-resourcestech-resources

 

I have also added top page images to the ‘fashion resources’, ‘fashion technology resources’ and ‘technology resources’ pages. These images are:

fash-long fashtech-longtech-long

 

I want to put these pages in a drop down menu in order to do this select ‘Appearance’ in the left hand menu and then ‘Menus’. Add the pages to the menu and in order to create the sub pages simply click on the page you wish to be in the sub menu and drag in underneath and slightly to the right of the page you wish to it to be a sub menu of, like shown here:

 

menu

Click ‘Save Menu’ once complete.

 

Now we are ready to code our pages.

To make the main resources page create a new page called ‘page-resources.php’ and copy and paste this code in:

 

This code removes the sidebar and comment option in a regular page template, but still brings in the content from the page.

 

Add this line of styling to your style.css file:

 

 

The individual fashion, fashion technology and technology resource pages they are all very similar. Start by creating a new page for each of the sections called ‘page-fashresources.php’, ‘page-fashtechresources.php’ and ‘tech-resources.php’.

This is the fashion resources page code, you can use this code for the fashion technology resources page and the technology resources page but you will need to alter parts.

 

 

I will now go through each section explaining what it is doing and how to change it for the ‘fashtech-resources.php’ and ‘tech-resources.php’ pages.

 

At the very beginning of the page we need the page, therefore change this so it is suitable to your blog:

 

Next this section of code brings in the content you have entered in the page through the admin section:

 

 

This section of code adds each of the individual resources, you will need to change this to suit which resources you wish to recommend:

 

 

Once this is complete go back onto ‘Pages’ in the lefthand side bar , click onto each of the newly added pages and select the corresponding template like so:

 

Screen Shot

Now we can add the styling to the ‘fashion resources’, ‘fashion technology resources’ and ‘technology resources’ pages.

 

 

This section of styling removes the heading from the pages as it is not needed with the top page images:

 

You may notice you navigation submenu is not quite wroking correctly, if this is the case you will need to add position relative to #access li, like so:

 

 

You will also need to add this section of code so it does not stick when the navigation bar becomes fixed:

 

 

As well as edit this section of code if you wish to change colours or any other styling features:

 

COMPLETE!

Leave a comment with any questions!

 

 

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">