so maybe it already exists?
nOOO it doesnt
Disclaimer*** This tutorial is still in a testing phase.
This tutorial will require intermediate knowledge of:
This tutorial is meant for those using the thematic theme and who have already created a personal theme folder within the wordpress folder on your server. By doing this tutorial you have already created a functions.php file in your personal theme folder as well as a style.css file.
There are several different types of content sliders, and i have tried to use many of them with no luck! This one is called slickslider and it wasn’t that hard to put into my wordpress theme. Lets get started!
1. DOWNLOAD THE SOURCE FILES
First download the source files located here. You will also need two javascript codes which are called slickslide.js and jquery.js. Just save these codes under the same file name and keep them handy to place into folders in the following steps.
2. CREATE FOLDERS
Next, create 2 folders on your server within your wordpress folder. One folder will be called ‘assets’ and the other will be called ‘js’ (short for javascript). Place both folders in your personal theme folder that you have previously created.
3. PLACE FILES IN THEIR RESPECTIVE FOLDERS
Now, place the slickslide.js file in the js folder. There is an IMG folder in the source files you downloaded in step 1. Go to the img folder and locate all of the jpg files and place them in the asset folder.
4.NOW FOR THE PHP CODE
Place this code in your functions.php file located in your personal theme folder.
5. NOW LETS BREAK IT DOWN TO SEE WHAT IS GOING ON
The code above is creating the slickslide function to our site. We then tell the function to give us the original options for the dropdown which was apart of the javascript. We break out of php and insert the html to tell the slider where to get the content from. Lastly we add the filter which basically replaces dropdown functions with the slider.
6. SLIDER IS SET UP BUT HOW DOES IT WORK?
The code above is telling us to add images through the dashboard in our post section with the thumbnail feature. it is also creating the divs in which the slideshow will be placed in. The next code is more about the content images. The code is telling us that in the post page of our dashboard we need to click ‘featured’ from the category list in order for the slider to get the content. The slider can have several images in it which we can change by simply changing the number of showposts. In this code you can see its currently set at ‘5′ posts which would be 5 different slides. The next codes are more about using the post thumbnail feature. This is just creating another div for us to style later with CSS. It is also telling us to use our media gallery to upload photos and then when prompted to choose ‘use thumbnail’ in our post. The rest of this code is basically saying how the written content will be placed in a title and in the excerpt. We will be able to use our post page to easily create a title and excerpt post which we can then style later in CSS to our liking. The code below is adding the action through PHP.
7. PLACE IN THE CSS CODE
Lastly, place this CSS code in your personal CSS style sheet which should be located in your personal theme folder.
Style the CSS to your liking, you can change virtually everything about the look and style of the slider.
And that’s about it! Enjoy!
Hi peeps, this has been updated as of June 3rd 2010, this is a tutorial on how to install a thumbnail plugin, as well as how to use it.
Disclaimer*** This tutorial is still an example, it isn’t meant to replace any scripts, but its for you to go through to help your code.
Must have basic knowledge of css, divs, php, and luck?
Things you will need
Download the functions.php
PHP FILE DOWNLOAD
Download the style.css
CSS FILE DOWNLOAD
Explanation
What we are doing is getting wordpress to call the thumbnails function, known as (the_post_thumbnail). To make that work, we are inserting a line of code into functions.php which i will explain, that allows that function to be looped into each post. Keeping it simple, lets start.
To not confuse anyone, the final gist file should look like this, i will break it down and explain what each does.
1. First The following code that follows should be placed inside your child themes Functions.php. We will be using get thumbnails to create a plugging in which you can post thumbnails. Grab this line and place it in functions.php. This will enable the UI in the WP Admin. Which looks like this
2. Next we have to get rid of any index_loops and create our own loop
3. Then we shall Insert our thumbnail into the loop created for the post.
it should look like this
Done. You should be able to place thumbnails into post after this easily. If you want to see what other things that can be done with the thumbnail function. Read On!
Next an example of how this plugin can be easily paired with Jillian’s tutorial to give you a page which looks like this
Example
I recommend using this with jillian’s post loop. So head to her gist over here. Jillian’s gist on Github
First make sure to at least have 9 posts if you want to see proper results.
First, follow all the steps 1 2 and 3 earlier
Part 1 Edit the fields instead of placing the_content, place the_excerpt this way, the excerpt only has a few lines. Create a div and place it inside. Its complicated, i’ll show the gist
Part 2 Create a div for your thumbnails too, by placing like this
The div labeled ‘visible’ comes into handy when you decide to place a visibility style on it, thats why i placed everything in different divs.
Step 5: We want to link our thumbnails to the post itself, therefore, we set it to fetch the string from permalinks, you can also pick other choices like the date, but permalinks set by post are way easier. The update looks like this
i’m sure many of you wanted to know how to do so, one simple way of doing it utilizes the href tag, and a little php, you can get it to link your post =) i loved this part.
Step 6. Using css, style the post to have the right width and height, make sure that they are not too big or they won’t tile properly. Jill’s code would’ve allowed each 3 post to be loops into a separate div. Set the thumbnail, to be on hover, so it will disappear, leaving the content underneath it to be shown.
The ‘visible’ tag that was place in earlier will be to set your background, as well as since its the div where your thumbnail has disappeared, the html link, will be linked to this class, therefore it will still be activated.
Just in cases you didn’t get it to work using the template function,then just copy and paste these, guaranteed to work, lol, cos i tested it so many times my eyes watered
the functions.php
PHP
the style.css
CSS
Hi guys! So as most of you know its been a rough ride for me and OS this semester, and although my site is far from being finished the homepage is finally getting there! The whole debacle with the content slider was solved with the help of Mushon, and getting the thing up and running is a breath of fresh air! Check out the site scottallenroberts.com. I had to deal with lots of site breaking over the last couple of days, but the homepage at least represents some of my progress in the class which would includes some CSS text replacement techniques, and also one using php. The jquery used to make the content slider can be found here. The slider was placed in with PHP and then was not so bad to modify with CSS. I used Angels code to get rid of the index loop as well. There are some things i still haven’t figured out like why my page is so long? I tried so many different things to try and get it shorter, but i must be missing something. Also, now that i have used a specific widget area for a CSS text replacement it is not uniform on each page, why is this? My tutorial is coming soon on how to get the content slider up on a webpage. see you soon!
I just exported yumhut from my parsons server to my dreamhost domain and went through all those painstaking little changes—installing wp on dreamhost (love the 1 click!), exporting my xml file of all my parsons yumhut stuff, reinstalling and editing all the plugins on my new wp , reorganizing categories, re-tagging all my posts, etc…
yumhut.com is now up and running. I’m going to be updating this one only from now on, so bookmark this one as I’ll soon be deleting my parsons server one.
Since last class, I’ve edited a ton of things and finished everything I planned to in my last brief:
- added the css image titles to the three bottom divs (latest recipes, latest articles, latest hacks).
- linked my nav to category pages and replaced links with css styled images. all are fully functional and working just great.
- worked my way around using “templates” for styling inner pages by simply using the class “singular” when targeting elements to style in my css. Thanks to Mushon for reminding me again every single week to try that out! Selectively targeting elements this way was really helpful, since I only needed minor styling (enlarging text size on single post pages, adding more margins here and there) and I never needed to go beyond my one css stylesheet. Check out my latest commits on github to see what changes I’ve made and how I’ve implemented this.
Still working on my Git tutorial. If any of you (Jill?) tried it, please do let me know how it’s going so far. I know the rest of you have Leopard macs, so this tutorial probably isn’t that helpful for you….although the commands I’m listing for github commits from Terminal might help.
I think i’d better start on my tutorial, i’ve still been tackling on my wp site, not showing any progress cos its been crashing.
My wp tutorial will be on thumbnails and how to better utilize them on websites.
Some examples i was thinking of:
portfolio sites
photo album sites
I’ll update this in the morning, wp is sucking the life out of me.
I’ve been using jillian’s tutorial on looping my post into different divs, thanks jill its really useful, and i’ve solved my looping posts that were doubling up, look out for my tutorial tonight!
Omg, my dashboard keeps disappearing, something is wrong, can someone take a look at my gist?
This is an intermediate level WordPress tutorial intended for designers learning to customize a theme. If you have a solid grounding in php coding and WordPress—you just want to understand the code—I recommend a separate tutorial and update (to the same tutorial) by Spencer at Function. You can also find code below, but this article is geared towards understanding custom fields, meta data, and how to create and implement custom write panels. Design and content context will be taken into consideration.
A few key concepts you should be familiar with before beginning the code portion of the tutorial:
Filters
Hooks
The Loop
Written for users operating with WordPress 2.9.
Read More
(Disclaimer: this tutorial is work in progress and is being tested)
This tutorial is for those operating Mac Os X.
In this post, you will find a slideshow tutorial explaining how to export your developing wordpress site from your local MAMP server to your live server (and to the world!). Before you begin this tutorial, you should be familiar with a few concepts.
1. Working Locally
When developing (coding) a website, it is very helpful to work locally. What this means is that you are working on files on your own personal computer and not working directly onto your live server. This is good practice because you might want not want your site to be accessible to others during development. This is where MAMP comes in. What MAMP is is a program that installs a local server environment to your computer. Using MAMP, you can assign a local url address to your site. This means you can develop the code and check the appearance and function of your coding immediately by visiting this local site in a browser on your computer and you don’t have to upload your files to a live server. This saves time and is safer than working from a server or uploading your files every time you want to check your code. In this tutorial, we are going to be specifically dealing with the development of a wordpress site. For more information on how to install and work on a wordpress site with MAMP, take advantage of the following resources:
Installing Wordpress Locally using MAMP
2. Hosting
Most webhosts provide phpMyAdmin in their control panels. If you are confused about whether you have this function, you should contact your webhost. This tutorial is for hosting sites that provide phpMyAdmin.
3. What this tutorial will teach you how to do is to export the site you have developed locally onto your live server. This is something you can do as often as you like as you develop your site. I hope it is helpful.
UPDATE:
After going over the comments from my tester, Jonathan, I have decided to provide an alternate tutorial experience. The embedded slideshow is not working as well as one would hope. So, I have broken down the pages to see if perhaps this is easier to work with.
For step five, if you press “go” and are taken to a page full of code and not a prompt to download the .sql file, you have not checked “save as file” in the lower left hand corner of the page (above “file name template).
If you are having a problem accessing your phpMyAdmin through dreamhost, you might find this post helpful: cache problems
This intermediate-level tutorial is for anyone who wants to post HTML, CSS, or PHP code on Github.com for web projects and open source collaboration. The aim of this simple tutorial is to teach you how to set up Git on your computer and push code to Github.com.
WHAT IS GIT?
An open source project management tool, or “Version Control System”, that allows you to see a snapshot of your data projects at any point in time. More specifically, you can see what files have been modified in your project and what haven’t. Because of this, you can revert back to any state of your project at any given time. Git is also a great way to share code with others and work on projects together. There are a number of Git repository hosting sites. Since we use Github in our class, I’ll cover that briefly later.
For example, if you’re working on a wordpress blog project where you are modifying a child theme, you would be working in some folder located in ../wp-content/themes/yourchildthemenamehere/ and changing the files: functions.php, style.css, and any other subfolders (ie: images) and extra stylesheets. If you were to make a change on one or all of these files, you’d normally see the changes made to each file independent of one another. With Git, you can see the entire project folder as a snapshot, at a single point in time when you recorded that snapshot. You can see that ONLY functions.php has been changed at that time, while your css and images folder remained untouched.
HOW DO I GET GIT?
To install Git on OSX, check which version of OSX you have. Then go to one of the links below to download the installer packages. To install on Windows, go to the appropriate link below.
Mac OS X 10.5 (Leopard) or later: http://code.google.com/p/git-osx-installer/
Mac OS X 10.4 (Tiger) : http://metastatic.org/source/git-osx.html **but download the SECOND package called “git-1.5.4.3-1.mpkg.zip” since the first one is an old version of a Leopard package.
Windows: http://code.google.com/p/msysgit/
Easy installs, just download, extract files, open installer and follow the instructions.
HOW DO I USE GIT?
Now that Git’s installed, open up Terminal if you’re on OSX, or Git Bash (from msysgit) if you’re on Windows.
One key thing to remember when you open up Terminal is to run the command: export PATH=$PATH:/usr/local/bin every time you run Git from terminal. After you install that package from metastatic, you’ll be shown a dialogue box reminding you that you’ll need to do it as well. There’s an option to have that command run automatically by adding it to the file “.bashrc”, but I haven’t tried it.
We need to start with some configuration settings. Type in the commands below (shown in red), but replace Your Name and your@email.com with your info, keeping the quotes around it. *PLEASE NOTE: there are no spaces between the two dashes before global user.name. I had to put a space in there so that Wordpress wouldn’t auto-format the two dashes to a single em dash.
git config – -global user.name “Your Name”
git config – -global user.email “your@email.com”
Create a new folder on your desktop named after your project. For my example I’ll name my project folder “Childtheme”, and copy and paste my child theme files in here (ie: functions.php, images folder, styles.css, readme.txt)
To direct to that folder, type in the command: cd desktop
then: cd Childtheme
Test to see if you’re in the folder Childtheme by typing the command: ls
You should see your folder contents listed.
To get started with Git, type the command: git init
This adds a repository to your folder, basically a history of all your code changes.
You’ll see a message reading “Initialized empy Git repository in /users/JoansSample/Desktop/Childtheme/.git/ (with your path and folder names replacing mine, of course). Now, your terminal path will also appear appended with (master). This means Master is the branch you’re currently working on. Think of your project as a tree on which you can create different features on different branches.
Go to github.com and signup for a free account: https://github.com/signup/free
VERY IMPORTANT: You’ll need to generate a new SSH public key, so read about that step-by-step here. I saw this posted on other tutorials, but I liked how this showed me step-by-step screenshots of what I should be doing: http://help.github.com/mac-key-setup/
After you ssh to github and save the server’s key, let’s try making our first “commit”.
A commit is simply a pointer to a spot on your code history. Before we can do that, however, we need to move any files we want to be a part of this commit to the staging area. The staging area is a spot to hold files for your next commit; maybe you don’t want to commit all your current changes, so you put some in the staging area. We can do that by using the add command
to add everything in your Childtheme folder, type in the add command (yes, including that period): git add .
to add specific files only you can use this command to specify individual file names: git add functions.php
Now that we’ve staged our files, let’s commit them: git commit
This takes all the files in our staging area and marks that code as a point in our project’s history. Each commit should have an accompanying message, so you know why that code was committed. This editor allows you to write your message, as well as see what is in this commit. The editor you’re using to write the message is Vim; if you’re not familiar with vim, know that you’ll need to press i (for Insert) before you can type your message. After you write your message, hit escape and type :wq (to save and exit). You’ll then see your commit take place.
You can use a few options to make commits more quickly:
First, -m allows you to add your message in-line: git commit -m “your notes here on your commit–ie:update to filenames.php”
Second, -a will automatically stage and commit all modified files when you use this option. (remember, it won’t add any new files).
OR, third, you could use the -a and -m commands together like this: git commit -am ‘your notes here on your commit–ie: update to filenames.php’
The git status command allows you to see the current state of your code.
And now, GITHUB!
HOW DO I PUSH CODE TO GITHUB?
after staging and committing your files, look up your github URL (aka your private clone URL–you can find this on your github page for that repository you’ve created)
: git remote add origin git@github.com/yourusernamehere/yourreponame.git
A remote is a project repository in a remote location (github.com). We’re giving this remote a name of origin, and handing it our private clone URL so that the project knows where it’s going. You’ll see a message that reads “remote origin already exists”.
Next, type in the command: git push origin master
This pushes the master branch to the origin remote. Then you should get a message that reads “Enter passphrase for key ‘/Users/YourUsername/.ssh/id_rsa’. Type in the password you set up your ssh with.
Then, it should display “Counting objects: ## done” (the ## being how many files you’re pushing) and a whole bunch of other output messages.
That’s all there is to it. Good luck!
When installing git and using git and github, I referred to a lot of difference resources. Sometimes one was better at explaining something, sometimes another was better. I’ve compiled a straightforward tutorial combining the best of all these resources, and hopefully it is more helpful than referencing multiple places. Here are my original resources for the info I’ve compiled:
A good explanation of what Git is from Pro Git, a free online book on Git basics, at http://progit.org/book/ch1-3.html
I referred to this site a lot while installing/using Git: http://net.tutsplus.com/tutorials/other/easy-version-control-with-git/
as well as this video here: http://net.tutsplus.com/tutorials/tools-and-tips/terminal-git-and-github-for-the-rest-of-us-screencast/
kevin FROM LOCAL TO LIVE: EXPORTING WORDPRESS FROM MAMP TO LIVE 
Jyri Tutorial: Manage Custom Fields With Custom Write Panels 
Colorado Business Website Design Tutorial on placing in a content slider with jquery into wordpress 
Len FROM LOCAL TO LIVE: EXPORTING WORDPRESS FROM MAMP TO LIVE 
Brook FROM LOCAL TO LIVE: EXPORTING WORDPRESS FROM MAMP TO LIVE 
Smashing Magazine Tagged OSDP
