Attend WordPress Theme
Released: 01/13/15
/
Version 1.0.0
Online Documentation Link
ATTEND WORDPRESS THEME
1
Introduction
We would like to take this opportunity to thank you for your purchase. This instruction
manual was created to help walk you through the setup process of the theme, but it is
HIGHLY recommended that you follow along with the online-documentation as it is the most
up-to-date version of the documentation. Before we get started, let’s go over a few things.
Should you have any questions or concerns please remember that customization to the
theme does not fall under free support and is your responsibility. If you wish to customize
this theme, we recommend that you use the child theme starter package (included) to prevent
you from missing out on any updates to this theme in the future.
However, saying that, if you have any questions, you are free to visit the support center
and open a ticket. You will need to create an account and verify your purchase as support is
only offered for verified purchases. If you need help with purchase verification, you can
follow this link.
Also, please feel free to explore our FAQ section to answer any general questions relating
to this theme.
ATTEND WORDPRESS THEME
2
Getting Started
Your theme has been developed using the latest version of WordPress (which at the time
of this publication is 4.1). If you do not have the latest version of WordPress, we recommend
you upgrade your site to ensure you experience the theme’s full capabilities. To get the latest
version, please click this link, or if you already have a WordPress site, you can check for
updates and install updates by logging into your WordPress site then go to Dashboard >
Updates and follow the on screen instructions.
If you would like to get your site setup to look exactly like our demo, you will need to
follow these steps in order, for the purpose of this documentation we will assume you have
already set up your WordPress hosting, domain and site:
•
Install and activate the theme
•
Install and activate the recommended plugins
•
Set the WordPress settings for media and permalinks
•
Import the demo content (file included) and the widget settings (file also included)
•
Review the theme and plugin settings and set to your desired needs
We will be going through each step in detail to help walk you through the process.
You, of course, do not have to import the XML. If you want to skip this step, please feel
free, but keep scrolling so we can explain the theme options, widgets, page templates and
other WordPress important information about this theme.
ATTEND WORDPRESS THEME
3
Installing the theme
Unzip your download. Inside the folder you will see a number of other files such as: attendwp, attend-wp.zip, attend-wp-child, attend-wp-child.zip, Help File, Photoshop Files.zip,
demo_widgets_import_file.wie and demo_content_import_file.xml
1. Navigate to Settings > Media. We have the ‘Thumbnail size’ set to 300 width and 300
height and the ‘Crop thumbnail to exact dimensions’ box ticked, but this is totally up to
you and what works for your site. Just keep in mind, when you do the XML import later,
your image sizes may not look exactly like what we have on the live preview. Should you
want to go back and change your thumbnail sizes to something different at a later time, it
is totally doable, but once you do the import and/or start uploading images, WordPress
will create them at this size and if you change this size, you would need the assistance of a
plugin to resize the image to the newer sizes. You can get a plugin like Regenerate
Thumbnails to help you do this.
2. Navigate to Settings > Permalinks. We have the permalinks set to ‘Post name’, but this
step would be what ever makes sense to you and your business to help boost your SEO.
Just remember, if you leave the permalinks to ‘Default’ your url structures will look
something like this: http://mythemepreviews.com/attend-wp/?p=123, which will not
help your SEO. Here is the official Wikipedia definition of SEO.
3. Navigate to Appearance > Widgets. You will need to ‘remove’ or ‘delete’ each widget that
WordPress installed for you on activation (under ‘Primary Sidebar’). We will be
explaining to you later in this document where each widget goes.
4. Navigate to Pages. You can delete the ‘Sample Page’ that WordPress created for you on
activation and then click ‘Trash’ to empty this page from your trash. The XML will be
creating pages for you with content and images included.
5. Navigate to Posts. You can delete the ‘Hello World’ post that WordPress created for you
on activation and then click ‘Trash’ to empty this post from your trash. The XML will be
creating posts for you with content and images included.
6. Navigate to Appearance > Themes. Click ‘Add New’. Click ‘Upload Theme’. Click
‘Browse’, just browse your computer and select the attend-wp.zip, then select ‘Install
Now’. Once the theme is uploaded, click ‘Activate’.
Your theme is now installed and activated. If you wish to customize the theme, you would
simply repeat step 6, but select the attend-wp-child.zip to upload, install and activate. If you
wish to learn more about child themes, follow this link. Next up, we’re going to install some
plugins.
ATTEND WORDPRESS THEME
4
Installing the plugins
With this theme we use a total of 6 plugins. You, of course, do not have to use all of these
plugins, or even these specific plugins. But please remember, the plugins we are
recommending are on our live demo and have already been tested and styled for.
Please note that plugins are created by many users, many for free, from all corners of the
world, not all plugins play nicely together and it will be up to you to make sure the plugins
you have activated are compatible with each other – this is not a limitation of the theme in
any way — it’s just if the plugin author created the code cleanly and using WordPress
guidelines.
All plugins with the exception of cr3ativ short codes plugin, can be added by navigating to
Plugins > Add New and in the search box, type the name of the plugin we have listed here
and then click ‘Install Now’. WordPress will ask you to confirm you want to install this
plugin. After selecting ‘Ok’ to install, when the installation is complete, WordPress will ask
you if you want to ‘Activate’ this plugin. However, for your convenience, we list these
plugins so that they link to their official download page.
•
•
•
•
•
•
Contact Form 7 — used to power the contact form. Once you activate this plugin, it will
create a dummy form for you. You can Navigate to Contact and simply delete this form.
We are going to import one for you in the next step.
Cr3ativ Conference — used to power the speakers and sessions. You do not need to
upload the templates as per the plugin instructions, this theme has them built in.
Cr3ativ Sponsor — used to power the sponsors.
Cr3ativ Shortcodes — used to power all the short codes seen throughout the site.
Responsive Lightbox by dFactory — used to power the lightbox effect shown on galleries.
Widget Importer & Exporter — used to quickly and easily import all widgets used in our
demo
If you want your site to look exactly like our live demo, you must install and activate each
one of these plugins listed or you will receive error messages when you try to import the
XML as it will be trying to import content for a post type that does not exist.
Ok, now that our theme and plugins are installed, let’s go ahead and import that XML demo
content.
ATTEND WORDPRESS THEME
5
Importing the XML
Inside your Themeforest download you will see a file called ‘demo_content_import_file.xml’.
To import this you MUST follow these steps:
1. Navigate to Tools > Import. From the list, you will need to click ‘WordPress’. If you have
never used this site before, you will need to install and activate this WordPress plugin.
Just follow the on screen instructions (‘Install Now’ as well as ‘Activate Plugin & Run
Importer’) to get this plugin installed and activated.
2. Click the ‘Browse’ button and select the ‘demo_content_import_file.xml’, when you have
selected the file, click the ‘Upload file and import.
3. The next screen is going to ask you who you want these posts, pages and images etc
assigned to, select the user you created as your ‘Admin’ and then remember to make sure
you click the box next to ‘Download and import file attachments’. If you do not tick this
box, you will not receive the images.
If you receive any error messages, such as ‘Could not import…..post type does not exist’, this
is because you are trying to import content from the XML that requires a plugin and you did
not install and/or activate the plugin required. This doesn’t mean your site is broken, it just
means that you chose not to install and/or active the recommended plugins from the above
step.
Once you have done this step the first thing you need to do
is go to Contact. Edit the forms that were imported and
make sure you change the email address that you want the
forms to point to:
Now that we have the content, you should start to see things shaping up a bit more like our
live preview with the exception of some widget areas, logo(s) etc. But we’re not finished yet
— let’s go finish setting up your site.
ATTEND WORDPRESS THEME
6
Finishing the general setup
There are some settings we didn’t cover in the above steps because we needed to import
some content before these settings would start making sense. We’ll cover those steps now in
list form, you ready? :) (don’t forget to click ‘Save’ for each screen you make changes to)
1. Navigate to Conference > Conference Options. Here you will need to set your permalink
structure for your session single, session category and speaker single pages. We have you
go to this first, because once you make a change here, you will need to go back to Settings
> Permalinks and re-save your permalinks to let WordPress know you have a new item to
consider with the permalinks. If you receive 404 Page Not Found errors, simply re-save
your permalinks and this will correct your issue.
2. Navigate to Settings > Responsive Lightbox. Here you can customize how you want your
lightbox to look and perform. There are 2 tabs of settings to go through. How you set this
plugin up is completely a choice of what looks good to you.
3. Navigate to Settings > Permalinks. Re-save your permalink structure.
4. Navigate to Settings > Reading. Here you can set your static ‘Home’ page and your ‘Blog’
page and how many posts WordPress should display before the next page pagination
kicks in. Front page displays : either your latest posts (which is default for WordPress, or
you can select ‘A static page’ and from the drop down select ‘Home’ for the Front page
and ‘Blog’ for the Posts page. And your Blog pages show at most # (for our live demo we
have 3 selected here).
The rest of the settings we’re going to go through (menus, widgets and theme options) will
have their own dedicated section as shown in the sections below, so that we can provide
more in depth details, screen shots and code snippets (when necessary).
We will be going over the page templates and what they are later in the documentation,
should you choose to not go with the pages created for you but create your own.
ATTEND WORDPRESS THEME
7
Importing the widgets
There is a handy-dandy plugin out there that can quickly import all widgets as we shown
them in the live preview. If you have installed and activated the Widget Importer & Exporter,
navigate to Tools > Widget Importer & Exporter. Click the ‘browse’ button and select the
'demo_widgets_import_file.wie' file included in your download. Once selected, just click the
‘Import Widgets’ button and everything we have in the live preview will now be populated
to your site.
Don’t worry — we will be covering later what each widget area does and where it shows.
ATTEND WORDPRESS THEME
8
Setting up your menu
We are going to show you how we created the menu(s) for our live preview.
This theme comes equipped with 2 registered menus: the desktop menu and the responsive
menu. The responsive menu will kick into action when the screen size is 1024px or less. We
created this separately to allow us to create a cleaner and neater menu for responsive devices
and also allow you the freedom of changing your menu items based on the device that it is
being viewed from.
You can add any items to your menu that you would like, you have the freedom to show
what displays in each menu. For example, you may want to list the speakers separately.
That’s cool, no worries. Simply drag/drop each speaker to your menu. But wait, you don’t
see your ‘Speakers’ listed, no worries, that’s a WordPress default setting we can easily
change. Navigate to Appearance > Menus. In the top right corner, you can see ‘Screen
Options’, just click that and a pull down menu will slide into place.
ATTEND WORDPRESS THEME
9
Here you can select what items you can use with the WordPress drag/drop ‘Add to Menu’
option. Also, make sure the CSS Classes is ticked as well. This will be needed for the
responsive menu set up.
ATTEND WORDPRESS THEME
10
To create the drop down effect for menus, you just need to use the ‘Links’ section loaded on
the left. Click ‘Links’, in the URL field, you can either use a # sign, meaning you don’t want
the menu item (when clicked) to actually go anywhere, you just want to create the drop
down effect. Then you can give the ‘Navigation Label’ what ever text you want the user to
see. Below is an example of how we have ours.
As you can see from the screen shot, we used the ‘Links’ to create a dummy drop down. We
used the # sign for the URL field and the Navigation Label was ‘Schedule’. Then we clicked
‘Add to Menu’. From there, we used the drag/drop capability to add the Session Index Page,
ATTEND WORDPRESS THEME
11
Session Category Page and the Session Speaker Page. The dummy page becomes the ‘Parent’
menu item and when we added the pages underneath, we did a slight drag over to the right
until it was indented slightly.
We did a similar effect with the responsive menu, however, the top level item for the
responsive menu MUST be the dummy # (Links) as we did above, but EVERY single menu
item added must always be indented or the drop down responsive menu will not work
properly. See the screen shot below.
These menus were imported for your convenience, however, they will need to be ‘assigned’
to the correct location and any custom links we show will still point to our live demo. For
example, the ‘Blog Author’ menu item has this link:
http://mythemepreviews.com/attend-wp/author/AT_admin1970/
The above text in italics is obviously our live preview prefix of the url, so you would want to
change this to your site. The same goes for the bold text above, this is our live demo author
name, you would want to change that to your author name (who you assigned the posts,
pages and images to on the import step). Once you make those changes, you will want to
remember to click ‘Save Menu’ for each the responsive and the desktop menus.
One final step for menus and then you can see them in action on your site. Click the ‘Manage
Locations’ at the top of the window.
You will need to assign the menus to their correct locations. The above screen shot shows
you how we have ours set up. Just remember to ‘Save Changes’ when complete.
ATTEND WORDPRESS THEME
12
Using the theme options
The theme on activation will automatically set the color pickers for you until you are ready to
pick your colors, upload your logo and set up your home page settings.
Navigate to Appearance > Customize. Here you can upload your logo, set your copyright
etc. By default, we have the theme using default colors and image backgrounds. You will be
able to customize these once you navigate to Appearance > Customize.
ATTEND WORDPRESS THEME
13
1. Logo — click the drop down arrow under ‘Logo’, here you can upload the logo you
choose. If you choose to not upload a logo, the theme will take what ever text you have
under Settings > General > Site Title and display the text. Should you want to upload
your logo, just click the drop down that says ‘No Image’ and either drag and drop your
logo in the area provided or click the ‘Select a file’ and upload. The file will get attached to
that particular area, but it will not be saved until you click the ‘Save & Publish’
button at the top of the pane.
2. Favicon — as with above, just follow the same steps to upload a favicon, should you wish
to display one.
3. Paste analytics code — if you are wanting analytics reporting you would paste your entire
script here to be applied to each page’s footer area in order to track your traffic.
4. Custom CSS — here you would just put any custom CSS in case you aren't using a child
theme.
5. Default top Image — this image will be displayed on every page that doesn’t have a
featured image set (with the exception of the dynamic pages such as blog index, search
results etc). By default, the theme has a fallback image to use if none is set located in the /
img directory called default_image.jpg.
6. Home Top Image — as with all the other image mentioned above, we have a fallback for
this image, you can see them on the homepage. By default, the theme has a fallback image
to use if none is set located in the /img directory called home_hero.jpg.
7. URL Top of Page Button — on all pages (as shown in our demo) you can see a button that
says 'Register', you can enter a url here that the button will point to. If there is no URL the button will not show.
8. URL Text Top of Page Button — or the above, if you didn't want it to say 'Register' you
just input here what you want the text to say if you have chosen a url in the above step.
9. Color 1 — this color picker controls things like headings, hr, pagination hover,
blockquote, commentform labels, tag cloud button and some Cr3ativ shortcodes for
theme specific styling. We use #4d515c as default.
10. Color 2 — this color is used for navigation, homepage button, page titles, homepage text
widget, borders for hover/active menu states, main content background color. We use
#ffffff as default.
11. Color 3 — this color is used for links and theme specific shortcodes on alert boxes, hover
on certain titles such as speaker name, session name and blog titles. We use #2294e5 as
default.
12. Color 4 — this color is box shadow of main content, color for navigation and input fields
as well as table background color. We use #e1e3e7 as default.
13. Color 5 — this color is regular input color, body color, input focus color, pagination hover
color.. We use #888f9e as default.
14. URL mp4 video — If you are using the Homepage Video template, you would enter the
url to the mp4 here. Please note that same browsers require both, some only 1.
ATTEND WORDPRESS THEME
14
15. URL webm video — If you are using the Homepage Video template, you would enter the
url to the webm here. Please note that same browsers require both, some only 1.
Once you have all your options created, just remember to click ‘Save & Publish’ to save all
your changes.
Now you can see, if you followed all of the steps above, your site will look exactly like the
demo.
Next we will be going over what each page template does, where each widget displays and
how to use the post formats.
ATTEND WORDPRESS THEME
15
Page templates
This theme has 7 page templates included. Below is a description of each page template.
Default Template
This is a right sidebar page and uses the widget area of ‘Page’. The content you entered here
is the content that will be displayed.
If you set a featured image, it will display under the ‘title’ of the page. If you have not set a
featured image, the image you uploaded (or the theme default image if you have not
uploaded) from the WP Customize under the ‘Default Top Image’ will be used.
Cr3ativ-Conference
This page template was created specifically to loop through the ‘sessions’ you have created
and display them for you. This page will display the page content you entered before
looping through each session. As with the template above, if you’ve set a featured image, the
image will be displayed under the ‘title’ of the page. And as with above, if you haven’t set a
featured image the image you uploaded under the ‘Default Top Image’ (or the theme default
image) will be displayed. This is a fullwidth page and does not have a widget area.
Cr3ativSpeaker
This page template was created specifically to loop through ‘speakers’ you have created and
display them for you. This page will display the page content you entered before looping
through each session. As with the template above, if you’ve set a featured image, the image
will be displayed under the ‘title’ of the page. And as with above, if you haven’t set a
featured image the image you uploaded under the ‘Default Top Image’ (or the theme default
image) will be displayed. This is a fullwidth page and does not have a widget area.
Fullwidth-Page
This is a fullwidth page and does not have a widget area. The content you entered here is the
content that will be displayed.
If you set a featured image, it will display under the ‘title’ of the page. If you have not set a
featured image, the image you uploaded (or the theme default image if you have not
uploaded) from the WP Customize under the ‘Default Top Image’ will be used.
ATTEND WORDPRESS THEME
16
Home-ImageFullWidth
This page template was created specifically for your homepage. It does not use your content
at all but rather uses the widgets ‘Home Page’. If you did the widget import above you will
already see the widgets that we used in the demo. Below we’ve included screen shots to
break down each widget area for the homepage. The image displayed is from the Appearance
> Customize setting we mentioned earlier. We just used a text widget and entered the text
and any HTML we wanted to display over the image. We will be going over the widgets later
in the documentation to show you what widgets we used and where as well as included code
snippets.
Home-VideoFullWidth
This page template was created specifically for your homepage. It does not use your content
at all but rather uses the widgets ‘Home Page’. If you did the widget import above you will
already see the widgets that we used in the demo. Remember you will need to enter the mp4
and the webm video links in order for this page to work.
Sitemap
This page dyanmaically pulls your posts, RSS feed, categories, page etc into a page for you.
ATTEND WORDPRESS THEME
17
Post Formats
This theme supports Standard, Audio, Link, Gallery, Video and Quote post format.
This is how the blog index displays each one. The single blog pages will just display the
content as your entered it. Depending on the post format and if you have comments turned
on each post format will display certain meta data information with the exception of link and
quote - they only show the date it was created.
Audio Post-Format
If you have created an audio post format and have inserted the WordPress audio playlist
short code, the theme will extract this short code and display it above the title and meta
information. If you are not using the playlist short code, the theme will check for a featured
image and display it. You will need to use the ‘more’ tag that WordPress supplies to control
the amount of text that is displayed before the read more link. Make sure if you are using the
playlist short code, that the short code is displayed below the ‘more’ tag or you will have
duplicate players showing.
Video Post-Format
If you have created a video post format and have inserted the WordPress video playlist short
code, the theme will extract this short code and display it above the title and meta
information. If you are not using the playlist short code, the theme will check for a featured
image and display it. You will need to use the ‘more’ tag that WordPress supplies to control
the amount of text that is displayed before the read more link. Make sure if you are using the
playlist short code, that the short code is displayed below the ‘more’ tag or you will have
duplicate players showing.
Gallery Post-Format
If you have created a gallery post format and have inserted the WordPress gallery short code,
the theme will extract this short code and display it above the title and meta information. If
you are not using the playlist short code, the theme will check for a featured image and
display it. You will need to use the ‘more’ tag that WordPress supplies to control the amount
of text that is displayed before the read more link. Make sure if you are using the gallery
short code, that the short code is displayed below the ‘more’ tag or you will have duplicate
galleries showing.
ATTEND WORDPRESS THEME
18
Link Post-Format
If you have created a link post format, the theme will use the title and display it boldly and
then take the link you have entered in the content area and display it under the title.
Quote Post-Format
If you have created a quote post format, the theme will use take the content and display it in
a block quote format. The title of the post becomes the ‘quote author’ that will be displayed
underneath.
ATTEND WORDPRESS THEME
19
Widgets
Widget areas are simply a place for you to put whatever content you want and you have the
option of choosing one of WordPress standard widgets such as ‘Categories’ or ‘Pages’, or
even use a text widget to place any text or html that you would like. This theme will allow
you to use your shortcodes in the widget areas should you choose the ‘Text Widget’.
Next you will see screen shots and code snippets (if needed) to see how we set up our widget
areas. First, to get to Widgets, click on 'Appearance' and then click ‘Widgets'.
ATTEND WORDPRESS THEME
20
Please see the online documentation for code snippets and further screen shots.
ATTEND WORDPRESS THEME
21
Other notes
Please read all the documentation and follow all steps before opening a support ticket — i
can assure you that this documentation should cover all aspects of this theme, it’s use and
setup!
We have a dedicated support center as mentioned on the first page of this documentation
where you should direct all questions with regard to the functions and operation of this
theme.
We supply support not because we have to, but because it’s the right thing to do. I only have
a few rules — here they are:
Be polite
This is actually a rule and not a recommendation. We love supporting our buyers but we are
not open to demands, alterations to the theme, customizations etc.
It’s Purely help on installing or if you’re not sure quite how to use a function of the theme.
Customization work
We offer customizations at a price – contact us in the support center with your project scope
and we will offer a price and timeline.
We don’t work for free sorry.
If you don’t have a budget then unfortunately it’s time to either start looking at tutorials,
grabbing that handy brother-in-law that is a seasoned developer or borrowing money to get a
professional to do your customization work.
We do not offer free advise, do the work for you or assist with ‘can you just show me how…”
requests.
I hope you understand that at $40 – $55 a WordPress theme doesn’t include a developer at
your disposal, but it does get you a rock solid awesome theme.
License
You must have a license number to register the product at the support center – this is
available from your downloads page at ThemeForest – look for the item on the page and click
the drop down – that’s the license right there :)
ATTEND WORDPRESS THEME
22
Open it up and grab the license number and hit up the support center – we’re right here
waiting!
Thanks again, and I do hope you enjoy using the theme as much as we did creating it for you!
Jonathan & Barb
ATTEND WORDPRESS THEME
23