 nga kwa. If I quickly go grow up lightbox again, lightbox JavaScript, we're going to see what we are, what we are actually aiming at doing. So if I go to the examples, you'll see that we have the individual pieces whereby when you click you have the image showing up. Ta mwenye eku ilu kei suiss, iniirutu mkiku iniirutu, mwenye ka mwenye kiku i utu mwenye ka mwenye. Tmwenye kwa wakutu iniirutu mkiku iniirutu mkiku imiirutu. so na iniirutu mwakutu wakutu wakutu. kwa hwanu li kimiirutu empezu wakutu kwa hwenye kliye mwemi, matu na some tenantsin nekaya. the html from here so i'm just going to inspect this particular element and what we need is to have this image set right here because it's just looking over the the tags so i'm just going to edit as html and i'm just going to steal the whole bit of html that we do need now next what we're going to do next is we're going to go into our theme folder and then we are going to add a front page just to show you how we can install that in our front page so when we open up our theme our theme is 2016 at the folder next we're going to create here a new item from from our hierarchy so we're going to default dash page dot php so if we open php here and get the default header from wordpress template and also get the footer and then i'll just go in here and close php open php again and dump our our html right in the middle first type this up a bit and save if we go back to our front end on our wordpress and reload we're going to get a whole new page right here and it has this html in in here so what we're going to do next is actually make that information dynamic by changing everything that is in here so i'm just going to take away some of these and leave only one item which we shall be looping over so i'll take that away and then just use this to i'll just use this as a loop over for our for our information now we are ready to start querying our custom post type so what we're going to do is again i'm going to just google and say query custom post type right in here and then i'll look up for a quick answer uh i'll just go for one of those links pippin pippin's plugin is always a good resource to jump into he has stuff that is always ready so what i'm going to do is i'm going to just copy this query that we do need here then i'll just go and drop this in our ppp so what we're doing here is getting a new query uh wp query get the post type the post type that we do need is called gallery and we don't need to be paged i'll just get the post spa page and get them to p minus one meaning we are getting everything just add that proper limits brackets and uh we can actually randomize it if we need to then next we're going to go for if the query has posts then we're going to just loop over those particular posts and then when the while is done we'll end the end while and then reset the the post data and then next we shall do that we shall end the if we shall end the if uh of of the whole query so now we are ready to do it so what i'm going to do next is i'm just going to bring this and just add it to our loop so in here is where we need to add our html and i'm just going to change this to to gallery so that we can be able to add some css to it so we have the gallery grid right there so if we save and for now i'm just going to comment this out and just echo in php and just echo the titles of what's coming back echo get the title we're going to see what data is actually going to come back so we come back to our front page and reload yeah we're getting our food items and gallery none food items right for now we're going to loop into each of those posts to get the attachments and i'm going to open up my php and then i'll i'll just get a variable where i'm going to store my arrays that are coming back so attachments is going to equal to get posts which needs parameters that should be in an array so we're going to pass in an array of parameters and first parameter is we're going to get the post type of attachment remember when we saw the different post post types that work place provides so there's attachment and we're looking for just those media attachments so we need all the items to come so we say post per page should give us negative one for all and then finally we are going to just query the post parent we need to get these items coming in from a parent and that parent is going to be by passing the id of our current page so i'll just pass in that post parent so when i reload right here we're getting our array of items and yes we have eight items coming in our array so next we're going to say is if we have the attachments or if attachment is true then what we're going to be is we're going to say for each for each attachments as attachment we're going to just loop over each one of those and say what we need to do actually get is we need to get the url and there is a functionality for that in one person that's called the wp get attachment url and it just needs a you to pass in the id of that particular post type so what we're going to do is i get this and say get the attachment and from mid array that's written get the id and what we're going to do is actually just store this in a variable so that once we get this we are able to just pass it into our html so for now i'm just going to cut this close php open php and just press this inside once we do that then we are able to just change everything here and open php and then just echo img right here so just echo that and then what i'm going to be is i'm going to also get the same code right here and drop it in for our image once we have this i uh this url stored as a name as an image we can be able to just send this information and make all of this dynamic for the rest of the information that's not dynamic we shall be able to to get the information that's needed by just looking at what is returned as the loop so we know that there are things like post captions that can be got and we can be able to to add those onto the particular segments that we do have so for now i'm just going to stop this badam comment it out and then i'm just going to move this particular div where it should be that is right before the footer and i'll open this php tag and close off this one so that it's right and the next thing we're going to do is we shall need to have this image set right after this loop where we're looking inside the post and we'll just add it there and then we shall add also this other one the closing tag right before the end while so it's actually in the right place so come and just push this in here and save so let's just go to our page and reload we're going to see that we have the different items coming however you'll notice that now all of these are mixed both the non food items and the food items are mixed up and i can sense the issue of that coming from our media library if you look at it you realize that all of these are attached to gallery food so there's a little plug in that i wrote that we can actually use to help us sort this issue really quickly so what we're going to do is just going to go to our plug-in and then we shall look up attach media and then we'll be able to see that plug-in and then we import it install it then you can use it so if i install this plug-in it's the one that i wrote it's recently updated and it allows us to attach and unattach and reattach images to to other posts in our particular in our particular install so i'm just going to activate this and after it's activated i'll just go back to the media so i'll go back to the media and then i'll choose the items that are food items so just tick those little food items they're four in number and what i'm going to do is i'm going to reattach them using the bulk actions and i'll send them to the food section and then voila so we have food items gallery non food items and yeah we already saw if i reload here we're going to see a little bit of what are coming back so we have the food items showing up alone and then we have the non food items also showing up in their own section so what's going to help us see this better is when we start adding style to our page that's when we see the changes so for now i'm just going to go back right here and get this title and just store it into a title item into a title variable so that i can use it in our particular area let's say here where we're having the data title we'll just open php and echo title and i'll just do the same for our old tag for now to be able to allow more accessibility to come through and so we just need we'll add the css to to get this right and it's going to look better once we are done so if i save this we are now ready to go and start adding css to our particular page