2. Changing name and icons of the App
1. Single click on the name of project at the top of “Project Navigator”.
2. The project name will be highlighted.
3. Type there new name and hit enter.
4. Once you hit enter key, under the “Activity Viewer”, you’ll be prompted to change name of some files. Press “Rename” and all files will be renamed.
5. When the renaming is complete then screen 5 (Fig 1) will appear with green checks in each replacement made and this dialog will auto close after sometime.
3. Changing the App Icon
1. Go to the “Project Inspector”. In case your “Project Inspector” doesn’t look like in Fig 2 then expose the contents of your project by clicking on the little arrow at the left of your project name. Similarly open WPFeed folder and click “Images.xcassets” (as highlighted in red in Fig 2). In the panel just right to the “Navigator Area” all image assets will be listed.
2. In that panel click “AppIcon” (highlighted in red in Fig 2). In the “Editor View” there will be various icons for different versions (retina and non retina display, iOS 6 and iOS 7) and purposes (App icon, Spotlight icon, Settings icon).
3. iOS app icon is square and you should get it designed by some designer or if you have the logo file then you can generate the app icons from online services like http://makeappicon.com/. In that case your iOS AppIcon will look good if your log is already close to square in shape. Some other iOS app generating web services are:
4. All these services will generate icons of different sizes. You will need following sizes preferably in PNG format.
5. Once you’ve obtained icons in these sizes then its time to replace them. Open the folder where you have all icons for sizes mentioned above. If you’re in the column view of Explorer then clicking on a file will show its size (highlighted in green in Fig 3). Drag and drop on the appropriate tile in the Editor area. Tiles labelled as 1x will have the specified size. e.g. Tile labeled 1x under iPhone 57pt will have AppIcon of size 57px by 57px. Tiles labelled as 2x will have AppIcon of double the size mentioned. e.g. Tile labelled 2x under iPhone 57pt will have image having size 114px by
114px (57 x 2). Keep on doing this till you replace all icons.
6. You can see more icons here which are used in UI. Like refresh button, bookmark button and default thumbnail. Each of them can be replaced in the same way.
4. Changing Launch image
1. Go to “Images.xcassets” (as highlighted in red in Fig 4). In the panel just right to the “Navigator Area” click “LaunchImage” (highlighted in red in Fig 4). In the “Editor View” there will be various
launch images for different versions (retina and non retina display, iPhone and iPad).
2. The launch image is shown when your app is loading and so its the best place for advertisement which can be read say in 2 seconds. So this is the best place to tell others about you and you can either place a logo of your company or website name or both. The sizes you’ll need will be:
ipad retina landscape
2048 x 1536
iphone non retina 3.5”
320 x 480
ipad non retina landscape
1024 x 768
iphone retina 3.5”
640 x 960
ipad portrait retina
1536 x 2048
iphone retina 4”
640 x 1136
ipad portrait non retina
768 x 1024
3. You can replace the launch images in the same way as you replaced the App Icon (Fig 5).
5. Changing the Feed
Now you want to display your own feed. There are few situations to consider.
– If app runs first time and there is no internet connectivity while app launches then you can display some hard coded feed (Fig 6).
– If app has run before and downloaded your feed successfully then if your app loses internet connectivity in future launches, in that case it saves last downloaded feed and display it.
– If app has internet connectivity then it updates the saved feed file and display all updated items.
5.1 Changing the default feeds
– In Project Navigator, open a file names feed.xml under WPFeed > Supporting files. Paste your default feeds into it and save the file.
5.2 Changing the feed URL
– Open ViewController.m under WPFeed.
– In “viewDidLoad” method find line in which “feedURL” variable is assigned. It should look like: feedURL = @”http://mobilemerit.com/feed/”;
– Replace the string with your feed URL.
5.3 Feed Format
– All feed items should be in “
– Feed title should in “
– The feed URL should be in “” tag.
– Feed date should be in “
– Feed item short description should be in “
– Feed item content should be in “
5.3.2 Overriding Rules
If you want to change these rules, say your feed has publishing date in “
5.3.3 App Configuration
In “ViewController.m” find definition of function -(void)fetchData and find a line where the 3 configuration variables (viz. thumbnailMatchPattern, contentInLink and context) are initialised.
So here we can see 3 configurations
– “contentInLink” has value “yes”
– “context” has value “yourappname”
– “thumbnailMatchPattern” has some regular expression which matches the first image tag and extract its src attribute.
The value of “contentInLink” controls how the feed content is displayed. If its set to “yes” then feed detail view displays content pointed by “” attribute of that feed item. This make app slower as various HTTP requests are sent to load the content pointed by “” tag.
If its set to any other value then feed detail view displays the content inside “
The value of “context” can be your app name or your company name or any string. This is used in case you have edit the flow of app based on the value context holds.
In case your feed is loaded from “” you have set value in “thumbnailMatchPattern” to a Regex pattern to capture the image “src” attribute which should be used to generate feed thumbnails. the current value matches the first image in the content pointed by “” tag. In case you are not using custom mode then you can
6. WordPress and Youtube Mode
The two popular feed formats are WordPress feeds and Youtube channel feed. App is specially optimised for these two modes.
6.1 Changing Modes
By default the value is set to CUSTOM mode which assumes that your feed source is unknown. Find the – (void)viewDidLoad method of ViewController.m. and you will find some constants looking BOOL variables (viz. WORDPRESS, YOUTUBE and CUSTOM) defined. If you want to switch to any one of the mode you have to set it to YES and set others to NO. Be careful here, only one of the three can be YES and others must be NO as many decisions taken by app is based on value of these variables. An ambiguous sate can lead to app crash.
6.2 WordPress mode
Set WORDPRESS mode to YES and CUSTOM and YOUTUBE mode to NO.
It is advisable to set “contentInLink” app configuration to @“no” and in your wp-admin settings set “For each article in a feed, show” setting to “Full text” which can be found under “Settings > Reading” (Fig 7). This will cause the app to load much much faster and
in a mobile friendly way (in case your WordPress theme is not mobile friendly).
6.3 Youtube mode
Set YOUTUBE mode to YES and CUSTOM and WORDPRESS mode to NO.
7. Libraries Used
The app uses 4 libraries all of which are stored in “WPFeed” > “Supporting Files” folder:
1.4.1 MBProgressHUD: https://github.com/jdg/MBProgressHUD
This is used to show loader.
1.4.2 GTMNSString+HTML: https://github.com/siriusdely/GTMNSString-HTML
It deals with Strings that contain HTML
1.4.3 NSString+HTML: https://github.com/Koolistov/NSString-HTML
It deals with Strings that contain HTML, uses GTMNSString+HTML
1.4.4 KMXMLParser: https://github.com/KieranMcGrady/KMXMLParser
It parses the feed. But this library is modified in this app.
There is also one custom library
This library contains common code used across the app.
Xcode Layout Guide
For detailed information, open Xcode, goto Help > Xcode overview.